I will be the first to admit that these files need to be cleaned up and properly coded.. but this will be a good base for a clean future project.

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

			// THIS IS WHERE WE WILL SET THE DEFAULT LARGE IMAGE
			DisplayLargeImage ( CurrentIndex ); // display the large image
		}

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

			// show the active state of the thumbnail:
			tobj[CurrentIndex].activeState(); // set the look of the active thumbnail
		}

		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
		{
			if ( !m.currentTarget.getState() )
			{
				Tweener.addTween(m.currentTarget, {alpha: 1, time:.8, transition:"easeOutBack"});
				Tweener.addTween(m.currentTarget, {y: -20, time:2, transition:"easeOut"});
			}
		}

		private function DisplayLargeImage (n:int):void
		{
			if ( MainImage ) removeChild ( MainImage );

			MainImage = new LargeImage ( ThumbArray[n][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 ThumbDown (m:MouseEvent):void
		{
			if ( !m.currentTarget.getState() )
			{
				// display the default State of the previous selected thumbnail
				tobj[CurrentIndex].defaultState();

				// re initialize the index value
				CurrentIndex = m.currentTarget.myId;

				// display the active state
				m.currentTarget.activeState();

				DisplayLargeImage ( CurrentIndex );
			}
		}

		private function ThumbOut (m:MouseEvent):void
		{
			if ( !m.currentTarget.getState() ) 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 );
			}
		}
	}
}

and the Thumbnail.as file

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

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

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

		public function defaultState()
		{
			active = false;
			Tweener.addTween(this, {alpha: 1, time:1, transition:"easeOut"});
		}

		public function activeState()
		{
			active = true;
			Tweener.addTween(this, {alpha: .1, time:3, transition:"easeOut"});
		}

		public function getState()
		{
			return active;
		}
	}
}

this.stage.align = "topLeft";
this.stage.scaleMode = "noScale";

That should do it.

Fullscreen Class – FullScreenButton.as – nothing sexy here, but it does the trick.

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.display.StageDisplayState;
	import flash.events.Event;
	import flash.events.FullScreenEvent;
	import flash.events.MouseEvent;

	public class FullScreenButton extends Sprite
	{
		private var myFullScreenButton:Shape;
		private var myButtonHolder:Sprite;

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

		private function init ( e:Event ):void
		{
			removeEventListener ( Event.ADDED_TO_STAGE, init );

			// create the button.. just a non glamorous red box
            myFullScreenButton = new Shape();
            myFullScreenButton.graphics.beginFill(0xcccccc);
            myFullScreenButton.graphics.drawRect(100, 100, 100, 20);
            myFullScreenButton.graphics.endFill();  

			myButtonHolder = new Sprite();
			addChild ( myButtonHolder );
			myButtonHolder.addChild( myFullScreenButton );

			myButtonHolder.addEventListener( MouseEvent.MOUSE_DOWN, toggleScreen );

		}

		private function toggleScreen(m:MouseEvent):void
		{
			// Enable and disable the context menu items based on what mode we are in.
			if (stage.displayState == StageDisplayState.NORMAL)
			{
				// Go Full Screen Option Selected
				stage.displayState = StageDisplayState.FULL_SCREEN;
			}
			else
			{
				// Exit Full Screen Option Selected
				stage.displayState = StageDisplayState.NORMAL;
			}
		}
	}
}

and the modifications to the Main Document Class – Main.as

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

	public class Main extends Sprite
	{
		private var GalleryImagesArr:Array;
		private var CatGallery:ImageGallery;
		private var theater:Sprite;
		private var myXMLFile:LoadXML;
		private var ct:Number = 0;
		private var c:Number = 0;
		private var imgCategory:XMLList;
        private var imgThumbnail:XMLList;
        private var imgLarge:XMLList;
		private var xmlImages:Array;
		private var categoryArr:Array;
		private var myHook:Array;
		private var fsb:FullScreenButton;

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

			LoadXMLFile();
		}

		private function LoadXMLFile():void
		{
			myXMLFile = new LoadXML ( "http://manewc.com/projects/flash/xml/images.xml" );
			addChild ( myXMLFile );

			// setup the listener for detecting when xml file is loaded
			myXMLFile.addEventListener ( Event.ENTER_FRAME, LoadXMLCheck );
		}

		private function LoadXMLCheck( e:Event ):void
		{
			if ( e.currentTarget.LoadComplete() )
			{
				// XML FILE LOADED - clean up
				e.currentTarget.removeEventListener ( Event.ENTER_FRAME, LoadXMLCheck );

				// let's parse the xml
				ParseXML ( e.currentTarget.GetXML() );
			}
		}

		private function ParseXML ( xml:XML ):void
		{
			// Gather the attribute data
			var imgCategory:XMLList =  myXMLFile.xml.page.@id;
            var imgThumbnail:XMLList = myXMLFile.xml.page.image.@thumbnail;
            var imgLarge:XMLList =  myXMLFile.xml.page.image.@large;  

  			xmlImages = new Array();
			categoryArr = new Array();

            for each (var thePage:XML in imgCategory)
            {
				categoryArr.push ( imgCategory[ct] );

				for each ( var theImage:XML in xml.page[ct].image )
				{
					xmlImages[c] = new Array ( imgThumbnail[c],imgLarge[c],imgCategory[ct] );

					c++;
				}

                ct++;
            }

			initStage()
		}

		private function ParseArray ( hook:String )
		{
			if ( GalleryImagesArr ) GalleryImagesArr.splice();

			GalleryImagesArr = new Array();

			for ( var d:uint = 0; d < xmlImages.length; d++ )
			{
				if ( xmlImages[d][2] == hook )
				{
					GalleryImagesArr.push ( new Array(xmlImages[d][0],xmlImages[d][1]) );
				}
			}

			return GalleryImagesArr;
		}

		private function initStage():void
		{
			// set the gallery
			categoryTwo();

			// add the Full Screen Button
			fsb = new FullScreenButton();
			fsb.x = stage.stageWidth - 210;
			fsb.y = stage.stageHeight - 230;
			addChild ( fsb );

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

		private function categoryOne():void
		{
			myHook = ParseArray("Category1");

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

		private function categoryTwo():void
		{
			myHook = ParseArray("Category2");

			CatGallery = new ImageGallery ( myHook );
			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;

        }
	}
}

