flex编写的一个相册浏览

1、目录树：

      

 

2、demo_viewImage.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="application1_creationCompleteHandler(event)" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:viewImage="demo.viewImage.*" backgroundColor="#000000">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			import myevents.ViewImageEvent;

			private var count:int;//总数
			private var step:int = 4;//步长
			private var currentPage:int = 0;//当前页
			
			[Bindable]
			private var dataImg:ArrayCollection = new ArrayCollection(); //图片数据对象
			
			/*启动函数*/
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				setDataImg();//初始化所有图片数据
				this.addEventListener(ViewImageEvent.IMG, VIEHandler);//注册单击图片监听事件
			}
			/*注册点击图片监听事件回归函数*/
			private function VIEHandler(event:ViewImageEvent):void
			{
				viewIMG.source = dataImg[int(event.getEventValue)].img;
			}
			
			/*初始化图片数据对象*/
			private function setDataImg():void
			{
				for(var i:int = 0; i < 6; i++)
				{
					var o:Object = new Object();
					o.img = "demo/viewImage/images/" + i + ".png";
					o.littleImg = "demo/viewImage/images/little_" + i + ".png";
					dataImg.addItem(o);
					count++;
				}
				setLittleImg(0, step);
			}
			
			/*分页设置缩略图*/
			private function setLittleImg(start:int, step:int):Boolean
			{
				vb.removeAllChildren();
				for(var i:int = start; i < start + step; i++)
				{
					if((i+1) > count)
					{
						if(i == start){
							return false;	
						}
						return true;
					}
					if(i < 0)
					{
						if(i == start){
							return false;
						}
						return true;
					}
					var littleImage:LittleImage = new LittleImage();
					vb.addChild(littleImage);
					littleImage.littleImg.source=dataImg[i].littleImg;
					
					littleImage.setArg_littleImg = i.toString();
					if(i == start)
					{
						viewIMG.source = dataImg[i].img;
					}
				}
				return true;
			}
			
			/*左翻页处理*/
			private function leftClick(event:MouseEvent):void
			{
				if(!setLittleImg(currentPage-1, step))
				{
					Alert.show("没有上一张了", "提示信息");
					setLittleImg(currentPage, step);
					currentPage = 0;
				}
				else
				{
					currentPage--;
				}
			}
			
			/*右翻页处理*/
			private function rightClick(event:MouseEvent):void
			{
				if(!setLittleImg(currentPage+1, step))
				{
					Alert.show("已经是最后一张了", "提示信息");
					setLittleImg(currentPage, step);
					currentPage = count-1;
				}
				else
				{
					currentPage++;
				}
				
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Image id="viewIMG" width="600" height="450" source="demo/viewImage/images/2.png" />
	<mx:HBox width="700" height="100" horizontalGap="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
		<viewImage:leftImage click="leftClick(event);"/>
		<mx:HBox width="100%" height="100%" id="vb" horizontalGap="13">
		</mx:HBox>
		<viewImage:rightImage click="rightClick(event);"/>
	</mx:HBox>
</s:Application>

2、leftImage.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 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="107" height="100" backgroundColor="#000000">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var s:String = "demo/viewImage/image/back.png";
			private function moClick(event:MouseEvent):void
			{
				s = "demo/viewImage/image/left.png";
			}
			
			private function moutClick(event:MouseEvent):void
			{
				s = "demo/viewImage/image/back.png";
			}
		]]>
	</fx:Script>
	<mx:Image id="leftImg" width="107" height="100" source="{s}" buttonMode="true" useHandCursor="true" mouseOver="moClick(event);" mouseOut="moutClick(event);"/>
</mx:VBox>

3、rightImage.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 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="107" height="100" backgroundColor="#000000">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var s:String = "demo/viewImage/image/back.png";
			private function moClick(event:MouseEvent):void
			{
				s = "demo/viewImage/image/right.png";
			}
			
			private function moutClick(event:MouseEvent):void
			{
				s = "demo/viewImage/image/back.png";
			}
		]]>
	</fx:Script>
	<mx:Image id="leftImg" width="107" height="100" source="{s}" buttonMode="true" useHandCursor="true" mouseOver="moClick(event);" mouseOut="moutClick(event);"/>
</mx:VBox>

4、littleImage.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 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="107" height="100">

	<fx:Script>
		<![CDATA[
			import myevents.ViewImageEvent;
			
			[Bindale]
			public var arg_littleImg:String; //用户存放图片对象的ID
			
			public function set setArg_littleImg(args:String):void
			{
				arg_littleImg = args;
			}
			
			protected function littleImg_clickHandler(event:MouseEvent):void
			{
				var viewImageEvent:ViewImageEvent= new ViewImageEvent(ViewImageEvent.IMG, this.arg_littleImg , true);
				dispatchEvent(viewImageEvent);
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>

	<mx:Image id="littleImg" width="107" height="100" source="demo/viewImage/images/little_2.png" buttonMode="true" useHandCursor="true" click="littleImg_clickHandler(event)"/>
</mx:VBox>

5、ViewImageEvent.as

package myevents
{
	import flash.events.Event;

	public class ViewImageEvent extends Event
	{
		public static const LEFT:String = "LEFT";
		public static const RIGHT:String = "RIGHT";
		public static const IMG:String = "IMG";
		
		[Bindable]
		private var eventValue:String;
		
		public function ViewImageEvent(type:String, ev:String, bubbles:Boolean = false, cancelable:Boolean = false )
		{
			super(type, bubbles, cancelable);
			this.eventValue = ev;
		}
		
		public function get getEventValue():String
		{
			return this.eventValue;
		}
	}
}

 

6、运行效果图