基于Flex 4.6实现 Picture Slide （图片滑动展示效果）

之前项目中有用到这种效果，图片幻灯显示，一般来说JS实现的较多，Flex的话，貌似之前有找到过Flex3的实现方案，so 我就借鉴一下咯

当然根据实际应用情况，将代码升级到Flex4，然后又根据自己的应用需要增加了些控制效果。

闲话不多说，先上代码

PictureSlide.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
initialize="initializeHandler(event)">
<fx:Script>
<![CDATA[
import com.gs.support.AppEventBus;

import flash.events.MouseEvent;

import mx.controls.Image;
import mx.events.FlexEvent;

import spark.components.HGroup;
import spark.effects.Move;
[Bindable]
public var picGroup:Array=[];
[Bindable]
public var backColor:uint=0x000000;
[Bindable]
public var bindingKey:String;

private static const PIC_ARRAY_INIT:String="customCom_PictureSlide_DataInit";

public static const PIC_URL:String="picUrl";
public static const PIC_NAME:String="picName";

private var pic_num:int;

private static function getInstanceBindingKey():String{
return PIC_ARRAY_INIT+"_"+new Date().time;
}

protected function initializeHandler(event:FlexEvent):void
{
bindingKey=bindingKey?bindingKey:getInstanceBindingKey();
AppEventBus.addListener(bindingKey,function(event:AppEventBus):void{
picGroup=event.data as Array;
if(picGroup.length>0){
fillPic(picGroup);
}
});
}

private function fillPic(picArray:Array):void{
for (var i:int=0;i<picArray.length ;i++)
{
var  item:Object=picArray[i];
if(item[PIC_URL]){
if(item[PIC_NAME]){
createOnespic(item[PIC_URL],item[PIC_NAME]);
}else{
createOnespic(item[PIC_URL]);
}

}

}
pic_num = picgroup.numElements;
var timg:Image = picgroup.getElementAt(pic_num/2) as Image;
set_pic(timg);
}

protected function btnLeft_mouseOverHandler(event:MouseEvent):void
{
btnLeft2.visible=true;
btnLeft1.visible=false;
}
protected function btnLeft_mouseOutHandler(event:MouseEvent):void
{
btnLeft1.visible=true;
btnLeft2.visible=false;
}
protected function btnRight_mouseOverHandler(event:MouseEvent):void
{
btnRight2.visible=true;
btnRight1.visible=false;
}
protected function btnRight_mouseOutHandler(event:MouseEvent):void
{
btnRight1.visible=true;
btnRight2.visible=false;
}
private function set_pic(t:Image):void
{
var temp:Image;
var index1:int;
for(var i:int=0;i<pic_num;i++)
{
temp = picgroup.getElementAt(i) as Image;
if(temp == t)
{
index1=i;
}
temp.alpha = 0.5;
temp.trustContent = true;
}
bigImg.load(t.source.toString());
//				bigImg.source=t.source.toString();
//				bigImg.width=bigImg.parent.contentWidth;
bigImg.maxHeight=bigImg.parent.height-100;
bigImg.maxWidth=bigImg.parent.width;
t.trustContent = false;
t.alpha = 1;
if(this.width<pic_num*80)
{
picMove.stop();
picMove.xFrom = spics.x;
picMove.xTo = this.width/2 - index1*80 - 38;
picMove.duration=2000;
picMove.play();
}

}
private function createOnespic(url:String,nameUrl:String=""):void
{
var pic:Image;
pic = new Image();
pic.source = url;
pic.width = 76;
pic.height = 76;
pic.buttonMode = true;
pic.name = nameUrl;
pic.addEventListener(MouseEvent.CLICK, img_click);
pic.trustContent = true;
pic.alpha = 0.5;
picgroup.addElement(pic);
}
protected function img_click(event:MouseEvent):void
{
var t:Image = event.currentTarget as Image;
set_pic(t);
}
protected function btnLeft1_clickHandler(event:MouseEvent):void
{
if(picGroup.length>0){
var temp:Image;
var i:int=0
for(;i<pic_num;i++)
{
temp = picgroup.getElementAt(i) as Image;
if(!temp.trustContent)
{
break;
}
}
i-=1;
if(i<0)
{
i=pic_num-1;
}
set_pic(picgroup.getElementAt(i) as Image);
}

}
protected function btnRight1_clickHandler(event:MouseEvent):void
{
if(picGroup.length>0){
var temp:Image;
var i:int=0
for(;i<pic_num;i++)
{
temp = picgroup.getElementAt(i) as Image;
if(!temp.trustContent)
{
break;
}
}
i+=1;
if(i>pic_num-1)
{
i=0;
}
set_pic(picgroup.getElementAt(i) as Image);
}

}

]]>
</fx:Script>
<fx:Declarations>
<s:Move id="picMove" target="{spics}">

