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 );
		}

	}
}

I made some slight modifications to the classes. First, I created a new class that will represent our Main Document class named Main.as and took out the array of images in the ImageGallery.as file so that the Main.as file could pass in a new array to have a gallery populated. Here are the two classes:

package
{
	import flash.display.Sprite;
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.events.KeyboardEvent;

	public class Main extends Sprite
	{
		private var GalleryImagesArr:Array;
		private var CatGallery:ImageGallery;
		private var theater:Sprite;

		public function Main()
		{
			theater = new Sprite();
			addChild ( theater );

			// set the stage
			categoryOne();

			// set the listener
			stage.addEventListener ( KeyboardEvent.KEY_DOWN, changeCategory );
		}

		private function categoryOne():void
		{
			GalleryImagesArr = new Array();
			GalleryImagesArr[0] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon0.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge0.jpg");
			GalleryImagesArr[1] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon1.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge1.jpg");
			GalleryImagesArr[2] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon2.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge2.jpg");
			GalleryImagesArr[3] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon3.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge3.jpg");
			GalleryImagesArr[4] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon4.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge4.jpg");
			GalleryImagesArr[5] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon5.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge5.jpg");
			GalleryImagesArr[6] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon6.jpg","http://manewc.com/projects/flash/i/imagegallery/avon6.jpg");
			GalleryImagesArr[7] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon7.jpg","http://manewc.com/projects/flash/i/imagegallery/avon7.jpg");
			GalleryImagesArr[8] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon8.jpg","http://manewc.com/projects/flash/i/imagegallery/avon8.jpg");
			GalleryImagesArr[9] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon9.jpg","http://manewc.com/projects/flash/i/imagegallery/avon9.jpg");

			CatGallery = new ImageGallery ( GalleryImagesArr );
			theater.addChild ( CatGallery );
		}

		private function categoryTwo():void
		{

			GalleryImagesArr = new Array();
			GalleryImagesArr[0] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0123.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0123.jpg");
			GalleryImagesArr[1] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0220.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0220.jpg");
			GalleryImagesArr[2] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0222.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0222.jpg");
			GalleryImagesArr[3] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0239.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0239.jpg");
			GalleryImagesArr[4] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0263.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0263.jpg");
			GalleryImagesArr[5] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0268.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0268.jpg");
			GalleryImagesArr[6] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0289.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0289.jpg");
			GalleryImagesArr[7] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0983.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0983.jpg");
			GalleryImagesArr[8] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0989.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0989.jpg");
			GalleryImagesArr[9] = new Array("http://manewc.com/projects/flash/i/imagegallery/hyannis/thmb0998.jpg","http://manewc.com/projects/flash/i/imagegallery/hyannis/0998.jpg");

			CatGallery = new ImageGallery ( GalleryImagesArr );
			theater.addChild ( CatGallery );
		}

		private function changeCategory ( k:KeyboardEvent ):void
		{
			if ( k.keyCode == 49 )
			{
				cleanChildren();
				categoryOne();
			}
			else if ( k.keyCode == 50 )
			{
				cleanChildren();
				categoryTwo();
			}
		}

		private var theaterArr:Array;
		private var childrenArr:Array;

		private function cleanChildren()
		{
			// get children
			theaterArr = traceChildren ( theater );

			// find children, if exist then delete
			for ( var t:uint = 0; t < theaterArr.length; t++ )
			{
				if ( theaterArr[t] == "[object ImageGallery]" )
				{
					theater.removeChild( theaterArr[t] );
					theaterArr[t] = null;
				}
			}
		}

		private 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 ( "" );
                }
            }

			return childrenArr;

        }
	}
}

