Mine

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Image control. -->
<mx:Application backgroundGradientColors="[0xffffff, 0xffffff]" 
backgroundColor="0xFFFFFF" 
creationComplete="init();"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
	import mx.controls.Image;            
	import mx.events.FlexEvent;  
	import mx.effects.Fade;     
	import flash.events.MouseEvent;
	import mx.events.EffectEvent;
       
	
	private var fadeIn:Object = new Object();
	private var fadeOut:Object = new Object();
	private var activeImage:Image = new Image();
	private var imagePath:String = "http://www.canyonranch.com/shared/images/photo-gallery/tucson/";
	private var imageName:String = "tucson";
	private var imageType:String = ".jpg";
	private var imageCount:int = 15;	     

    private function init():void {
		//sets default active image
		//sets default big image
		//loads images from URL - inefficient?
		//creates small images
		var img:Image = new Image();
		var imgURL:String = new String();
		var smallImageCurrentYpos:int = new int();
		
		smallImageCurrentYpos = 0;
		for(var i:int=1;i<(imageCount + 1);i++)
		{
			imgURL = (imagePath + "thumbs/" + imageName + String(i) + imageType);
			img = getImage();
			img.source = imgURL;
			if(i != 1 && (i - 1) % 5 == 0){
				smallImageCurrentYpos += 45;
			}
			img.x = ((((i - 1) % 5)  * 123) + 5);
			img.y = smallImageCurrentYpos;
			img.name = imageName + String(i);
			img.id = imageName + String(i);
			img.addEventListener(MouseEvent.MOUSE_OVER, showImage);
			img.addEventListener(MouseEvent.MOUSE_OUT, hideImage);
			img.addEventListener(flash.events.MouseEvent.CLICK, activateImage );
			smallImageCanvas.addChild(img);
			img.alpha = .3;
			myLabel.text = imgURL;
			activeImage = img;
		}
		mainImage.alpha = 0;
        mainImage.source = "http://www.canyonranch.com/shared/images/photo-gallery/tucson/tucson1.jpg";
		fadeThis(mainImage,800,1.0,'fadeIn');
    }
	 
	private function getImage():Image{
		//for kicks
		var img:Image = new Image();
		return img;
	}
	 
	private function activateImage(e:Event):void{
		//uses activeImage global var
		//removes mouseout event that fades image to make it look selected
		//adds mouseout event to past selected image and fades it out
		//sets selected image as active image
		
		e.target.parent.removeEventListener(MouseEvent.MOUSE_OUT, hideImage);
		activeImage.addEventListener(MouseEvent.MOUSE_OUT, hideImage);
		
		fadeThis(activeImage,800,0.3,'fadeOut');
		activeImage = e.target.parent;
		changeMainImage(e.target.parent.id);		
	 }
	 
	private function changeMainImage(imageId:String):void{
		//changes the main image
		//calls fade this which will add event listener once fade out is complete
		//to switch main image source and fade image back in with new image
		//via fadeInMainImage event handler
		
		fadeThis(mainImage,800,0,'fadeOut');
	}
	
	private function fadeInMainImage(e:Event):void{
		//see changeMainImage comments
		//uses global vars imagePath, imageType and activeImage
		
		mainImage.source = imagePath + activeImage.id + imageType;
		fadeThis(mainImage,800,1.0,'fadeIn');
		
	}
	 
	private function showImage(e:Event):void{	
		//fades in image
		fadeThis(e.target.parent,800,1.0,'fadeIn');
		return;		
	}
	 
	private function hideImage(e:Event):void{  
		//fades out image
		fadeThis(e.target.parent,800,0.3,'fadeOut');
		return;
	}
	 
	private function fadeThis(target:Image,duration:int,alphaTo:Number,type:String):void{
		//target is an image to fade, duration is length of fade effect
		//alphaTo is the alpha number you can change to, float value
		//type is either fadeIn or fadeOut
		//function uses global vars fadeIn and fadeOut
		//if fadeout
	 
		var targetID:String = new String();
		targetID = target.id;
		
		if(type == 'fadeOut'){
			fadeOut[targetID] = new mx.effects.Fade();
			fadeOut[targetID].duration = duration;
			fadeOut[targetID].alphaFrom = target.alpha;
			fadeOut[targetID].alphaTo = alphaTo;
			fadeOut[targetID].target  = target;
			if(targetID == 'mainImage'){
				fadeOut[targetID].addEventListener(mx.events.EffectEvent.EFFECT_END, fadeInMainImage);
			}
			try{
				fadeIn[targetID].end();
			}
			catch(error:Error){
				//not yet called fade in, ignore error
			}
			fadeOut[targetID].play();
		}else{
			fadeIn[targetID] = new mx.effects.Fade();
			fadeIn[targetID].duration = duration;
			fadeIn[targetID].alphaFrom = target.alpha;
			fadeIn[targetID].alphaTo = alphaTo;
			
			fadeIn[targetID].target  = target;
			try{
				fadeOut[targetID].end();
			}
			catch(error:Error){
				//not yet called fade in, ignore error
			}
			fadeIn[targetID].play();
		}
		return;
	}
  ]]></mx:Script> 
	<mx:Box id="testLabel">
        <mx:Label id="myLabel" color="blue" text="Image embedded in the application."/>
	</mx:Box>
    <mx:Box id="myPanel" 
		backgroundColor="0xFFFFFF" 
		borderThickness="1"
		borderColor="black"
        height="560" width="660"
		borderStyle="none"
		horizontalAlign="center" 
		paddingTop="20"
		paddingBottom="0"
		
        >
		<!--
		-->
		<mx:Box id="mainImageBox" 
		backgroundColor="0xFFFFFF" 
		borderThickness="0"
		borderColor="black"
		borderStyle="none"
		width="620" 
		height="317" 
		horizontalAlign="center" >
			<mx:Image id="mainImage" width="610" height="317" />
		</mx:Box>
		<mx:Canvas
		backgroundColor="0xFFFFFF" 
		borderThickness="0"
		borderColor="black"
		borderStyle="none"
		id="smallImageCanvas"
		width="620" 
		height="200">
			
		</mx:Canvas>
    </mx:Box>
</mx:Application>