flex gallery / 产品展示

代码：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="middle" creationComplete="photo()">
	
	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import mx.controls.Button;
			
			public var img:Array = [];
			public var urls:Array = [];
			public var buttons:Array = [];
			
			public var total:int = 4;
			public var currenIndex:int = 0;
			public var ttime:Timer;
			
			private function photo():void{				
				var iphoto:Array = ['assets/1.jpg','assets/2.jpg','assets/3.jpg','assets/4.jpg'];
				var iurl:Array = ['http://www.baidu.com','http://www.google.com','http://www.yahoo.com','http://www.msn.com'];
				
				for(var n:int = 0; n < total; n++){ 
					
					var button:Button = new Button;
					button.width=30;
					button.height=15;
					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.label = new String(n+1);  // 相当于 value
					button.buttonMode = true;        // 手型
					button.addEventListener(MouseEvent.CLICK,selectImage);	// 添加行为
					buttons[n]=button;            
					ibtn.addChild(button);           // 添加元素
					
					var listImage:Image = new Image();
					listImage.x = 0;
					listImage.y = 0;
					listImage.source = iphoto[n];   // 相当于 src
					listImage.toolTip = iphoto[n];  // 相当于 title
					listImage.width = frame.width;
					listImage.height = frame.height;
					listImage.visible = false;
					
					//根据当前时间随即选择4种切换效果之一
					var p:Number = (new Date()).getTime() % 4;
					var eff:String;
					switch(p) {
						case 0:
							eff = "fadeIn";
							break;
						case 1:
							eff = "myIris";
							break;
						case 2:
							eff = "aIris";
							break;
						case 3:
							eff = "aWipeLeft";
							break;
						default:
							eff = "myDissolve";
					}
					listImage.setStyle("showEffect",eff);	
					listImage.buttonMode = true;
					listImage.addEventListener(MouseEvent.CLICK,gotoUrl);
					
					urls[n] = iurl[n];
					img[n] = listImage;
					frame.addChild(listImage);				
				}
				
				//设定图片切换按钮的位置
				ibtn.x = 330;
				ibtn.y = 320;				
				
				clickIndex(currenIndex);
				(buttons[currenIndex] as Button).setStyle("fontWeight","bold");
				(buttons[currenIndex] as Button).setStyle("fillAlphas",[1.0, 1.0]);
				
				//new一个timer控件，每隔2秒钟变换一次
				ttime = new Timer(3000,0);  
				ttime.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});
				ttime.start(); 
			}
			
			private function clickIndex(i:int):void{
				(img[i] as Image).visible = false;
				frame.setChildIndex(img[i],img.length-1);
				(img[i] as Image).visible = true;
				currenIndex = i;				
			}
			
			private function autoPlay():void{			
				(buttons[currenIndex] as Button).setStyle("fontWeight","normal");    
				(buttons[currenIndex] as Button).setStyle("fillAlphas",[0.3, 0.3]);
				
				currenIndex ++ ;
				if (currenIndex >= img.length) {
					currenIndex = 0;
				}
				
				(buttons[currenIndex] as Button).setStyle("fontWeight","bold");
				(buttons[currenIndex] as Button).setStyle("fillAlphas",[1.0, 1.0]);			
				clickIndex(currenIndex);				
			}
			
			private function selectImage(event:MouseEvent):void {
				
				ttime.reset();
				ttime = new Timer(3000,0);  
				ttime.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});				
				ttime.start();
				
				var button:Button = Button(event.currentTarget);
				var index:Number = ibtn.getChildIndex(button);
				
				if (index == currenIndex) return;
				(buttons[currenIndex] as Button).setStyle("fontWeight","normal");    
				(buttons[currenIndex] as Button).setStyle("fillAlphas",[0.3, 0.3]);
				
				button.setStyle("fontWeight","bold");
				button.setStyle("fillAlphas",[1.0, 1.0]);
				
				clickIndex(index);
			}	
			
			private function gotoUrl(evt:MouseEvent):void{
				navigateToURL(new URLRequest(urls[currenIndex]), "_blank");  
			}

		]]>
	</mx:Script>
	
	<mx:Style>
		Button{
			cornerRadius: 12;
			creationCompleteEffect:Zoom;
		}
	</mx:Style>
	
	<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
	<mx:Iris id="aIris"/>
	<mx:Iris id="myIris" />
	<mx:WipeLeft id="aWipeLeft" />
	<mx:Dissolve id="myDissolve" color="black"/>
	
	<mx:Canvas x="0" y="0" id="frame" width="500" height="364" horizontalScrollPolicy="off" verticalScrollPolicy="off"  useHandCursor="true"> </mx:Canvas>	
	<mx:HBox id="ibtn" horizontalAlign="right" verticalAlign="bottom"> </mx:HBox>
</mx:Application>