and the 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;
		private var MainImage:LargeImage;
		private var MainImageMask:Shape;

		public function ImageGallery(iarr:Array)
		{
			// the array of the thumbnail images
			ThumbArray = new Array();

			for ( var g:uint = 0; g < iarr.length; g++ )
			{
				ThumbArray[g] = new Array ( iarr[g][0], iarr[g][1] );
			}

			addEventListener ( Event.ADDED_TO_STAGE, init );

			ButtonIndex = VisibleThumbnails;
		}

		private function init(e:Event):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;

			// 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][0], 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;

			if ( MainImage ) removeChild ( MainImage );

			MainImage = new LargeImage ( ThumbArray[CurrentIndex][1] );
			addChildAt ( MainImage, 0 );

			// Create the Main Image Mask
			MainImageMask = new Shape();
            MainImageMask.graphics.beginFill(0x000000);
            MainImageMask.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight-maskHeight-10);
            MainImageMask.graphics.endFill();
			addChild ( MainImageMask );

			MainImage.mask = MainImageMask;
		}

		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 );
			}
		}
	}
}

In addition to the Tweener class library, here are my classes:

The Main Document Class:

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;
		private var MainImage:LargeImage;
		private var MainImageMask:Shape;

		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] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon0.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge0.jpg");
			ThumbArray[1] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon1.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge1.jpg");
			ThumbArray[2] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon2.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge2.jpg");
			ThumbArray[3] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon3.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge3.jpg");
			ThumbArray[4] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon4.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge4.jpg");
			ThumbArray[5] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon5.jpg","http://manewc.com/projects/flash/i/imagegallery/avonlarge5.jpg");
			ThumbArray[6] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon6.jpg","http://manewc.com/projects/flash/i/imagegallery/avon6.jpg");
			ThumbArray[7] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon7.jpg","http://manewc.com/projects/flash/i/imagegallery/avon7.jpg");
			ThumbArray[8] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon8.jpg","http://manewc.com/projects/flash/i/imagegallery/avon8.jpg");
			ThumbArray[9] = new Array("http://manewc.com/projects/flash/i/imagegallery/avon9.jpg","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][0], 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;

			if ( MainImage ) removeChild ( MainImage );

			MainImage = new LargeImage ( ThumbArray[CurrentIndex][1] );
			addChildAt ( MainImage, 0 );

			// Create the Main Image Mask
			MainImageMask = new Shape();
            MainImageMask.graphics.beginFill(0x000000);
            MainImageMask.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight-maskHeight-10);
            MainImageMask.graphics.endFill();
			addChild ( MainImageMask );

			MainImage.mask = MainImageMask;
		}

		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 );
			}
		}
	}
}

The new LargeImage.as class file:

package {
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
    import flash.net.URLRequest;
    import flash.filters.BlurFilter;
    import flash.filters.BitmapFilterQuality;
	import flash.events.Event;
	import flash.events.ProgressEvent;
    import caurina.transitions.Tweener

	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	public class LargeImage extends Sprite {
		private var loStatus:TextField;
		private var loImageLoader:Loader = new Loader();
		private var lnDistance:Number = 10;
		//public var loTimer:Timer = new Timer(10); //default interval

		private var filter:BlurFilter;
		private var filtersArray:Array;

		public function LargeImage(imgURL:String){
			this.Blur(imgURL);
		}

		private function Blur(imgURL:String):void {
			CreateTextField(); // preloader text box
			try {
				this.loImageLoader.load(new URLRequest(imgURL));
			} catch (loError:Error) {
				this.loStatus.text = "Unable to load requested document.";
			}

			this.loImageLoader.contentLoaderInfo.addEventListener(Event.OPEN, this.openEvents);
			this.loImageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, this.progressEvents);
			this.loImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, this.loadCompleteEvents);
		}

		public function openEvents(loEvent:Event):void
		{
			this.loStatus.text = "Opening File";
		}

		public function progressEvents(loEvent:ProgressEvent):void
		{
			this.loStatus.text = "loading: " + loEvent.bytesLoaded + " bytes out of " + loEvent.bytesTotal;
		}

		public function loadCompleteEvents(loEvent:Event):void
		{
			this.loStatus.text = "";
			this.loImageLoader.y = 0;
			this.loImageLoader.x = (stage.stageWidth / 2) - (this.loImageLoader.width / 2);
			addChild(this.loImageLoader); //display image

			var filter:BlurFilter=new BlurFilter(10,10,BitmapFilterQuality.MEDIUM);
            var filters_array:Array=new Array();
            filters_array.push(filter); 

			loImageLoader.filters=filters_array;

			Tweener.addTween(this.loImageLoader,{_blur_blurX:0,_blur_blurY:0, time:.5});
		}

		private function CreateTextField():void
		{
			this.loStatus = new TextField();
			this.loStatus.autoSize = TextFieldAutoSize.LEFT;
			this.loStatus.background = false;
			this.loStatus.border = false;
			var format:TextFormat = new TextFormat();
			format.font = "Verdana";
			format.color = 0xffffff;
			format.size = 10;
			format.underline = false;
			this.loStatus.defaultTextFormat = format;
			addChild(this.loStatus);
		}
	}
}

