AS3 Tutorial: Creating a Slideshow

/**************************************************************************************************
 * AS3 SLIDESHOW v1.1 | 2008.03.30 | ©2008 MediaDivision.com
 *
 * Licensed as GNU/GPL http://www.gnu.org/copyleft/gpl.html
 */
 
 package
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.text.*;
	import flash.utils.*;
 
	/**
	 * Used to create a slideshow of dynamically loaded pictures,
	 * based on an xml file
	 */
	public class Slideshow extends Sprite
	{
		// spacing between pics
		private const PIC_SPACING:int = 2;
		// time to display one picture
		private const ANIMATION_STILL_TIME:int =  4;
		// slide-in "braking factor"; smaller numbers result is faster braking; 1=instant braking;
		private const ANIMATION_SPEED_FACTOR:int =  6;
		// delay between animation steps in milliseconds
		private const ANIMATION_INTERVAL:int = 50;
		// randomize images in list?
		private const RANDOMIZE_IMAGES:Boolean = true; 
 
		private var queue:Array  = [];
		private var titles:Array = [];
 
		private var loader:Loader;
		private var xmlLoader:URLLoader;
		private var datasource:String;
		private var animator:Timer;
 
		private var xPos:int;
		private var lastTime:int;
		private var loadedItems:int;
		private var displayedItems:int;
		private var crtTitle:String;
 
		private var container:Sprite;
		private var titleField:TextField;
 
		/**
		 * Initialize the Slideshow
		 * @param datasouce full url of the XML containing the
		 */
		public function Slideshow(datasource:String)
		{
			container = new Sprite();
			addChild(container);
 
			this.datasource = datasource;
 
			xmlLoader = new URLLoader(new URLRequest(datasource));
			xmlLoader.addEventListener(Event.COMPLETE, onDataLoaded);
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}
 
		/**
		 * Executes when the instance is actually added to Stage.
		 * Only then we can access properties like stage.stageWidth
		 */
		private function onAddedToStage(e:Event):void
		{
			// disable stage scaling
			stage.scaleMode = StageScaleMode.NO_SCALE;		
 
			// move container off-screen
			container.x = stage.stageWidth;
 
			// create the title field
			titleField = new TextField();
			titleField.x = 0;
			titleField.width = stage.stageWidth;
			titleField.y = stage.stageHeight - 30;
			titleField.height = 30;
			titleField.selectable = false;
			titleField.embedFonts = true;
			titleField.antiAliasType = flash.text.AntiAliasType.ADVANCED;
 
			// text format for the title
			var format:TextFormat = new TextFormat();
            //format.font = "Verdana";
            // TitleFont class is created automatically by Flash CS3 IDE when you create a new Font in library
            // and you use the Linkage to specify a class. This way you can reference a font by class throughout
            // the project instead of its real name, i.e. "Futura Lt Bt" or "Century Gothic"
            format.font = new TitleFont().fontName;
            format.align = TextFormatAlign.CENTER;
            format.size = 20;
            titleField.defaultTextFormat = format;
			titleField.text = "";
 
			addChild(titleField);
 
			// create the animation timer
			animator = new Timer(ANIMATION_INTERVAL);
			animator.addEventListener(TimerEvent.TIMER, animate);
			animator.start();
 
		}
 
		/**
		 * Called when the XML has loaded
		 */
		private function onDataLoaded(e:Event):void
		{
			if (!xmlLoader.data)
			{
				trace("XML Load failed");
				return;
			}
 
			var dataXml:XML = XML(xmlLoader.data);
			for each (var item:XML in dataXml.item)
			{
				queue.push({url:item.@src, title:item.@title});
			}
 
			if (RANDOMIZE_IMAGES)
				queue = shuffle(queue);
 
			loadNextItem();
		}
 
		/**
		 * Retrieves an item from the loading queue and starts loading it
		 */
		private function loadNextItem():void
		{
			// get the first item in queue
			var item:Object = queue.shift();
 
			// stop when the queue is empty
			if (item==null)
				return;
 
			// keep this until the image has loaded, so we can assign
			crtTitle = item.title;
 
			// initialize the loader for each load request
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.INIT, onItemLoaded);
			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onItemError);
			loader.load(new URLRequest(item.url));
		}
 
		/**
		 * Called when an image item has successfully loaded
		 * @param e	event
		 */
		private function onItemLoaded(e:Event):void
		{
			trace("loaded "+crtTitle);
 
			loadedItems++;
 
			var content:Bitmap = Bitmap(loader.content);
			content.x = xPos;
			xPos += content.width + PIC_SPACING;
			container.addChild(content);
			titles.push(crtTitle);
 
			if (queue.length > 0)
				loadNextItem();
			else
			{
				//duplicate first and last items for wrap-around-effect
				var refFirst:Bitmap = Bitmap(container.getChildAt(0));
				var refLast :Bitmap = Bitmap(container.getChildAt(container.numChildren-1));
 
				// sadly, duplicateMovieClip is gone so we use this;
                // thank God it's not a MovieClip we needed to duplicate
				var copyFirst:Bitmap = new Bitmap(refFirst.bitmapData);
				var copyLast:Bitmap  = new Bitmap(refLast.bitmapData);
 
				copyLast.x = -copyLast.width - PIC_SPACING;
				copyFirst.x = xPos;
 
				container.addChild(copyFirst);
				container.addChild(copyLast);
			}
		}
 
		/**
		 * Called when an image item could not be loaded
		 * Simply ignores the error and moves on
		 * @param e	event
		 */
		private function onItemError(e:Event):void
		{
			trace("load error");
			loadNextItem();
		}
 
		/**
		 * Scrolls the loaded images from right to left;
		 * If an image is not loaded, the animation will pause
		 * Each image will stay still for a determined amount of time, displaying its title
		 * When the slideshow reaches the end, the "strip" is wrapped around to the beginning
		 * @param e	the timer event
		 */
		private function animate(e:TimerEvent):void
		{
			// don't do anything if there isn't at least one image
			if (loadedItems < 1)
				return;
 
			// check if there is a "next" image to display
			if (container.numChildren > displayedItems)
			{
				var picToShow:Bitmap = Bitmap(container.getChildAt(displayedItems));
				var targetX:int = stage.stageWidth/2;
				var itemX:int = picToShow.x + picToShow.width/2 + container.x;
 
				var delta:int = (itemX-targetX) / ANIMATION_SPEED_FACTOR;
			}
			else
			{
				// the next image hasn't loaded yet, keep showing this one
				var picToShow:Bitmap = Bitmap(container.getChildAt(displayedItems-1));
				var delta:int = 0;
			}
 
			// the image has stopped...
			if (delta <= 0)
			{
				// the next image should be displayed...
				if (((getTimer()-lastTime) >= ANIMATION_STILL_TIME * 1000) && (container.numChildren > displayedItems))
				{
					lastTime = getTimer();
					displayedItems++;
					titleField.text = "";
				}
				else
				{
					// we should display the title for the current image
					if (titleField.text == "" && titles[container.getChildIndex(picToShow)] != null)
						titleField.text = titles[container.getChildIndex(picToShow)];
				}
			}
			// the image is still moving
			else
			{
				// check if we need to wrap around
				// conditions: we've already displayed all loaded items and the last image is now just at the left edge
				if ((displayedItems==loadedItems) && ((container.x + container.getChildAt(displayedItems-1).x) <= 0))
				{
					var diff:int = 0 - (container.x + container.getChildAt(displayedItems-1).x);
 
					// seamlessly move the container back at the beginning and reset displayed images
					container.x = container.getChildAt(container.numChildren-1).width - diff;
					displayedItems = 0;
				}
 
				// move the container to the left
				container.x -= delta;
			}
		}
 
		/**
		 * Shuffle array elements
		 * @param arr original array
		 * @return shuffled array
		 */
		private function shuffle(arr:Array):Array
		{
			var shuffled:Array = arr.slice();
			for (var i:int=0; i < arr.length; i++)
			{
				var element:Object = shuffled[i];
				var rnd:int = Math.floor(arr.length * Math.random());
				shuffled[i] = shuffled[rnd];
				shuffled[rnd] = element;
			}
			return shuffled;
		}
	}
}