Flex中通过creationCompleteEffect样式为Accordion容器设置创建完成特效的例子

在前面的 Flex中通过creationCompleteEffect样式给Button控件设置创建完成效果的例子中，我们了解了Flex中如何通过creationCompleteEffect样式，给Button控件设置创建完成效果。接下来的例子演示了同样使用creationCompleteEffect样式，为Accordion容器设置创建完成特效。由于peterd没有给出相关的png资源，无法编译通过很是抱歉，大家将就着先看看代码或者看看上面Button的例子，拿到png资源后会更新demo。

 

下面是完整代码：

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">
7.     <mx:String id="str" source="lorem.txt" />
9.     <mx:Accordion id="accordion"
10.             creationCompleteEffect="Dissolve"
11.             width="400"
12.             height="300">
13.         <mx:VBox id="vBox1"
14.                 label="Red (WipeUp)"
15.                 icon="@Embed('assets/bullet_red.png')"
16.                 backgroundColor="red"
17.                 creationCompleteEffect="WipeUp"
18.                 width="100%"
19.                 height="100%">
20.             <mx:Text text="{str}" width="100%" height="100%" />
21.         </mx:VBox>
22.         <mx:VBox id="vBox2"
23.                 label="Orange (WipeDown)"
24.                 icon="@Embed('assets/bullet_orange.png')"
25.                 backgroundColor="haloOrange"
26.                 creationCompleteEffect="WipeDown"
27.                 width="100%"
28.                 height="100%">
29.             <mx:Text text="{str}" width="100%" height="100%" />
30.         </mx:VBox>
31.         <mx:VBox id="vBox3"
32.                 label="Yellow (WipeLeft)"
33.                 icon="@Embed('assets/bullet_yellow.png')"
34.                 backgroundColor="yellow"
35.                 creationCompleteEffect="WipeLeft"
36.                 width="100%"
37.                 height="100%">
38.             <mx:Text text="{str}" width="100%" height="100%" />
39.         </mx:VBox>
40.         <mx:VBox id="vBox4"
41.                 label="Green (WipeRight)"
42.                 icon="@Embed('assets/bullet_green.png')"
43.                 backgroundColor="haloGreen"
44.                 creationCompleteEffect="WipeRight"
45.                 width="100%"
46.                 height="100%">
47.             <mx:Text text="{str}" width="100%" height="100%" />
48.         </mx:VBox>
49.         <mx:VBox id="vBox5"
50.                 label="Blue (Iris)"
51.                 icon="@Embed('assets/bullet_blue.png')"
52.                 backgroundColor="haloBlue"
53.                 creationCompleteEffect="Iris"
54.                 width="100%"
55.                 height="100%">
56.             <mx:Text text="{str}" width="100%" height="100%" />
57.         </mx:VBox>
58.     </mx:Accordion>
60. </mx:Application>