rendered paste body<?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 mx.effects.WipeLeft;
import flash.events.MouseEvent;
import mx.events.EffectEvent;
import mx.events.ItemClickEvent;
import flash.utils.Timer;
import mx.controls.Label;
private var fadeIn:Object = new Object();
private var fadeOut:Object = new Object();
private var activeImage:Image = new Image();
private var currentImageIndex:int = new int();
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 var myTimer:Timer = new Timer(5000, 0);
private var indexTrackingArray:Object = new Object();
private var indexReverseTrackingArray:Object = new Object();
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();
myTimer.addEventListener("timer", nextImageHandler);
myTimer.start();
//setting initial play control styles and events
playLabel.setStyle("color","0xdcb05a");
playLabel.addEventListener(flash.events.MouseEvent.CLICK, playShow );
playLabel.addEventListener(MouseEvent.MOUSE_OVER, yellowLabel );
playLabel.addEventListener(MouseEvent.MOUSE_OUT, brownLabel );
stopLabel.addEventListener(flash.events.MouseEvent.CLICK, stopShow );
stopLabel.addEventListener(MouseEvent.MOUSE_OVER, yellowLabel );
stopLabel.addEventListener(MouseEvent.MOUSE_OUT, brownLabel );
previousLabel.addEventListener(flash.events.MouseEvent.CLICK, previousImageHandler );
previousLabel.addEventListener(MouseEvent.MOUSE_OVER, yellowLabel );
previousLabel.addEventListener(MouseEvent.MOUSE_OUT, brownLabel );
nextLabel.addEventListener(flash.events.MouseEvent.CLICK, nextImageHandler );
nextLabel.addEventListener(MouseEvent.MOUSE_OVER, yellowLabel );
nextLabel.addEventListener(MouseEvent.MOUSE_OUT, brownLabel );
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;
if(i == 1){
activeImage = img;
currentImageIndex = i;
fadeThis(img,800,1.0,'fadeIn');
}
indexReverseTrackingArray[img.id] = i;
indexTrackingArray[i] = img.id;
}
mainImage.alpha = 0;
mainImage.source = "http://www.canyonranch.com/shared/images/photo-gallery/tucson/tucson1.jpg";
fadeThis(mainImage,800,1.0,'fadeIn');
return;
}
private function brownLabel(e:Event):void{
e.target.parent.setStyle("color","0x4b3710");
return;
}
private function yellowLabel(e:Event):void{
e.target.parent.setStyle("color","0xdcb05a");
return;
}
private function playShow(e:Event):void{
playLabel.removeEventListener(MouseEvent.MOUSE_OUT, brownLabel );
myTimer.start();
//myLabel.text = "playing";
return;
}
private function stopShow(e:Event):void{
playLabel.addEventListener(MouseEvent.MOUSE_OUT, brownLabel );
playLabel.setStyle("color","0x4b3710");
myTimer.stop();
//myLabel.text = "stopped";
return;
}
private function getImage():Image{
//for kicks
var img:Image = new Image();
return img;
}
private function previousImageHandler(e:Event):void{
if(currentImageIndex != 1){
currentImageIndex--;
} else {
currentImageIndex = imageCount;
}
reconcileActiveImageWithIndex();
return;
}
private function nextImageHandler(e:Event):void{
if(currentImageIndex != imageCount){
currentImageIndex++;
} else {
currentImageIndex = 1;
}
reconcileActiveImageWithIndex();
return;
}
private function reconcileActiveImageWithIndex():void{
//activates main image because currentIndex has changed and needs to be updated
var img:Image = new Image();
//myLabel.text = smallImageCanvas.getChildByName(indexTrackingArray[currentImageIndex]).toString();
img = Image(smallImageCanvas.getChildByName(indexTrackingArray[currentImageIndex]));
fadeThis(img,800,1.0,'fadeIn');
imageInMotion(img);
return;
}
private function activateImage(e:Event):void{
//event handler
imageInMotion(e.target.parent);
}
private function imageInMotion(img:Image):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
img.removeEventListener(MouseEvent.MOUSE_OUT, hideImage);
activeImage.addEventListener(MouseEvent.MOUSE_OUT, hideImage);
fadeThis(activeImage,800,0.3,'fadeOut');
activeImage = img;
//myLabel.text = img.toString();
changeMainImage(img.id);
return;
}
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,400,0,'fadeOut');
return;
}
private function fadeInMainImage(e:Event):void{
//see changeMainImage comments
//uses global vars imagePath, imageType and activeImage
mainImage.source = imagePath + activeImage.id + imageType;
currentImageIndex = indexReverseTrackingArray[activeImage.id];
fadeThis(mainImage,1000,1.0,'fadeIn');
return;
}
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:Style>
@font-face
{
src: url("file:///g:/windows/fonts/frabk.ttf");
fontFamily:frank;
}
Label
{
fontFamily: gara;
color: #4b3710;
fontSize: 14;
fontAntiAliasType: advanced;
fontSharpness: 400;
}
</mx:Style>
<!-- <mx:Box id="testLabel" direction="horizontal">
<mx:Label id="myLabel" color="blue" text="Image embedded in the application."/>
</mx:Box> -->
<mx:Box direction="horizontal" horizontalAlign="right" width="600">
<mx:Label id="previousLabel" text="<< previous"
/>
<mx:Label text=" | "/>
<mx:Label id="playLabel" text="play"
/>
<mx:Label text=" | "/>
<mx:Label id="stopLabel" text="stop"
/>
<mx:Label text=" | "/>
<mx:Label id="nextLabel" text="next >>"
/>
</mx:Box>
<mx:Box id="myPanel"
backgroundColor="0xFFFFFF"
borderThickness="1"
borderColor="black"
height="560" width="660"
borderStyle="none"
horizontalAlign="center"
paddingTop="0"
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>