http://manewc.com/2008/05/16/preloading-multiple-images-with-actionscript/

I had a request to demo how the code works, so as I looked through the code I realized that one of the arrays should have been displayed as public instead of private to make the code more reusable. Anyways, I appended some code here to hopefully clarify some issues anyone may have encountered.

Here is the updated movie:

Here are the files that I used for this demo:

Here is the updated code:

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.setInterval;
	import flash.utils.clearInterval;

	public class MultipleImagePreload extends Sprite
	{
		public var images:Array;
		public var chkLoaded:Boolean = false;

		private var imgArray:Array;

		// array of images.. onload event
		private var imgLoadArray:Array;

		// array of LoadImage class
		public var loadArray:Array;

		// variables for our timer events
		private var initLoadTimer:uint;
		private var preLoadTimer:uint;

		// variables for the preload process
		private var getTotalBits:Number; // the tally for the total bits
		private var imageTotalSize:Number;
		private var imagePreLoadSize:Number; // the tally for preloading

		public function MultipleImagePreload(images:Array)
		{
			imgArray = images;

			// Load in the images.
			loadArray = new Array();

			for ( var i:uint; i < images.length; i++ )
			{
				// load the image
				loadArray[i] = new LoadImage( imgArray[i] );

				// display the image to stage
				addChild ( loadArray[i] );

				// send them off the stage
				loadArray[i].x = -9999;
			}

			initLoadTimer = setInterval(onLoadImage, 500);
		}

		private function onLoadImage():void
		{
			var imgLoadArray = new Array();

			for ( var i:uint=0; i < imgArray.length; i++ )
			{
				getTotalBits = loadArray[i].getBits();

				if ( getTotalBits > 0 )
				{
					// check again.
					imgLoadArray[i] = loadArray[i];
				}
			}

			if ( imgLoadArray.length == imgArray.length )
			{

				clearInterval ( initLoadTimer );

				imageTotalSize = 0;

				// add up the size of all images
				for ( var u:uint=0; u < imgArray.length; u++ )
				{
					if ( loadArray[u].getBits() ) /* Safari is requiring this */
					{
						imageTotalSize += loadArray[u].getBits();

					}
				}

				Main(root).Message( "Total Size (bits): " + imageTotalSize + "\n" );

				// we now have recorded all file sizes.. now start the preloading
				preLoadTimer = setInterval(preLoadImage, 50);
			}
		}

		private var loadStat:Number;

		private function preLoadImage():void
		{
			imagePreLoadSize = 0;

			// add up the size of all images
			for ( var p:uint=0; p < imgArray.length; p++ )
			{
				imagePreLoadSize += loadArray[p].getBitsLoaded();
			}

			if ( ( imagePreLoadSize / imageTotalSize ) )
			{
				loadStat = Math.floor(100 * (imagePreLoadSize / imageTotalSize));

				if ( loadStat >= 100 )
				{
					// clear the timer
					clearInterval ( preLoadTimer );

					// set the boolean variable to true to notify all images are loaded
					chkLoaded = true;

					Main(root).Message ("100% Loaded\n");
				}
				else
				{
					Main(root).Message (Math.floor(100 * (imagePreLoadSize / imageTotalSize)) + "% Loaded\n");
				}
			}
		}
	}
}

LoadImage.as:

package {
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.*;
    import flash.net.URLRequest;

    public class LoadImage extends Sprite {

		private var url:String;
		private var imageHolder:Sprite;
		public var bits:Number;
		public var bitsLoaded:Number;
		public var totalBits:Number;

        public function LoadImage(url:String) {
			var loader:Loader = new Loader();
            configureListeners(loader.contentLoaderInfo);

            var request:URLRequest = new URLRequest( url );
            loader.load(request);

			imageHolder = new Sprite();
			addChild ( imageHolder );
            imageHolder.addChild(loader);
        }

        private function configureListeners(dispatcher:IEventDispatcher):void {
			dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
			dispatcher.addEventListener(Event.COMPLETE, completeHandler);
        }

        private function completeHandler(event:Event):void {
			Main(root).Message( "Image Load Event Complete\n" )
		}

		public function getBits()
		{
			return ( bits );
		}

		public function getBitsLoaded()
		{
			return ( bitsLoaded );
		}

        private function progressHandler(event:ProgressEvent):void {
			bitsLoaded = event.bytesLoaded;
			bits = event.bytesTotal;
        }

    }
}

