Flex实现图片展播+渐出特效

      实现的原理是通过XML配置图片数据，Flex读取XML文件获取到图片数据，然后将当前显示的图片设置为XML中配置的第一条数据的图片，通过四个按扭来控制图片播放的索引，同时为图片也加了事件处理函数，点击图片就切换到下一张图片。下面是最终效果图。

            

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.core.UIComponent;
            [Bindable] 
            private var picArray:ArrayCollection;
            [Bindable]
            private var index:Number = 0;
            
            private function init():void
            {
                var loader:URLLoader = new URLLoader();
                loader.addEventListener(Event.COMPLETE,onComplete);
                loader.load(new URLRequest("data/pic.xml"));
            }
            
            private function onComplete(event:Event):void
            {
                var xml:XML = new XML(event.target.data);
                
                picArray = new ArrayCollection();
                for(var i:Number = 0;i <xml.children().length();i++)
                {
                    var o:Object = new Object();
                    o.ImageUrl = xml.pic[i].imageUrl;
                    picArray.addItem(o);
                } 
            }
            
            private function onClickHandler(id:String):void
            {
                switch(id)
                {
                    case "btn1":
                        this.index = 0;
                        break;
                    case "btn2":
                        if(this.index != 0)
                        {
                            this.index -= 1;
                        }
                        break;
                    case "btn3":
                        if(this.index != picArray.length-1)
                        {
                            this.index += 1;
                        }
                        break;
                    case "btn4":
                        this.index = picArray.length - 1;
                        break;
                }
            }
            
            private function onImageClick(event:MouseEvent):void
            {
                if(this.index == picArray.length -1)
                {
                    this.index = 0;
                }
                else
                {
                    this.index++;
                }
            }
        ]]>
    </mx:Script>
    <mx:Panel x="73" y="78" width="701" height="536" layout="absolute" fontSize="12">
        <mx:Image x="0" y="0" width="680" height="455" id="imageShow" completeEffect="{fadeIn}"
            source="{picArray.getItemAt(index).ImageUrl}" click="onImageClick(event)"/>
        <mx:Button x="154" y="463" label="第一张" id="btn1" click="onClickHandler(btn1.id)"/>
        <mx:Button x="227" y="462" label="上一张" id="btn2" click="onClickHandler(btn2.id)"/>
        <mx:Button x="300" y="462" label="下一张" id="btn3" click="onClickHandler(btn3.id)"/>
        <mx:Button x="373" y="462" label="最后一张" id="btn4" click="onClickHandler(btn4.id)"/>
        <mx:Label x="607" y="466" width="73" id="indexCount" color="#FF0030" fontWeight="bold" 
            text="{(index+1) + '/' + picArray.length}"/>
    </mx:Panel>
    <mx:Fade id="fadeIn" duration="2000" alphaFrom="0.18" alphaTo="1.0"/>
</mx:Application>