Flex图片切换(图片存入xml中)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="createComplete()" layout="absolute" themeColor="#FFFFFF" fontSize="12" backgroundAlpha="0.0" alpha="1.0" borderColor="#FFFFFF">
<mx:Script>
   <![CDATA[
    import mx.controls.Alert;
    import mx.controls.Button;
    import mx.controls.Image;
    public var images:Array = [];
    public var buttons:Array = [];
    public var urls:Array = [];
    public var currentImageIndex:Number = 0;
    public var ttime:Timer;

    public function createComplete():void {
    
     this.horizontalScrollPolicy = "off";
     this.verticalScrollPolicy="off";
    
     //c为放置图片的Canvas
     c.horizontalScrollPolicy = "off";
     c.verticalScrollPolicy="off";
    
     //h为放置图片切换按钮的HBox
     h.horizontalScrollPolicy = "off";
     h.verticalScrollPolicy="off";
     h.setStyle("horizontalGap",1);
    
     //imask为接收图片点击时间的Canvas层,相当于遮罩
     imask.buttonMode = true;
     imask.addEventListener(MouseEvent.CLICK,toUrl);
    
     var loader:URLLoader = new URLLoader();
     loader.addEventListener(Event.COMPLETE,setPictures);
     loader.dataFormat = URLLoaderDataFormat.TEXT;
    
     //下面代码隐去了获取图片信息XML的URL
     loader.load(new URLRequest(
http://www.somesite.com/someServlet ));
          
    }
   
    private function setPictures(evt:Event):void{
     var loader:URLLoader = URLLoader(evt.target);
     var advertisementXml:XML = XML(loader.data);
     var i:Number = 0;
     for each(var element:XML in advertisementXml.elements()){
      if (element.name()=="item"){
      
      
       var id:String = element.@id;
       var code:String = element.@code;
       var name:String = element.@name;
       var img:String = element.@img;
       var url:String = element.@url;

       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(i+1);
       button.buttonMode = true;
       button.addEventListener(MouseEvent.CLICK,selectImage);
       buttons[i]=button;
       h.addChild(button);
      
       var tempImage:Image = new Image();
       tempImage.x=0;
       tempImage.y=0;
       tempImage.source = img;
       tempImage.toolTip = name;
       tempImage.width = c.width;
       tempImage.height = c.height;
       tempImage.visible = false;
      
       //根据当前时间随即选择4种切换效果之一
       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[i]=tempImage;
       c.addChild(tempImage);
       urls[i]=url;
       i++;
      }
     }
    
     //设定图片切换按钮的位置
     h.y = this.height - 15 - 15;
     h.x = this.width - (30*images.length) - 15;
    
     clickIndex(currentImageIndex);
     (buttons[currentImageIndex] as Button).setStyle("fontWeight","bold");
     (buttons[currentImageIndex] as Button).setStyle("fillAlphas",[1.0, 1.0]);
    
     //new一个timer控件,每隔5秒钟变换一次
     ttime = new Timer(5000,0);  
     ttime.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});
     ttime.start();     
    }
   
    private function clickIndex(i:Number):void {
     (images[i] as Image).visible = false;
     c.setChildIndex(images[i],images.length-1);
     (images[i] as Image).visible = true;
     currentImageIndex = i;
    }
   
    private function selectImage(evt:MouseEvent):void {
    
     ttime.reset();
     ttime = new Timer(5000,0);  
     ttime.addEventListener(TimerEvent.TIMER,function():void{autoPlay();});

    ttime.start();
    
     var button:Button = Button(evt.currentTarget);
     var index:Number = h.getChildIndex(button);

     if (index==currentImageIndex) return;
     (buttons[currentImageIndex] as Button).setStyle("fontWeight","normal");    
     (buttons[currentImageIndex] as Button).setStyle("fillAlphas",[0.3, 0.3]);
    
     button.setStyle("fontWeight","bold");
     button.setStyle("fillAlphas",[1.0, 1.0]);

     clickIndex(index);
    }
   
   
   
    private function toUrl(evt:MouseEvent):void {
     navigateToURL(new URLRequest(urls[currentImageIndex]), "_blank");  
    }
   
    private function autoPlay(){
     (buttons[currentImageIndex] as Button).setStyle("fontWeight","normal");    
     (buttons[currentImageIndex] as Button).setStyle("fillAlphas",[0.3, 0.3]);
    
     currentImageIndex ++ ;
     if (currentImageIndex >= images.length) {
      currentImageIndex = 0;
     }
     (buttons[currentImageIndex] as Button).setStyle("fontWeight","bold");
     (buttons[currentImageIndex] as Button).setStyle("fillAlphas",[1.0, 1.0]);
     clickIndex(currentImageIndex);
    }

   ]]>
</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="c" x="0" y="0" width="100%" height="100%">
</mx:Canvas>
<mx:Canvas id="imask" x="0" y="0" width="100%" height="100%" backgroundColor="#FFFFFF" alpha="0">
</mx:Canvas>
<mx:HBox id="h" horizontalAlign="right" verticalAlign="bottom">
</mx:HBox>
</mx:Application>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值