.. and the main class, Main.as

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import fl.controls.TextArea;
	import fl.controls.ScrollPolicy;

	public class Main extends Sprite
	{
		// array of all images to be prelaoded before the movie begins:
		private var imgArray:Array;

		// the class to handle all the images
		private var imgPreload:MultipleImagePreload;

		//text area component
		private var output:TextArea;  

		public function Main()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			showOutput();

			init();
		}

		private function init():void
		{

			imgArray = new Array();
			imgArray[0] = "http://manewc.com/projects/flash/i/ski-ryan.jpg";
			imgArray[1] = "http://manewc.com/projects/flash/i/ski-ryan.jpg";

			imgPreload = new MultipleImagePreload(imgArray);
			addChild ( imgPreload );

			stage.addEventListener ( Event.ENTER_FRAME, checkPreload );

		}

		private function checkPreload(e:Event):void
		{
			if ( imgPreload.chkLoaded )
			{
				Message ( "\n====================\nALL IMAGES LOADED\n====================\n" );

				stage.removeEventListener ( Event.ENTER_FRAME, checkPreload );

				Message ( "\n\n" );
				Message ( "The way that this code works is that the images actually are
 positioned off the screen to allow you to position them in the viewable
stage when you need them" );
				Message ( "\n" );
				Message ( "You target each movie via the array:\n" );
				Message ( "\n" );
				Message ( "For Example:" );
				Message ( "\n" );
				Message	( "imgPreload.loadArray[0].x = 200;" );
				Message ( "imgPreload.loadArray[0].y = 0;" );
				Message ( "\n" );
				imgPreload.loadArray[0].x = 200;
				imgPreload.loadArray[0].y = 0;
				Message ( "Dimensions:" );
				Message ( "\n" );
				Message ( "------------------" );
				Message ( "\n" );
				Message ( "Width: " + imgPreload.loadArray[0].width );
				Message ( "\n" );
				Message ( "Height: " + imgPreload.loadArray[0].height );
			}
		}

		private function showOutput():void
        {
			output = new TextArea();
			output.verticalScrollPolicy = ScrollPolicy.ON;
			output.condenseWhite = true;
			output.setSize(200, stage.stageHeight);
			output.move(0, 0);
			addChild(output);
        }

		public function Message(msg:String):void
		{
			output.appendText ( msg );
		}

	}
}

First thing, is a class to preload any images, called this LoadImage.as

package {
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.events.IEventDispatcher;
    import flash.net.URLRequest;

    public class LoadImage extends Sprite {
        private var url:String;
		private var imageHolder:Sprite;
		public var LoadImageArray:Array = new Array();
		public var bits:Number;
		public var bitsLoaded:Number;
		public var totalBits:Number;
		private var loader:Loader;

		private var completeStatus:Boolean = false;

        public function LoadImage(url:String) {
			var loader:Loader = new Loader();
            configureListeners(loader.contentLoaderInfo);

            var request:URLRequest = new URLRequest( url );
            loader.load(request);

			imageHolder = new Sprite();
			addChild ( imageHolder );
			imageHolder.addChild(loader);
        }

        private function configureListeners(dispatcher:IEventDispatcher):void {
			dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
			addEventListener(Event.COMPLETE, completeHandler);

        }

        private function completeHandler(event:Event):void {
			removeEventListener(Event.COMPLETE, completeHandler);
			setComplete();
		}

		public function setComplete()
		{
			completeStatus = true;
			return ( completeStatus );
		}

		public function getBits()
		{
			return ( bits );
		}

		public function getBitsLoaded()
		{
			return ( bitsLoaded );
		}

		public function w()
		{
			return this.width;
		}

        private function progressHandler(event:ProgressEvent):void {
			bitsLoaded = event.bytesLoaded;
			bits = event.bytesTotal;
        }
    }
}

A class for my Thumbnail Images, called this Thumbnail.as

package
{
	import flash.display.Sprite;
	import flash.events.Event;

	public class Thumbnail extends Sprite
	{
		private var thumb:LoadImage;
		public var myWidth:Number;
		public var myId:Number;

		public function Thumbnail(img:String, id:Number)
		{
			// set this id
			myId = id;

			// load in the image
			thumb = new LoadImage( img );
			addChild ( thumb );

			// check the image load
			addEventListener ( Event.ENTER_FRAME, checkLoad );
		}

		private function checkLoad ( e:Event ):void
		{
			if ( thumb.setComplete() && thumb.w() > 0)
			{
				// remove the listener
				removeEventListener ( Event.ENTER_FRAME, checkLoad );

				// get the width
				myWidth = thumb.w();
			}
		}
	}
}

