基于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"/>

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);

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