Flex + XML的图片轮显

点击查看示例运行效果>>

有待优化的问题：

1、载入图片未做loading处理；

2、图片未使用延时加载处理，默认加载了全部的图片；

3、界面UI美化

逻辑部分与JavaScript有些类似，在解析XML时，单独写了一个as类来处理，btn的外观使用了CSS进行控制，资源全部放在名为assets文件夹目录下，工程目录

主文件的代码(PictureSwitch.mxml)：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
                width="800" height="600" 
                creationComplete="inited()" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.controls.Image;
            import mx.effects.Effect;
            import mx.effects.Iris;
            import mx.effects.WipeLeft;
            import mx.effects.WipeRight;
            import mx.managers.ToolTipManager;
            
            import vo.AdVO;
            
            private static const XML_URL:String = "assets/xml/ad.xml";
            private var xmlDataArr:Array;
            private var timer:Timer;
            private var currentIdx:Number;
            private var buttonArr:Array;
            private var imagesArr:Array;
            
            private function inited():void
            {
                var _loader:URLLoader = new URLLoader();
                var _req:URLRequest = new URLRequest(XML_URL);
                
                _req.method = URLRequestMethod.GET;
                
                _loader.dataFormat = URLLoaderDataFormat.TEXT;
                
                _loader.addEventListener(Event.COMPLETE, completeHandler);
                _loader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
                _loader.load(_req);
            }
            
            private function progressHandler(evt:ProgressEvent):void
            {
                var str:String = "Loading "  + Math.floor((evt.bytesLoaded / evt.bytesTotal) * 100) + "%";
                
                setTxt(str);
            }
            
            private function completeHandler(evt:Event):void
            {
                xmlDataArr = [];
                buttonArr = [];
                imagesArr = [];
                
                var _loader:URLLoader = evt.target as URLLoader;
                
                _loader.removeEventListener(Event.COMPLETE, completeHandler);
                _loader.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
                
                var _xml:XML = XML(_loader.data);
                var _adVO:AdVO;
                var _idx:Number = 0;
                
                for each (var x:XML in _xml.child("item"))
                {
                    _idx++;
                    
                    _adVO = new AdVO(x);
                    
                    createPictureItem(_adVO, _idx);
                    
                    xmlDataArr.push(_adVO);
                }
                
                ToolTipManager.enabled = false;
                
                autoPlay();
                
                timer = new Timer(3000, 0);
                timer.addEventListener(TimerEvent.TIMER, autoPlay);
                timer.start();
                
                loadingTxt.visible = false;
            }
            
            private function createPictureItem(adVO:AdVO, idx:Number):void
            {
                var _button:Button = new Button();
                _button.width = 30;
                _button.height = 15;
                _button.buttonMode = true;
                _button.label = idx.toString();
                _button.addEventListener(MouseEvent.CLICK, changeHandler);
                
                btnContainer.addChild(_button);
                
                buttonArr.push(_button);
                
                
                var _image:Image = new Image();
                _image.x = 0;
                _image.y = 0;
                _image.source = adVO.getImgUrl();
//                _image.visible = false;
                _image.setStyle("showEffect", getRandomEffect());
//                _image.setStyle("hideEffect", "fadeOut");
                _image.buttonMode = true;
                
                _image.addEventListener(MouseEvent.CLICK, clickHandler);
                
                imgContainer.addChild(_image);
                
                imagesArr.push(_image);
            }
            
            private function autoPlay(evt:TimerEvent=null, idx:Number=NaN):void
            {
                var _btn:Button;
                var _img:Image;
                
                if (!isNaN(currentIdx))
                {
                    _btn = Button(buttonArr[currentIdx]);
                    _btn.styleName = "";
                    
//                    _img = Image(imagesArr[currentIdx]);
//                    _img.visible = false;
                }
                
                if (isNaN(currentIdx))
                {
                    currentIdx = 0;
                } 
                else {
                    
                    if (!isNaN(idx))
                    {
                        currentIdx = idx;
                    }
                    else
                    {
                        currentIdx += 1;
                    }
                    
                    if (currentIdx > buttonArr.length - 1)
                    {
                        currentIdx = 0;
                    }
                }
                
                _btn = Button(buttonArr[currentIdx]);
                _btn.styleName = "selected";
                
                _img = Image(imagesArr[currentIdx]);
                _img.parent.setChildIndex(_img, imagesArr.length - 1);
                _img.visible = false;
                _img.visible = true;
            }
            
            private function getRandomEffect():String
            {
                var arr:Array = [
                    'fadeIn', 
                    'iris',
                    'wipeRight',
                    'wipeLeft',
                    'blur',
                    'dissolve'
                ];
                
                var idx:Number = Math.floor(Math.random() * arr.length);
                
                return arr[idx].toString();
            }
            
            private function changeHandler(evt:MouseEvent=null):void
            {
                timer.stop();
                timer.reset();
                timer.start();
                
                var _btn:Button = Button(evt.target);
                var _idx:Number = _btn.parent.getChildIndex(_btn);
                
                if (_idx !== currentIdx)
                {
                    autoPlay(null, _idx);
                }
            }
            
            private function clickHandler(evt:MouseEvent):void
            {
                var adVO:AdVO = xmlDataArr[currentIdx] as AdVO;
                
                Alert.show("点击了" + (currentIdx + 1).toString() + "--打开链接：" + adVO.url);
            }
            
            private function setTxt(txt:String):void
            {
                loadingTxt.htmlText = txt;
            }
            
        ]]>
    </mx:Script>
    
    <mx:Style>
        Application {
            theme-color : #FFFFFF;
            font-size : 12;
            background-alpha : 0.0;
            border-color : #FFFFFF;
        }
        
        Button
        {
            font-weight:normal;
            corner-radius : 0;
            font-size : 9;
            color : #FFFFFF;
            background-color : #FF0000;
            fill-alphas:0.3, 0,3;
            fill-colors:"#FF0000", "#FF0000";
            background-color:#FF0000;
        }
        
        .selected {
            font-weight:bold;
            fill-alphas:1.0, 1.0;
        }
    </mx:Style>
    
    <mx:Iris id="iris" />
    <mx:Fade id="fadeIn" duration="1000" alphaTo="1.0" />
    <mx:Fade id="fadeOut" duration="800" alphaTo="0.0" alphaFrom="1.0" />
    <mx:WipeRight id="wipeRight" />
    <mx:WipeLeft id="wipeLeft" />
    <mx:Blur id="blur" duration="1000" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" />
    <mx:Dissolve duration="1000" alphaFrom="0.0" alphaTo="1.0" id="dissolve" />
    
    <mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        
        <mx:Canvas id="mask" width="100%" height="100%" backgroundColor="#FFFFFF" alpha="0" />
        
        <mx:Canvas id="imgContainer" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" />
        
        <mx:HBox id="btnContainer" width="100%" verticalAlign="bottom" bottom="10" right="10" horizontalAlign="right" horizontalGap="2" />
        
        <mx:Text text="loading..." id="loadingTxt" horizontalCenter="0" verticalCenter="-10" />
        
    </mx:Canvas>
    
    
</mx:Application>

参考网站：

1、【原创】使用Flex实现图片(广告)切换控件

2、图片的showEffect

提供示例的完全源码下载，点此立即下载>>