Lastly, the Main Document Class, ImageGallery.as

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import caurina.transitions.*;

	public class ImageGallery extends Sprite
	{
		private var ThumbArray:Array;
		private var tobj:Array; // thumb object array
		private var thumbMargin:Number = 5;
		private var ThumbNavigation:Sprite; // this is to hold all the thumbnails
		private var incrementArr:Array;
		private var VisibleThumbnails:Number = 4; // this will set the number of thumbnails that will be visible.
		private var MaskWidth:Number;
		private var myMask:Shape;
		private var maskHeight:Number = 100;
		private var nb:Sprite;
		private var bb:Sprite;
		private var nbs:Shape; // next button
		private var bbs:Shape; // back button
		private var CurrentIndex:Number = 0;
		private var ButtonIndex:Number;
		private var ButtonCounter:Number = 0;
		private var beginPoint:Number;
		private var endPoint:Number;
		private var destPoint:Number;
		private var ThumbNavigationOffset:Number;

		public function ImageGallery()
		{
			init();

			ButtonIndex = VisibleThumbnails;
		}

		private function init():void
		{
			// the holder movie to hold all the thumbnail images
			ThumbNavigation = new Sprite();
			addChild ( ThumbNavigation );
			// put it off the stage
			ThumbNavigation.y = stage.stageHeight + maskHeight;

			// the array of the thumbnail images
			ThumbArray = new Array();
			ThumbArray[0] = "http://manewc.com/projects/flash/i/imagegallery/avon0.jpg";
			ThumbArray[1] = "http://manewc.com/projects/flash/i/imagegallery/avon1.jpg";
			ThumbArray[2] = "http://manewc.com/projects/flash/i/imagegallery/avon2.jpg";
			ThumbArray[3] = "http://manewc.com/projects/flash/i/imagegallery/avon3.jpg";
			ThumbArray[4] = "http://manewc.com/projects/flash/i/imagegallery/avon4.jpg";
			ThumbArray[5] = "http://manewc.com/projects/flash/i/imagegallery/avon5.jpg";
			ThumbArray[6] = "http://manewc.com/projects/flash/i/imagegallery/avon6.jpg";
			ThumbArray[7] = "http://manewc.com/projects/flash/i/imagegallery/avon7.jpg";
			ThumbArray[8] = "http://manewc.com/projects/flash/i/imagegallery/avon8.jpg";
			ThumbArray[9] = "http://manewc.com/projects/flash/i/imagegallery/avon9.jpg";

			// create the thumbnails
			tobj = new Array;

			for ( var c:uint = 0; c < ThumbArray.length; c++ )
			{
				// create a thumbnail image
				tobj.push ( new Thumbnail( ThumbArray[c], c ) );
			}

			// set the event to make sure all images are loaded
			addEventListener ( Event.ENTER_FRAME, checkLoadedThumb );
		}

		private function checkLoadedThumb ( e:Event ):void
		{
			var loadCounter:Number = 0;

			for ( var d:uint = 0; d < ThumbArray.length; d++ )
			{
				if ( tobj[d].myWidth > 0 )
				{
					loadCounter++;
				}
			}

			if ( loadCounter == ThumbArray.length )
			{
				removeEventListener ( Event.ENTER_FRAME, checkLoadedThumb );

				// position the thumbnails
				positionThumbs();
			}
		}

		private function positionThumbs():void
		{
			var totalWidth:Number = 0;
			incrementArr = new Array();

			for ( var v:uint = 0; v < ThumbArray.length; v++ )
			{
				tobj[v].x = totalWidth;
				tobj[v].alpha = 0;

				// set the increments for each slide position when moving left to right
				incrementArr.push ( totalWidth );

				trace ( incrementArr[v] );
				// check for the width of the mask to go over thumbnail navigation
				if ( v == VisibleThumbnails )
				{
					MaskWidth = totalWidth;

					// create the mask
					CreateThumbnailMask();
				}

				totalWidth += thumbMargin + tobj[v].myWidth;
				// add the thumbnail to the stage
				ThumbNavigation.addChild ( tobj[v] );

				// thumbnail is alpha 0, let's fade it up to 80%
				Tweener.addTween(tobj[v], {alpha: .8, time:.8, transition:"easeOut"});

				// add the mouseevents
				tobj[v].addEventListener ( MouseEvent.MOUSE_OVER, ThumbOver );
				tobj[v].addEventListener ( MouseEvent.MOUSE_DOWN, ThumbDown );
				tobj[v].addEventListener ( MouseEvent.MOUSE_OUT, ThumbOut );
			}
		}

		private function CreateThumbnailMask():void
		{
			// Center the Menu
			ThumbNavigation.x = (stage.stageWidth / 2) - (MaskWidth / 2);
			ThumbNavigationOffset = ThumbNavigation.x;

			// Create the Mask
			myMask = new Shape();
            myMask.graphics.beginFill(0x000000);
            myMask.graphics.drawRect(ThumbNavigation.x, stage.stageHeight-maskHeight, MaskWidth, maskHeight);
            myMask.graphics.endFill();

			addChild ( myMask );

			// set the mask
			ThumbNavigation.mask = myMask;

			// show the Menu on Y axis
			Tweener.addTween(ThumbNavigation,{y:stage.stageHeight-maskHeight, time:.5, transition:"easeOut"});

			// create the next button
			NextButton();

			// create the back button
			BackButton();

			// setupUI;
			SetupUI();
		}

		private function ThumbOver (m:MouseEvent):void
		{
			Tweener.addTween(m.currentTarget, {alpha: 1, time:.8, transition:"easeOutBack"});
			Tweener.addTween(m.currentTarget, {y: -20, time:2, transition:"easeOut"});
		}

		private function ThumbDown (m:MouseEvent):void
		{
			// re initialize the index value
			CurrentIndex = m.currentTarget.myId;
		}

		private function ThumbOut (m:MouseEvent):void
		{
			Tweener.addTween(m.currentTarget, {alpha: .8, time:2, transition:"easeOutBack"});
			Tweener.addTween(m.currentTarget, {y: 0, time:2, transition:"easeOut"});
		}

		private function NextButton():void
		{
			nbs = new Shape();
            nbs.graphics.beginFill(0x000000);
            nbs.graphics.drawRect(stage.stageWidth - 20, stage.stageHeight-maskHeight, 20, maskHeight);
            nbs.graphics.endFill();

			nb = new Sprite();
			nb.name = "nextbutton";
			addChild ( nb );

			nb.addChild ( nbs );

			nb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
		}

		private function BackButton():void
		{
			bbs = new Shape();
            bbs.graphics.beginFill(0x000000);
            //myMask.graphics.lineStyle(1, 0x000000);
            bbs.graphics.drawRect(0, stage.stageHeight-maskHeight, 20, maskHeight);
            bbs.graphics.endFill();

			bb = new Sprite();
			addChild ( bb );
			bb.name = "backbutton";
			bb.addChild ( bbs );

			bb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
		}

		private function MoveThumbnails(m:MouseEvent):void
		{
			// check the current index and slide accordingly
			if ( m.currentTarget.name == "nextbutton" && ButtonIndex < ThumbArray.length )
			{
				nb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );

				ButtonIndex++;

				destPoint = ThumbNavigationOffset - incrementArr[++ButtonCounter];

				Tweener.addTween(ThumbNavigation,{x:destPoint, time:.6, transition:"easeOut", onComplete:EnableButtons("nextbutton")});
			}
			else if ( m.currentTarget.name == "backbutton" && ButtonIndex > 0 )
			{
				bb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );

				ButtonIndex--;

				destPoint = ThumbNavigationOffset - incrementArr[--ButtonCounter];
				Tweener.addTween(ThumbNavigation,{x:destPoint, time:.5, transition:"easeOut", onComplete:EnableButtons("backbutton")});
			}

			SetupUI();
		}

		private function EnableButtons(btnId:String):void
		{
			if ( btnId == "nextbutton" ) nb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			if ( btnId == "backbutton" ) bb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
		}

		private function SetupUI():void
		{
			// this function is to control the visibility of the next and back buttons
			trace ( "ButtonIndex: " + ButtonIndex + " " + VisibleThumbnails );
			if ( ButtonIndex > VisibleThumbnails )
			{
				Tweener.addTween(bb, {alpha: 1, time:2, transition:"easeOut"});
				// Tweener.addTween(nb, {alpha: 1, time:2, transition:"easeOut"});
				bb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			}
			else if ( ButtonIndex == VisibleThumbnails )
			{
				Tweener.addTween(bb, {alpha: 0, time:2, transition:"easeOut"});
				bb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			}

			if ( ButtonIndex == ThumbArray.length )
			{
				Tweener.addTween(nb, {alpha: 0, time:2, transition:"easeOut"});
				nb.removeEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			}
			else
			{
				Tweener.addTween(nb, {alpha: 1, time:2, transition:"easeOut"});
				nb.addEventListener( MouseEvent.MOUSE_DOWN, MoveThumbnails );
			}
		}
	}
}

