projectpanelscreenshotsliderimage.mxml

flex 实现的一个showcase 喜欢flex的朋友可以

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	
	width="72"
	height="56"
	
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	
	backgroundAlpha="0"
	borderThickness="0"
	
	creationComplete="componentInit(event)">
	
	
	<mx:Script>
		<![CDATA[
		
			//////////////////////////////////////////////////
			//import
			
			import mx.effects.Fade;
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var imageURL:String;
			
			//////////////////////////////////////////////////
			//initialization
			
			private function componentInit(event:Event):void {
				//
			}
			
			//////////////////////////////////////////////////
			//private functions
			
			public function showSelected():void{
				this.over_mc.alpha=1
			}
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function handleLoadComplete():void{
				var image:DisplayObject = this.imageLoader_mc.content;
				
				var fade:Fade = new Fade(image);
				fade.alphaFrom = 0;
				fade.alphaTo = 1;
				fade.duration = 200;
				fade.play();
			}
			public function handleRollOver():void{
				var fade:Fade = new Fade(over_mc);
				fade.alphaFrom = 0;
				fade.alphaTo = 1;
				fade.duration = 200;
				fade.play();
			}
			public function handleRollOut():void{
				if(this.over_mc.alpha>0){
					var fade:Fade = new Fade(over_mc);
					fade.alphaTo = 0;
					fade.duration = 200;
					fade.play();
				}
			}
			
			
		]]>
	</mx:Script>
	
	
	<mx:HBox horizontalAlign="center" width="100%" height="56" 
		horizontalScrollPolicy="off" verticalScrollPolicy="off"
	    borderThickness="0" borderStyle="none" buttonMode="true">
		<mx:Canvas id="imageHolder_mc" width="72" height="56" 
			horizontalScrollPolicy="off" verticalScrollPolicy="off"
			 borderThickness="0">
			<mx:Canvas width="72" height="56"
				horizontalScrollPolicy="off" verticalScrollPolicy="off">
				<mx:Image source="@Embed('/assets/images/frontend/projectpanel/screenshotSlider_image_bg.png')"/>
			</mx:Canvas>
			
			<mx:Canvas id="imageLoaderHolder" height="50" width="50" x="11" y="0" horizontalScrollPolicy="off" verticalScrollPolicy="off"
				buttonMode="true">
				<mx:SWFLoader id="imageLoader_mc" source="{this.data.small}"  complete="this.handleLoadComplete()"
				width="200" height="200"/>
			</mx:Canvas>
			
			<mx:Image id="over_mc" source="@Embed('/assets/images/frontend/projectpanel/screenshotSlider_image_over.png')"
				x="10" alpha="0"/>
		</mx:Canvas>
	</mx:HBox>
	
	
</mx:Canvas>