Flex中如何利用ActionScript代替mx:Sequence标签实现顺序效果

原： http://elanso.com/ArticleModule/ONU0RRHGGJGJHlKeS4SYTgIi.html

在前面的Flex中利用mx:Sequence标签实现顺序效果(Sequencing effects)以及划变效果(Wipe effects)的例子中，我们了解了如何利用<mx:Sequence />这个MXML标签，创建一个按顺序执行的组合效果。接下来的例子演示了如何用ActionScript来代替MXML，实现相同的效果。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
6.  
7.     <mx:Script>
8.         <![CDATA[
9.             import mx.effects.Fade;
10.             import mx.effects.Pause;
11.             import mx.effects.Sequence;
12.             import mx.effects.SetPropertyAction;
13.             import mx.effects.WipeRight;
14.  
15.             private var fader:Sequence;
16.             private var wiper:Sequence;
17.  
18.             private function fade_click():void {
19.                 var fadeIn:Fade = new Fade();
20.                 fadeIn.alphaFrom = 0.0;
21.                 fadeIn.alphaTo = 1.0;
22.  
23.                 var fadeOut:Fade = new Fade();
24.                 fadeOut.alphaFrom = 1.0;
25.                 fadeOut.alphaTo = 0.0;
26.  
27.                 var pause:Pause = new Pause();
28.                 pause.duration = slider.value;
29.  
30.                 fader = new Sequence();
31.                 fader.addChild(fadeIn);
32.                 fader.addChild(pause);
33.                 fader.addChild(fadeOut);
34.  
35.                 fader.stop();
36.                 fader.play([box]);
37.             }
38.  
39.             private function wipe_click():void {
40.                 var wipeIn:WipeRight = new WipeRight();
41.                 wipeIn.showTarget = true;
42.  
43.                 var wipeOut:WipeRight = new WipeRight();
44.                 wipeOut.showTarget = false;
45.  
46.                 var pause:Pause = new Pause();
47.                 pause.duration = slider.value;
48.  
49.                 var alphaOn:SetPropertyAction = new SetPropertyAction();
50.                 alphaOn.name = "alpha";
51.                 alphaOn.value = 1.0;
52.  
53.                 var alphaOff:SetPropertyAction = new SetPropertyAction();
54.                 alphaOff.name = "alpha";
55.                 alphaOff.value = 0.0;
56.  
57.                 wiper = new Sequence();
58.                 wiper.addChild(alphaOn);
59.                 wiper.addChild(wipeIn);
60.                 wiper.addChild(pause);
61.                 wiper.addChild(wipeOut);
62.                 wiper.addChild(alphaOff);
63.  
64.                 wiper.stop();
65.                 wiper.play([box]);
66.             }
67.         ]]>
68.     </mx:Script>
69.  
70.     <mx:ApplicationControlBar dock="true">
71.         <mx:Button label="fade box"
72.                 click="fade_click();" />
73.         <mx:Button label="wipe box"
74.                 click="wipe_click();" />
75.  
76.         <mx:Spacer width="100%" />
77.  
78.         <mx:Label text="effect pause ({slider.value} ms):" />
79.         <mx:HSlider id="slider"
80.                 minimum="1000"
81.                 maximum="3000"
82.                 value="1500"
83.                 labels="[1000,2000,3000]"
84.                 liveDragging="true"
85.                 showTrackHighlight="true"
86.                 snapInterval="100"
87.                 tickInterval="500"
88.                 dataTipPrecision="0" />
89.     </mx:ApplicationControlBar>
90.  
91.     <mx:Box id="box"
92.             width="100%"
93.             height="100%"
94.             backgroundColor="haloSilver"
95.             alpha="0.0" />
96.  
97. </mx:Application>