So the number represents the key, and the fruit represents the images that will appear.

0 = blueberry
1 = pineapple orange banana
2 = coconut
3 = strawberry pomegranate
4 = blackraspberry
5 = lime lemon
6 = peach mango

Here are the classes, Document Class Main.as is first – please note that this is a rough draft of this animation, the preloading of images do not work that well and I will eventually need to add some setter and getter methods to the TimeMachine class – the final version to be posted some time in the future.. Also note that this demo actually loads the images in twice, my thought was that during the initial load it would essentially cache the images, but this is not working properly – if you refresh this page you will see what I mean:

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.geom.Point;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import fl.controls.TextArea;
	import fl.controls.ScrollPolicy;
	import flash.display.DisplayObject;
    import flash.display.DisplayObjectContainer;
	import flash.events.TimerEvent;
    import flash.utils.setInterval;
    import flash.utils.clearInterval;

	import caurina.transitions.*;

	public class Main extends Sprite
	{
		// array of all images to be prelaoded before the movie begins:
		private var imgArray:Array;

		// the class to handle all the images
		private var imgPreload:MultipleImagePreload;

		//text area component
		private var output:TextArea;

		// Time Machine
		private var TimeMachine:TimeMachineAnimation;

		public function Main()
		{
			// set the stage
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			// for debugging
			showOutput();

			// preload all the images
			preloadImages();

		}

		/*
		PRELOAD ALL THE IMAGES

		*/
		private function preloadImages():void
		{

			imgArray = new Array();
			imgArray[0] = "http://manewc.com/projects/flash/i/infused-blueberry.jpg";
			imgArray[1] = "http://manewc.com/projects/flash/i/infused-pineappleorangebanana.jpg";
			imgArray[2] = "http://manewc.com/projects/flash/i/infused-coconut.jpg";
			imgArray[3] = "http://manewc.com/projects/flash/i/infused-strawberrypomegranate.jpg";
			imgArray[4] = "http://manewc.com/projects/flash/i/infused-blackraspberry.jpg";
			imgArray[5] = "http://manewc.com/projects/flash/i/infused-limelemon.jpg";
			imgArray[6] = "http://manewc.com/projects/flash/i/infused-peachmango.jpg";

			imgPreload = new MultipleImagePreload(imgArray);
			addChild ( imgPreload );

			// trace ( imgPreload.loadArray );

			stage.addEventListener ( Event.ENTER_FRAME, checkPreload );
		}

		private function checkPreload(e:Event):void
		{
			if ( imgPreload.chkLoaded )
			{
				Message ( "\n====================\nALL IMAGES LOADED\n====================\n" );

				stage.removeEventListener ( Event.ENTER_FRAME, checkPreload );

				Message ( "\n1. Start Animation\n" );
				BeginTimeMachine();
			}
		}

		/*
		BeginTimeMachine

		*/
		private function BeginTimeMachine():void
		{
			TimeMachine = new TimeMachineAnimation ( imgArray );
			addChild ( TimeMachine );

			TimeMachine.x = stage.stageWidth / 2;
			TimeMachine.y = stage.stageHeight / 2;

			// add the event
			stage.addEventListener (KeyboardEvent.KEY_DOWN, animTimeMachine);
		}

		private function animTimeMachine ( k:KeyboardEvent ):void
		{
			if ( TimeMachine.animationComplete )
			{
				switch ( k.keyCode )
				{
					case 48:
						TimeMachine.setIndex ( 0 );
						break;

					case 49:
						TimeMachine.setIndex ( 1 );
						break;

					case 50:
						TimeMachine.setIndex ( 2 );
						break;

					case 51:
						TimeMachine.setIndex ( 3 );
						break;

					case 52:
						TimeMachine.setIndex ( 4 );
						break;

					case 53:
						TimeMachine.setIndex ( 5 );
						break;

					case 54:
						TimeMachine.setIndex ( 6 );
						break;

					default:
						break;
				}
			}
		}

		/*
		FOR DEBUGGING

		*/
		private function showOutput():void
        {
			output = new TextArea();
			output.verticalScrollPolicy = ScrollPolicy.ON;
			output.condenseWhite = true;
			output.setSize(stage.stageWidth, 300);
			output.move(0, 680);
			addChild(output);
        }

		public function Message(msg:String):void
		{
			output.appendText ( msg );
		}

		private var childrenArr:Array;

		public function traceChildren(d:Sprite)
        {
			childrenArr = new Array();

            for ( var k:uint; k < d.numChildren; k++ )
            {
                var o:DisplayObject = d.getChildAt(k);  

                if ( o is DisplayObjectContainer )
                {
                    childrenArr.push ( o );
                }
                else
                {
					// childrenArr.push ( "" );
                    // trace ( o );
                }
            }

			return childrenArr;

        }  

	}
}