The class to load images:

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;
        }
    }
}

and my Thumbnail.as class file

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();
			}
		}
	}
}

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 );
			}
		}
	}
}

package
{
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.filters.BitmapFilter;
    import flash.filters.BitmapFilterQuality;
    import flash.filters.GlowFilter;
	import flash.filters.BlurFilter;
	import flash.geom.Point;
	import flash.net.URLRequest;
	import flash.events.Event;

	public class BlurAnimation extends Sprite
	{
		private var sp:Sprite;
		private var bmd:BitmapData = new BitmapData(700, 700, true, 0x000000);
		private var blur:BlurFilter = new BlurFilter(2,10,3);
		private var imageHolder:Sprite;
		private var loader:Loader;

		public function BlurAnimation()
		{
			var isPlaying:Boolean = false;

			addEventListener(Event.ENTER_FRAME, loop);

			var bm:Bitmap = new Bitmap(bmd);
			addChild(bm);

			var sp:Sprite = new Sprite();
			addChild(sp);

			var loader:Loader = new Loader();
           //  configureListeners(loader.contentLoaderInfo);

            var request:URLRequest = new URLRequest( "http://manewc.com/projects/flash/i/wheel.png" );
            loader.load(request);

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

			sp.addChild ( imageHolder );

			sp.x = stage.stageWidth / 2 - 50;
			sp.y = stage.stageHeight / 2;
		}

		private function loop(e:Event):void
		{
			bmd.draw(this);
			bmd.applyFilter(bmd,bmd.rect,new Point(),blur);
			// first parameter is left/right, second parameter is up down
			bmd.scroll(10,-10);
		}
	}
}

package
{
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;

	public class BitmapDataNoise extends Sprite
	{
		var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);

		public function BitmapDataNoise()
		{
			var noiserate:int = int(Math.random() * int.MAX_VALUE);
			bmd.noise(noiserate, 0, 0xFF, BitmapDataChannel.RED, false);

			var bitmap:Bitmap = new Bitmap(bmd);
			addChild(bitmap);
		}
	}
}

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.net.URLRequest;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.IEventDispatcher;

	public class ManipulateContentLoader extends Sprite
	{
		private var loader:Loader;
		private var loaderHolder:Sprite;

		public function ManipulateContentLoader()
		{
			init();
		}

		private function init():void
		{
			// load in the image
			loader = new Loader();
			loader.load(new URLRequest("http://manewc.com/projects/flash/i/gahlord.jpg"));
			configureListeners(loader.contentLoaderInfo);
		}

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

		private function completeHandler(e:Event):void
		{
			// bind the loader to a sprite
			// 1. create the sprite
			loaderHolder = new Sprite();
			// 2. add the sprite
			addChild ( loaderHolder );
			// 3. bind image to the sprite
			loaderHolder.addChild ( loader );

			// 4. now manipulate
			loaderHolder.width = 200;
			loaderHolder.height = 200;
			loaderHolder.x = 300;
			loaderHolder.y = 200;
			// .. even add an event
			loaderHolder.addEventListener(MouseEvent.MOUSE_DOWN, MouseHandler);
		}

		private function MouseHandler(m:MouseEvent):void
		{
			trace (" == image clicked == ");
		}
	}
}

