transition,state的综合运用

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="black">  
3.     <mx:states>  
4.         <mx:State name="can1State">  
5.             <mx:SetProperty target="{can3}" name="width" value="100"/>  
6.             <mx:SetProperty target="{can3}" name="height" value="100"/>  
7.             <mx:SetProperty target="{can3}" name="x" value="10"/>  
8.             <mx:SetProperty target="{can3}" name="y" value="120"/>  
9.             <mx:SetProperty target="{can1}" name="width" value="300"/>  
10.             <mx:SetProperty target="{can1}" name="height" value="300"/>  
11.             <mx:SetProperty target="{can1}" name="x" value="120"/>  
12.               
13.             <mx:SetProperty target="{can2}" name="y" value="10"/>  
14.         </mx:State>  
15.         <mx:State name="can2State" basedOn="can1State">  
16.             <mx:SetProperty target="{can1}" name="width" value="100"/>  
17.             <mx:SetProperty target="{can1}" name="height" value="100"/>  
18.             <mx:SetProperty target="{can1}" name="x" value="10"/>  
19.             <mx:SetProperty target="{can1}" name="y" value="120"/>  
20.               
21.             <mx:SetProperty target="{can2}" name="width" value="300"/>  
22.             <mx:SetProperty target="{can2}" name="height" value="300"/>  
23.             <mx:SetProperty target="{can2}" name="x" value="120"/>  
24.               
25.             <mx:SetProperty target="{can3}" name="y" value="10"/>  
26.         </mx:State>  
27.     </mx:states>  
28.     <mx:Script>  
29.         <![CDATA[  
30.             import mx.effects.easing.Bounce;  
31.             [Bindable]  
32.             private var ss:*=can3;  
33.               
34.             [Bindable]  
35.             private var up:*=can2;  
36.               
37.             [Bindable]  
38.             private var down:*=can3;  
39.         ]]>  
40.     </mx:Script>  
41.     <mx:Style>  
42.         Canvas{  
43.             borderThickness:"3";  
44.              borderStyle:"solid";  
45.              horizontalScrollPolicy:"off";  
46.              verticalScrollPolicy:"off";  
47.         }  
48.     </mx:Style>  
49.     <mx:transitions>  
50.         <mx:Transition>  
51.             <mx:Parallel targets="{[can1,can2,can3]}">  
52.                 <mx:Resize duration="200" easingFunction="Bounce.easeOut"/>  
53.                 <mx:Move xTo="120" duration="500" yTo="10" target="{ss}"/>  
54.                 <mx:Move xTo="10" yTo="10" duration="500" target="{up}"/>  
55.                 <mx:Move xTo="10" yTo="120" duration="500" target="{down}"/>  
56.                 <mx:Resize widthFrom="100" widthTo="300" heightFrom="100" heightTo="300" duration="1000" target="{ss}"/>  
57.                 <mx:Sequence>  
58.                     <mx:Blur duration="500" blurYFrom="1.0" blurYTo="20.0"/>  
59.                     <mx:Blur duration="500" blurYFrom="20.0" blurYTo="1"/>  
60.                 </mx:Sequence>  
61.             </mx:Parallel>  
62.         </mx:Transition>  
63.     </mx:transitions>  
64.     <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';">  
65.         <mx:Image source="asset/1.jpg" width="100%" height="100%" scaleX="1" scaleY="1"/>  
66.     </mx:Canvas>  
67.     <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';">  
68.         <mx:Image source="asset/2.jpg" width="100%" height="100%"/>  
69.     </mx:Canvas>  
70.     <mx:Canvas borderColor="blue" backgroundColor="red" id="can3" width="300" height="300" x="120" y="10" click="ss=can3;up=can1;down=can2;currentState='';">  
71.         <mx:Image source="asset/3.jpg" width="100%" height="100%"/>  
72.     </mx:Canvas>  
73. </mx:Application>