package
{
	import flash.display.Sprite;
	import flash.utils.Timer;
    import flash.events.TimerEvent;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
	// tweener
	import caurina.transitions.*;

	public class TimeMachineAnimation extends Sprite
	{
		private var tArr:Array;
		private var imgArr:Array;
		private var ct:Number =			0;
		public var currentIndex = 		0;

		public function TimeMachineAnimation (a:Array)
		{
			// Re Assign
			tArr = a;

			// Create an Object for each item of the Array
			imgArr = new Array();
			tArr.forEach ( BuildObject );

			// Send off each item of the array to offscreen bottom
			imgArr.forEach( Position );  

			// begin the timer
			setTimer();
		}

		private function BuildObject(element:*, index:int, arr:Array):void
		{
			imgArr[index] = new LoadImage ( tArr[index] );
		}

		private function Position(element:*, index:int, arr:Array):void
		{
			imgArr[index].y = 1400;

			imgArr[index].scaleX = ( 1 / (imgArr.length-1) ) * index;
			imgArr[index].scaleY = ( 1 / (imgArr.length-1) ) * index;

			addChild ( imgArr[index] );
		}

		private function setTimer():void
		{
			ct = 0;

			var myTimer:Timer = new Timer(100, imgArr.length);
            myTimer.addEventListener("timer", timerHandler);
            myTimer.start();
		}

		private function timerHandler(e:TimerEvent):void
		{

			Tweener.addTween(imgArr[ct], {y: 0, time:.7, transition:"easeOutBack"});

			ct++;

			currentIndex = ct;

			if ( ct == imgArr.length )
			{
				setIndex ( imgArr.length );
			}
		}

		private var motionDirection:Number;
		private var motionCount:Number;
		private var mct:Number = 0;
		private var stopZ:Number;

		private var animCounter:Number = 0;
		public var animationComplete:Boolean;

		public function setIndex(i:Number):void
		{
			// update the animation counter
			animCounter = 0;

			// toggle for the animation status
			animationComplete = true;

			// need to know the current index
			motionDirection = currentIndex - i;

			stopZ = i;

			if ( motionDirection > 0 )
			{
				motionCount =  motionDirection;

				mct = imgArr.length;

				var closeTimer:Timer = new Timer(600, motionCount);
           		closeTimer.addEventListener("timer", moveTowards);
            	closeTimer.start();
			}
			else if ( motionDirection < 0 )
			{
				motionCount =  Math.abs(motionDirection);

				mct = imgArr.length;

				var awayTimer:Timer = new Timer(600, motionCount);
           		awayTimer.addEventListener("timer", moveAway);
            	awayTimer.start();
			}
		}

		private function moveTowards ( t:TimerEvent ):void
		{
			Tweener.addTween(imgArr[currentIndex], {scaleX: 1.5, time:.5, transition:"easeOutBack"});
			Tweener.addTween(imgArr[currentIndex], {scaleY: 1.5, time:.5, transition:"easeOutBack"});
			Tweener.addTween(imgArr[currentIndex], {alpha: 0, time:1.6, transition:"easeOutBack"});

			for ( var u:Number = currentIndex; u > 0; u-- )
			{
				Tweener.addTween(imgArr[currentIndex-u], {scaleX: 1, time:3, transition:"easeOut"});
				Tweener.addTween(imgArr[currentIndex-u], {scaleY: 1, time:3, transition:"easeOut"});
			}

			currentIndex--;

			animCounter++;

			if ( animCounter == motionCount ? animationComplete = true : animationComplete = false );

		}

		private function moveAway ( t:TimerEvent ):void
		{
			currentIndex++;

			imgArr[currentIndex].scaleX = 1.5;
			imgArr[currentIndex].scaleY = 1.5;
			imgArr[currentIndex].alpha = 0;

			Tweener.addTween(imgArr[currentIndex], {scaleX: 1, time:.8, transition:"easeOut"});
			Tweener.addTween(imgArr[currentIndex], {scaleY: 1, time:.8, transition:"easeOut"});
			Tweener.addTween(imgArr[currentIndex], {alpha: 1, time:1.5, transition:"easeOut"});

			animCounter++;

			if ( animCounter == motionCount ? animationComplete = true : animationComplete = false );

		}

	}

}

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.setInterval;
	import flash.utils.clearInterval;

	public class MultipleImagePreload extends Sprite
	{
		public var images:Array;
		public var chkLoaded:Boolean = false;

		private var imgArray:Array;

		// array of images.. onload event
		private var imgLoadArray:Array;

		// array of LoadImage class
		private var loadArray:Array;

		// variables for our timer events
		private var initLoadTimer:uint;
		private var preLoadTimer:uint;

		// variables for the preload process
		private var getTotalBits:Number; // the tally for the total bits
		private var imageTotalSize:Number;
		private var imagePreLoadSize:Number; // the tally for preloading

		private var preloader:Preloader;

		public function MultipleImagePreload(images:Array)
		{
			imgArray = images;

			// Load in the images.
			loadArray = new Array();

			for ( var i:uint; i < images.length; i++ )
			{
				// load the image
				loadArray[i] = new LoadImage( imgArray[i] );

				// display the image to stage
				addChild ( loadArray[i] );

				// send them off the stage
				loadArray[i].x = -9999;
			}

			// add the preloader
			preloader = new Preloader();
			addChild ( preloader );

			initLoadTimer = setInterval(onLoadImage, 500);
		}

		private function onLoadImage():void
		{
			var imgLoadArray = new Array();

			for ( var i:uint=0; i < imgArray.length; i++ )
			{
				getTotalBits = loadArray[i].getBits();

				if ( getTotalBits > 0 && loadArray[i].setComplete())
				{
					// check again.
					imgLoadArray[i] = loadArray[i];
				}
			}

			if ( imgLoadArray.length == imgArray.length )
			{
				clearInterval ( initLoadTimer );

				imageTotalSize = 0;

				// add up the size of all images
				for ( var u:uint=0; u < imgArray.length; u++ )
				{
					if ( loadArray[u].getBits() ) /* Safari is requiring this */
					{
						imageTotalSize += loadArray[u].getBits();

					}
				}

				Main(root).Message( "Total Size (bits): " + imageTotalSize + "\n" );

				// we now have recorded all file sizes.. now start the preloading
				preLoadTimer = setInterval(preLoadImage, 50);
			}
		}

		private var loadStat:Number;

		private function preLoadImage():void
		{
			imagePreLoadSize = 0;

			// add up the size of all images
			for ( var p:uint=0; p < imgArray.length; p++ )
			{
				imagePreLoadSize += loadArray[p].getBitsLoaded();
			}

			if ( ( imagePreLoadSize / imageTotalSize ) )
			{
				loadStat = Math.floor(100 * (imagePreLoadSize / imageTotalSize));

				if ( loadStat >= 100 )
				{
					// clear the timer
					clearInterval ( preLoadTimer );

					// set the boolean variable to true to notify all images are loaded
					chkLoaded = true;

					Main(root).Message ("100% Loaded\n");

					removeChild ( preloader );
					preloader = null;
				}
				else
				{
					Main(root).Message (Math.floor(100 * (imagePreLoadSize / imageTotalSize)) + "% Loaded\n");

					// update the preloader
					preloader.loadStatus ( Math.floor(100 * (imagePreLoadSize / imageTotalSize)) );
				}
			}
		}
	}
}