So, because I can never parse xml files within my blog properly, here is a link:

http://manewc.com/projects/flash/xml/images.xml

I just updated the Main Document class file to load in my xml file:

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

	public class Main extends Sprite
	{
		private var GalleryImagesArr:Array;
		private var CatGallery:ImageGallery;
		private var theater:Sprite;
		private var myXMLFile:LoadXML;
		private var ct:Number = 0;
		private var c:Number = 0;
		private var imgCategory:XMLList;
        private var imgThumbnail:XMLList;
        private var imgLarge:XMLList;
		private var xmlImages:Array;
		private var categoryArr:Array;
		private var myHook:Array;

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

			LoadXMLFile();
		}

		private function LoadXMLFile():void
		{
			myXMLFile = new LoadXML ( "http://manewc.com/projects/flash/xml/images.xml" );
			addChild ( myXMLFile );

			// setup the listener for detecting when xml file is loaded
			myXMLFile.addEventListener ( Event.ENTER_FRAME, LoadXMLCheck );
		}

		private function LoadXMLCheck( e:Event ):void
		{
			if ( e.currentTarget.LoadComplete() )
			{
				// XML FILE LOADED - clean up
				e.currentTarget.removeEventListener ( Event.ENTER_FRAME, LoadXMLCheck );

				// let's parse the xml
				ParseXML ( e.currentTarget.GetXML() );
			}
		}

		private function ParseXML ( xml:XML ):void
		{
			// Gather the attribute data
			var imgCategory:XMLList =  myXMLFile.xml.page.@id;
            var imgThumbnail:XMLList = myXMLFile.xml.page.image.@thumbnail;
            var imgLarge:XMLList =  myXMLFile.xml.page.image.@large;  

  			xmlImages = new Array();
			categoryArr = new Array();

            for each (var thePage:XML in imgCategory)
            {
				categoryArr.push ( imgCategory[ct] );

				for each ( var theImage:XML in xml.page[ct].image )
				{
					xmlImages[c] = new Array ( imgThumbnail[c],imgLarge[c],imgCategory[ct] );

					c++;
				}

                ct++;
            }

			initStage()
		}

		private function ParseArray ( hook:String )
		{
			if ( GalleryImagesArr ) GalleryImagesArr.splice();

			GalleryImagesArr = new Array();

			for ( var d:uint = 0; d < xmlImages.length; d++ )
			{
				if ( xmlImages[d][2] == hook )
				{
					GalleryImagesArr.push ( new Array(xmlImages[d][0],xmlImages[d][1]) );
				}
			}

			return GalleryImagesArr;
		}

		private function initStage():void
		{
			// set the stage
			categoryTwo();

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

		private function categoryOne():void
		{
			myHook = ParseArray("Category1");

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

		private function categoryTwo():void
		{
			myHook = ParseArray("Category2");

			CatGallery = new ImageGallery ( myHook );
			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 a new class that I added to load in my xml file:

package
{
	import flash.display.Sprite;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
	import flash.net.URLVariables;
    import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.events.IEventDispatcher;
	import flash.events.SecurityErrorEvent;
	import flash.events.HTTPStatusEvent;
	import flash.events.IOErrorEvent;
    import flash.xml.XMLDocument;  

	public class LoadXML extends Sprite
	{

		public var loadStatus:Boolean=false;
		public var xml:XML;

		public function LoadXML(xmlurl:String):void {
			var loader:URLLoader = new URLLoader();
            configureListeners(loader);

            var request:URLRequest = new URLRequest(xmlurl);

            try {
                loader.load(request);
            } catch (error:Error) {
                trace ("Unable to load requested document.");
            }
		}

		private function configureListeners(dispatcher:IEventDispatcher):void {
            dispatcher.addEventListener(Event.COMPLETE, completeHandler);
            dispatcher.addEventListener(Event.OPEN, openHandler);
            dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
            dispatcher.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
            dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
            dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
        }

		private function completeHandler(event:Event)
		{
			xml = new XML(event.target.data);
			loadStatus = true;
        }

		public function LoadComplete()
		{
			return loadStatus;
		}

		public function GetXML()
		{
			return xml;
		}

        private function openHandler(event:Event):void {
            trace ("XML openHandler: " + event);
        }

        private function progressHandler(event:ProgressEvent):void {
            trace ("XML progressHandler loaded:" + event.bytesLoaded + " total: " + event.bytesTotal);
        }

        private function securityErrorHandler(event:SecurityErrorEvent):void {
            trace ("XML securityErrorHandler: " + event);
        }

        private function httpStatusHandler(event:HTTPStatusEvent):void {
            trace ("XML httpStatusHandler: " + event);
        }

        private function ioErrorHandler(event:IOErrorEvent):void {
            trace ("XML ioErrorHandler: " + event);
        }
	}
}

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