Here is the main document class:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import fl.controls.Button;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.filters.BitmapFilter;
    import flash.filters.BitmapFilterQuality;
    import flash.filters.GlowFilter;
	import flash.filters.BlurFilter;
	import flash.geom.Point;

	public class Main extends Sprite
	{
		private var ai:Image;

		private var bmd:BitmapData = new BitmapData(550, 400, true, 0xffffff); // this will cover the whole movie
		private var bm:Bitmap = new Bitmap(bmd);
		private var bf:BlurFilter = new BlurFilter(10, 10, 10);

		private var startBtn:Button;

		public function Main()
		{
			var ai:Image = new Image();
			addChild(ai);

			addChild(bm);

			// add the button
			var startBtn = new Button();
            startBtn.width = 100;
            startBtn.height = 30;
            startBtn.move ( stage.stageWidth - startBtn.width - 10, stage.stageHeight - startBtn.height - 10 );
            startBtn.label = "Start Animation";
            addChild(startBtn);

            startBtn.addEventListener(MouseEvent.CLICK, beginLoop);
		}

		private function beginLoop(e:MouseEvent):void
		{
			addEventListener(Event.ENTER_FRAME, loop);
		}

		private function loop(e:Event):void
		{
			bmd.draw(this);
			bmd.applyFilter(bmd,bmd.rect,new Point(0,0),bf);
			bmd.scroll(5,-5);
		}
	}
}

A simple class to load in my image:

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

    public class Image extends Sprite {
		private var imgLoader:Loader;

        public function Image() {
            loadImage();
        }

		private function loadImage():void {
			// Load in the image
			imgLoader = new Loader();
			imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
			imgLoader.load(new URLRequest("http://manewc.com/projects/flash/GlowFilterDemo/gahlordSmall.jpg"));
        }

		private function imageLoaded(e:Event):void
        {
			imgLoader.x = stage.stageWidth / 2 - (imgLoader.width / 2);
			imgLoader.y = stage.stageHeight / 2 - (imgLoader.height / 2);
            addChild(imgLoader);
        }
    }
}

Here is the document class:

package {
    import flash.display.Sprite;
    import flash.events.Event;
	import flash.display.Loader;
    import flash.display.LoaderInfo;
    import flash.net.URLRequest;
    import flash.filters.BitmapFilter;
    import flash.filters.BitmapFilterQuality;
    import flash.filters.GlowFilter;

    public class GlowFilterDemo extends Sprite {
        private var bgColor:uint = 0xfffccc;
        private var size:uint    = 80;
        private var offset:uint  = 50;
		private var imgLoader:Loader;

        public function GlowFilterDemo() {
            loadImage();
            var filter:BitmapFilter = getBitmapFilter();
            var myFilters:Array = new Array();
            myFilters.push(filter);
            filters = myFilters;
        }

        private function getBitmapFilter():BitmapFilter {
            var color:Number = 0x003366;
            var alpha:Number = 0.8;
            var blurX:Number = 35;
            var blurY:Number = 35;
            var strength:Number = 2;
            var inner:Boolean = false;
            var knockout:Boolean = false;
            var quality:Number = BitmapFilterQuality.HIGH;

            return new GlowFilter(color,
                                  alpha,
                                  blurX,
                                  blurY,
                                  strength,
                                  quality,
                                  inner,
                                  knockout);
        }

        private function loadImage():void {
			// Load in the image
			imgLoader = new Loader();
			imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
			imgLoader.load(new URLRequest("http://manewc.com/projects/flash/GlowFilterDemo/gahlordSmall.jpg"));
        }

		private function imageLoaded(e:Event):void
        {
			imgLoader.x = stage.stageWidth / 2 - (imgLoader.width / 2);
			imgLoader.y = stage.stageHeight / 2 - (imgLoader.height / 2);
            addChild(imgLoader);
        }
    }
}