package {
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.events.IEventDispatcher;
    import flash.net.URLRequest;

    public class LoadImage extends Sprite {
        private var url:String;
		private var imageHolder:Sprite;
		private var imageHolderHolder:Sprite;
		public var LoadImageArray:Array = new Array();
		public var bits:Number;
		public var bitsLoaded:Number;
		public var totalBits:Number;
		private var loader:Loader;

		public var _myWidth:Number = 10;
		public var mywidth:Number;

		private var completeStatus:Boolean = false;

        public function LoadImage(url:String) {
			var loader:Loader = new Loader();
            configureListeners(loader.contentLoaderInfo);

            var request:URLRequest = new URLRequest( url );
            loader.load(request);

			imageHolder = new Sprite();
			addChild ( loader );

			loader.y = -222;
			loader.x = -350;

			mywidth = 1;
        }

        private function configureListeners(dispatcher:IEventDispatcher):void {
			dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
			addEventListener(Event.COMPLETE, completeHandler);

        }

        private function completeHandler(event:Event):void {
			removeEventListener(Event.COMPLETE, completeHandler);

			setComplete();
		}

		public function setComplete()
		{
			completeStatus = true;

			return ( completeStatus );
		}

		public function getBits()
		{
			return ( bits );
		}

		public function getBitsLoaded()
		{
			return ( bitsLoaded );
		}

		public function getWidth()
		{
			return ( imageHolder.width );
		}

		public function w()
		{
			return imageHolder.width;
		}

        private function progressHandler(event:ProgressEvent):void {
			bitsLoaded = event.bytesLoaded;
			bits = event.bytesTotal;
        }
    }
}

