Flex 创建图片展示

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml"
xmlns:core = "com.outsmart.dock.core.*"
horizontalAlign = "center"
backgroundColor = "#FFFFFF"
layout = "absolute"
paddingTop = "0"
paddingBottom = "0"
horizontalScrollPolicy = "off"
verticalScrollPolicy = "off"
creationComplete = "initImage()"
verticalGap = "3">
<mx:Script>
<![CDATA[
[Bindable]private var acImg:ArrayCollection = new ArrayCollection([
{url:"icons/img1.jpg", title:"img1"},
{url:"icons/img2.jpg", title:"img2"},
{url:"icons/img3.jpg", title:"img3"},
{url:"icons/img4.jpg", title:"img4"},
{url:"icons/img5.jpg", title:"img5"}]);
[Bindable] public var urls:Array=[];
public var images:Array = [];
public var curImageIndex:Number = 0;
public var ttimer:Timer;
public var buttons:Array = [];
public function initImage():void
{
imageCanvas.horizontalScrollPolicy = "off";
imageCanvas.verticalScrollPolicy = "off";
imageBar.horizontalScrollPolicy = "off";
imageBar.verticalScrollPolicy = "off";
imageBar.setStyle("horizontalGap",1);
imask.buttonMode=true;
imask.addEventListener(MouseEvent.CLICK,toUrl);
this.setImages();
}


public function setImages():void
{
for(var j:int=0; j<acImg.length;j++)
{
var button:Button = new Button;
button.width=90;
button.height=34;
button.setStyle("fontWeight","normal");
button.setStyle("cornerRadius","0");
button.setStyle("fontSize","9");
button.setStyle("color","#FFFFFF");
button.setStyle("backgroundColor","#FF0000");
button.setStyle("fillColors",["#FF0000","#FF0000"]);
button.setStyle("fillAlphas",[0.3, 0.3]);
button.width=30;
button.height=15;
button.label = new String(j+1);
button.buttonMode = true;
button.addEventListener(MouseEvent.CLICK,selectImage);
buttons[j]=button;
imageBar.addChild(button);

var tempImage:Image = new Image();
tempImage.x =0;
tempImage.y =0;
tempImage.width=imageCanvas.width;
tempImage.height = imageCanvas.height;
tempImage.source = acImg[j].url;
tempImage.visible = false;


var p:Number = (new Date()).getTime()%4;
var eff:String;
switch(p)
{
case 0:
eff="fadeIn";
break;
case 1:
eff="aWipeRight";
break;
case 2:
eff = "aIris";
break;
case 3:
eff="aWipeLeft";
break;
default:
eff="fadeIn";
}

tempImage.setStyle("showEffect",eff);
images[j] = tempImage;
imageCanvas.horizontalGradientMatrix(850,550,50,50);
imageCanvas.addChild(tempImage);
urls[j] = acImg[j].url;
}
imageBar.y=this.height -15-15;
imageBar.x = this.width- (30* images.length) -15;
clickIndex(curImageIndex);
(buttons[curImageIndex] as Button).setStyle("fontWeight","bold");
(buttons[curImageIndex] as Button).setStyle("fillAlphas",[1.0,1.0]);
ttimer = new Timer(5000,0); ttimer.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});
ttimer.start();
}

private function selectImage(evt:MouseEvent):void
{
ttimer.reset();
ttimer= new Timer(5000,0);
ttimer.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});
ttimer.start();
var button:Button = Button(evt.currentTarget);
var index:Number = imageBar.getChildIndex(button);
if(index==curImageIndex) return;
(buttons[curImageIndex] as Button).setStyle("fontWeight","normal");
(buttons[curImageIndex] as Button).setStyle("fillAlphas",[0.3,0.3]);
button.setStyle("fontWeight","bold");
button.setStyle("fillAlphas",[1.0,1.0]);
clickIndex(index);
}
private function clickIndex(i:Number):void
{
(images[i] as Image).visible = false;
imageCanvas.setChildIndex(images[i],images.length-1);
(images[i] as Image).visible = true;
curImageIndex=i;
}

private function toUrl(event:MouseEvent):void
{
navigateToURL(new URLRequest(urls[curImageIndex]),"_blank");
}
private function autoPlay():void
{
(buttons[curImageIndex] as Button).setStyle("fontWeight","normal");
(buttons[curImageIndex] as Button).setStyle("fillAlphas",[0.3, 0.3]);

curImageIndex++;
if (curImageIndex >= images.length)
{
curImageIndex = 0;
}
(buttons[curImageIndex] as Button).setStyle("fontWeight","bold");
(buttons[curImageIndex] as Button).setStyle("fillAlphas",[1.0, 1.0]);
clickIndex(curImageIndex);
}
]]>
</mx:Script>
<!--定义动态新闻的显示效果-->
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Iris id="aIris"/>
<mx:WipeRight id="aWipeRight" />
<mx:WipeLeft id="aWipeLeft" />

<mx:Canvas id="imask" x="850" y="550" width="100%" height="100%" backgroundColor="#FFFFFF" alpha="0"/>
<mx:Canvas id="imageCanvas" x="850" y="550" width="100%" height="141"/>
<mx:HBox id="imageBar" horizontalAlign="right" verticalAlign="bottom" width="30%" height="10%"/>