</s:Move>
</fx:Declarations>
<s:BorderContainer x="0" y="0"
width="100%" height="100%"
backgroundColor="{backColor}"
borderVisible="false">
<mx:Image id="bigImg" top="5" horizontalAlign="center"
verticalAlign="middle"
horizontalCenter="0" verticalCenter="0" />
</s:BorderContainer>
<s:BorderContainer x="0" y="0" top="0"
width="55" height="100%"
backgroundAlpha="0"
borderVisible="false">
<mx:Image id="btnLeft1"
horizontalCenter="0" verticalCenter="0"
source="@Embed(source='assets/images/btn_left_1.png')"
mouseOver="btnLeft_mouseOverHandler(event)"
mouseOut="btnLeft_mouseOutHandler(event)"
buttonMode="true" />
<mx:Image id="btnLeft2"  visible="false"
horizontalCenter="0" verticalCenter="0"
source="@Embed(source='assets/images/btn_left_2.png')"
mouseOver="btnLeft_mouseOverHandler(event)"
mouseOut="btnLeft_mouseOutHandler(event)"
click="btnLeft1_clickHandler(event)"
buttonMode="true"/>
</s:BorderContainer>
<s:BorderContainer y="0" width="55"
height="100%" right="0"
backgroundAlpha="0"
borderVisible="false">
<mx:Image id="btnRight1"
horizontalCenter="0" verticalCenter="0"
source="@Embed(source='assets/images/btn_right_1.png')"
mouseOver="btnRight_mouseOverHandler(event)"
mouseOut="btnRight_mouseOutHandler(event)"
buttonMode="true"/>
<mx:Image id="btnRight2" visible="false"
horizontalCenter="0" verticalCenter="0"
source="@Embed(source='assets/images/btn_right_2.png')"
mouseOver="btnRight_mouseOverHandler(event)"
mouseOut="btnRight_mouseOutHandler(event)"
click="btnRight1_clickHandler(event)"
buttonMode="true"/>
</s:BorderContainer>
<s:BorderContainer id="spics" width="100%" height="86" bottom="0" backgroundAlpha="0" borderVisible="false">
<s:HGroup id="picgroup"  horizontalCenter="0" verticalCenter="0" gap="4">
</s:HGroup>
</s:BorderContainer>
</s:Group>

功能说明：
1、上方是大图展示区，下面是缩率图展示区，点击下面的缩率图，上面跟着显示对于的大图；（缩率图显示和大图 使用的图源是同一图源，代码中未对图片进行处理。）

2、左右的按键也可以控制图片的左右播放；

目前暂未实现图片自动播放功能。

使用方式：

<CustomCom:PictureSlide id="picGroup"  backColor="{getStyle('contentBackgroundColor')}"
picGroup="{picAC}" width="500" height="400"/>

下面是对应的As脚本

for(var i:int=0;i<picPath.length;i++){
if(picPath[i]){
var imgItem:Object={
picUrl:picPath[i],
picName:picPath[i]
};
picAC.push(imgItem);
}

}
AppEventBus.dispatch(picGroup.bindingKey,picAC);

效果：



对应的资源图片： 传送门>>