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

特效, 展播, Flex

本帖最后由 somboy 于 2009-11-2 14:51 编辑

实现的原理是通过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>