FLEX 绚丽的图片展示

<?xml version="1.0" encoding="utf-8"?>  

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="black">  

	<mx:states>  

		<mx:State name="can1State">  

			<mx:SetProperty target="{can3}" name="width" value="100"/>  

			<mx:SetProperty target="{can3}" name="height" value="100"/>  

			<mx:SetProperty target="{can3}" name="x" value="10"/>  

			<mx:SetProperty target="{can3}" name="y" value="120"/>  

			<mx:SetProperty target="{can1}" name="width" value="300"/>  

			<mx:SetProperty target="{can1}" name="height" value="300"/>  

			<mx:SetProperty target="{can1}" name="x" value="120"/>  

			

			<mx:SetProperty target="{can2}" name="y" value="10"/>  

		</mx:State>  

		<mx:State name="can2State" basedOn="can1State">  

			<mx:SetProperty target="{can1}" name="width" value="100"/>  

			<mx:SetProperty target="{can1}" name="height" value="100"/>  

			<mx:SetProperty target="{can1}" name="x" value="10"/>  

			<mx:SetProperty target="{can1}" name="y" value="120"/>  

			

			<mx:SetProperty target="{can2}" name="width" value="300"/>  

			<mx:SetProperty target="{can2}" name="height" value="300"/>  

			<mx:SetProperty target="{can2}" name="x" value="120"/>  

			

			<mx:SetProperty target="{can3}" name="y" value="10"/>  

		</mx:State>  

	</mx:states>  

	<mx:Script>  

		<![CDATA[  

			import mx.effects.easing.Bounce;  

			[Bindable]  

			private var ss:*=can3;  

			

			[Bindable]  

			private var up:*=can2;  

			

			[Bindable]  

			private var down:*=can3;  

			

			[Bindable]  

			[Embed(source="1.gif")]  

			private var redImg:Class;  

			

			[Bindable]  

			[Embed(source="2.gif")]  

			private var greenImg:Class;  

			

			[Bindable]  

			[Embed(source="3.gif")]  

			private var blueImg:Class;  

		]]>  

	</mx:Script>  

	<mx:Style>  

		Canvas{  

			borderThickness:"3";  

			borderStyle:"solid";  

			horizontalScrollPolicy:"off";  

			verticalScrollPolicy:"off";  

		}  

	</mx:Style>  

	<mx:transitions>  

		<mx:Transition>  

			<mx:Parallel targets="{[can1,can2,can3]}">  

				<mx:Resize duration="200" easingFunction="Bounce.easeOut"/>  

				<mx:Move xTo="120" duration="500" yTo="10" target="{ss}"/>  

				<mx:Move xTo="10" yTo="10" duration="500" target="{up}"/>  

				<mx:Move xTo="10" yTo="120" duration="500" target="{down}"/>  

				<mx:Resize widthFrom="100" widthTo="300" heightFrom="100" heightTo="300" duration="1000" target="{ss}"/>  

				<mx:Sequence>  

					<mx:Blur duration="500" blurYFrom="1.0" blurYTo="20.0"/>  

					<mx:Blur duration="500" blurYFrom="20.0" blurYTo="1"/>  

				</mx:Sequence>  

			</mx:Parallel>  

		</mx:Transition>  

	</mx:transitions>  

	<mx:Canvas borderColor="red" backgroundColor="black"  id="can1" width="100" height="100" x="10" y="10" click="ss=can1;up=can2;down=can3;currentState='can1State';">  

		<mx:Image source="{redImg}" width="100%" height="100%" scaleX="1" scaleY="1"/>  

	</mx:Canvas>  

	<mx:Canvas borderColor="green" backgroundColor="white" id="can2" width="100" height="100" x="10" y="120" click="ss=can2;up=can3;down=can1;currentState='can2State';">  

		<mx:Image source="{greenImg}" width="100%" height="100%"/>  

	</mx:Canvas>  

	<mx:Canvas borderColor="blue" backgroundColor="red" id="can3" width="300" height="300" x="120" y="10" click="ss=can3;up=can1;down=can2;currentState='';">  

		<mx:Image source="{blueImg}" width="100%" height="100%"/>  

	</mx:Canvas>  

</mx:Application>