package
{
    import flash.display.Sprite;
    import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.events.Event;

    public class Preloader extends Sprite
    {
		public var tfloaded:TextField;

		public var loaded:Number;

        public function Preloader()
		{
			addEventListener ( Event.ADDED_TO_STAGE , init );
        }

		private function init(e:Event)
		{
			// Small Black Text Formatting
			var tf:TextFormat = new TextFormat();
			tf.font = "Paralucent-Light";
			tf.color = 0x4d86c6;
            tf.size = 30;
            tf.underline = false;
			tf.align = "center";

        	tfloaded = new TextField();
			tfloaded.defaultTextFormat = tf;
        	addChild(tfloaded);
        	tfloaded.width = 100;
            tfloaded.height = 100;
			tfloaded.x = 100;
        	tfloaded.y = 100;
            tfloaded.multiline = true;
            tfloaded.wordWrap = true;
			tfloaded.background = false;
			tfloaded.text = "";

			tfloaded.x = (stage.stageWidth / 2) - (tfloaded.width / 2);
		}

		public function loadStatus ( loaded:Number ):void
		{
			tfloaded.text = loaded + "%";
		}
    }
}

One of my new projects involves a lot of imagery so I decided to write a class that I could send it an array of images and preload them with a loading bar. The code below doesn’t have a loading bar, but if you trace out the code you can see how you can integrate a loading animation to the code. Here is what I have that works for what I need, although I would like to go through it to see if I can make it more efficient.

Here is the Main Document Class:

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import fl.controls.TextArea;
	import fl.controls.ScrollPolicy;

	public class Main extends Sprite
	{
		// array of all images to be prelaoded before the movie begins:
		private var imgArray:Array;

		// the class to handle all the images
		private var imgPreload:MultipleImagePreload;

		//text area component
		private var output:TextArea;  

		public function Main()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			showOutput();

			init();
		}

		private function init():void
		{

			imgArray = new Array();
			imgArray[0] = "http://manewc.com/projects/flash/i/infused-blackraspberry.png";
			imgArray[1] = "http://manewc.com/projects/flash/i/infused-blueberry.png";
			imgArray[2] = "http://manewc.com/projects/flash/i/infused-coconut.png";
			imgArray[3] = "http://manewc.com/projects/flash/i/infused-lemonlime.png";
			imgArray[4] = "http://manewc.com/projects/flash/i/infused-peach.png";
			imgArray[5] = "http://manewc.com/projects/flash/i/infused-pineappleorange.png";
			imgArray[6] = "http://manewc.com/projects/flash/i/infused-strawberry.png";

			imgPreload = new MultipleImagePreload(imgArray);
			addChild ( imgPreload );

			stage.addEventListener ( Event.ENTER_FRAME, checkPreload );

		}

		private function checkPreload(e:Event):void
		{
			if ( imgPreload.chkLoaded )
			{
				Message ( "\n====================\nALL IMAGES LOADED\n====================\n" );

				stage.removeEventListener ( Event.ENTER_FRAME, checkPreload );
			}
		}

		private function showOutput():void
        {
			output = new TextArea();
			output.verticalScrollPolicy = ScrollPolicy.ON;
			output.condenseWhite = true;
			output.setSize(stage.stageWidth, stage.stageHeight);
			output.move(0, 0);
			addChild(output);
        }

		public function Message(msg:String):void
		{
			output.appendText ( msg );
		}

	}
}

The class that is the Preloader

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.setInterval;
	import flash.utils.clearInterval;

	public class MultipleImagePreload extends Sprite
	{
		public var images:Array;
		public var chkLoaded:Boolean = false;

		private var imgArray:Array;

		// array of images.. onload event
		private var imgLoadArray:Array;

		// array of LoadImage class
		private var loadArray:Array;

		// variables for our timer events
		private var initLoadTimer:uint;
		private var preLoadTimer:uint;

		// variables for the preload process
		private var getTotalBits:Number; // the tally for the total bits
		private var imageTotalSize:Number;
		private var imagePreLoadSize:Number; // the tally for preloading

		public function MultipleImagePreload(images:Array)
		{
			imgArray = images;

			// Load in the images.
			loadArray = new Array();

			for ( var i:uint; i < images.length; i++ )
			{
				// load the image
				loadArray[i] = new LoadImage( imgArray[i] );

				// display the image to stage
				addChild ( loadArray[i] );

				// send them off the stage
				loadArray[i].x = -9999;
			}

			initLoadTimer = setInterval(onLoadImage, 500);
		}

		private function onLoadImage():void
		{
			var imgLoadArray = new Array();

			for ( var i:uint=0; i < imgArray.length; i++ )
			{
				getTotalBits = loadArray[i].getBits();

				if ( getTotalBits > 0 )
				{
					// check again.
					imgLoadArray[i] = loadArray[i];
				}
			}

			if ( imgLoadArray.length == imgArray.length )
			{

				clearInterval ( initLoadTimer );

				imageTotalSize = 0;

				// add up the size of all images
				for ( var u:uint=0; u < imgArray.length; u++ )
				{
					if ( loadArray[u].getBits() ) /* Safari is requiring this */
					{
						imageTotalSize += loadArray[u].getBits();

					}
				}

				Main(root).Message( "Total Size (bits): " + imageTotalSize + "\n" );

				// we now have recorded all file sizes.. now start the preloading
				preLoadTimer = setInterval(preLoadImage, 50);
			}
		}

		private var loadStat:Number;

		private function preLoadImage():void
		{
			imagePreLoadSize = 0;

			// add up the size of all images
			for ( var p:uint=0; p < imgArray.length; p++ )
			{
				imagePreLoadSize += loadArray[p].getBitsLoaded();
			}

			if ( ( imagePreLoadSize / imageTotalSize ) )
			{
				loadStat = Math.floor(100 * (imagePreLoadSize / imageTotalSize));

				if ( loadStat >= 100 )
				{
					// clear the timer
					clearInterval ( preLoadTimer );

					// set the boolean variable to true to notify all images are loaded
					chkLoaded = true;

					Main(root).Message ("100% Loaded\n");
				}
				else
				{
					Main(root).Message (Math.floor(100 * (imagePreLoadSize / imageTotalSize)) + "% Loaded\n");
				}
			}
		}
	}
}

The class that will load in the image

package {
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.*;
    import flash.net.URLRequest;

    public class LoadImage extends Sprite {

		private var url:String;
		private var imageHolder:Sprite;
		public var bits:Number;
		public var bitsLoaded:Number;
		public var totalBits:Number;

        public function LoadImage(url:String) {
			var loader:Loader = new Loader();
            configureListeners(loader.contentLoaderInfo);

            var request:URLRequest = new URLRequest( url );
            loader.load(request);

			imageHolder = new Sprite();
			addChild ( imageHolder );
            imageHolder.addChild(loader);
        }

        private function configureListeners(dispatcher:IEventDispatcher):void {
			dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
			dispatcher.addEventListener(Event.COMPLETE, completeHandler);
        }

        private function completeHandler(event:Event):void {
			Main(root).Message( "Image Load Event Complete\n" )
		}

		public function getBits()
		{
			return ( bits );
		}

		public function getBitsLoaded()
		{
			return ( bitsLoaded );
		}

        private function progressHandler(event:ProgressEvent):void {
			bitsLoaded = event.bytesLoaded;
			bits = event.bytesTotal;
        }

    }
}

package
{
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.net.URLRequest;
	import flash.events.Event;
	import flash.events.ProgressEvent;

	public class Preloader extends Sprite {

		private var ldr:Loader = new Loader();

		public function Preloader()
		{
			ldr.load(new URLRequest("/path/to/my/image.jpg"));

	 		ldr.contentLoaderInfo.addEventListener(Event.OPEN,open);
			ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progress);
			ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,result);
		}

		function open(evt:Event):void
		{
			trace ("opening file");
		}

		function progress(evt:ProgressEvent):void
		{
			trace ("loaded: " + evt.bytesLoaded);
		}

		function result(evt:Event):void
		{
			trace ("fully loaded");
			addChild(ldr);
		}
	 }
}

The Loader class is used to load SWF, JPG, PNG, or GIF files and uses the load method to initiate loading.

I have been searching around for some AS 3 preloader code and have come up with this.. but for some reason I just can’t get it to work.. any ideas?

Update:
http://manewc.com/2008/01/08/as-3-update-preloader-flashdisplayloader-and-flashdisplayloaderinfo/

package
{
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.net.URLRequest;
	import flash.events.Event;
	import flash.events.ProgressEvent;

	public class Loader extends Sprite {

		private var ldr:Loader = new Loader();

	 	var req:URLRequest = new URLRequest("logo.gif");

	 	ldr.load(req);

	 	ldr.contentLoaderInfo.addEventListener(Event.OPEN,open);
		ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progress);
		ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,result);

		function open(evt:Event):void
		{
			trace ("opening file");
		}

		function progress(evt:ProgressEvent):void
		{
			trace ("loaded: " + evt.bytesLoaded);
		}

		function result(evt:Event):void
		{
			addChild(ldr);
		}
	 }
}