Flex中提供了丰富的效果组件。因为效果是一种依据时间渐变的过程，因此全部效果都具有duration属性，用来设置播放时间（以毫秒为单位）。也能够通过设置repeatCount属性和repeatDelay属性，来分别控制效果播放的次数和重复播放效果的时间间隔（以毫秒为单位）。假设希望在触发器被触发后，延迟一段时间调用效果，能够使用startDelay属性。

 

1）Flex特效之AnimateProperty动画效果

AnimateProperty是用来为组件的属性或样式设置动画的效果。我们能够通过其property属性设定目标对象上须要设置动画效果的属性，然后设置fromValue属性和toValue属性，为效果提供属性的起始值和结束值。比如以下的代码使用mouseDownEffect触发器，当单击图片时，触发AnimateProperty效果，在1秒钟内，Image对象的scaleX属性由1变为2，被横向拉伸。代码例如以下：

1.             <mx:AnimateProperty idmx:AnimatePropertyid="animateProperty"property="scaleX"fromValue="1  

2.              

3.             "toValue="2" 

4.              

5.             duration="1000"/> 

6.              

7.             <mx:Imageidmx:Imageid="img"source="assets/plane.png"mouseDownEffect="{animateP  

8.              

9.             roperty}"/> 

10.           

假设希望通过样式设置效果，能够将isStyle属性设置为ture，然后通过setStyle()方法设置目标对象的样式，从而达到设置效果的目的。

 

2）Flex特效之Blur模糊效果

Blur是一种模糊效果。该效果使用了flash.filters.BlurFilter滤镜，假设对某个组件应用了Blur效果，就不能再对该组件应用BlurFilter滤镜，也无法再次应用Blur效果。以下的代码通过Image对象的mouseDownEffect触发器触发Blur效果，在1秒钟内，Image对象将逐渐变得模糊。代码例如以下：

1.             <mx:Bluridmx:Blurid="blurImage"duration="1000"blurXFrom="0.0"blurXTo="10.0"  

2.              

3.             blurYFrom="0.0"blurYTo="10.0"/> 

4.              

5.             <mx:Imageidmx:Imageid="img"source="assets/plane.png"mouseDownEffect="{blurImage}"/> 

3）Flex特效之Dissolve溶解效果

Dissolve是一种溶解效果。当效果開始播放时，将创建一个不透明的矩形，这个矩形悬浮在目标组件的上方，它的颜色由Dissolve.color属性设置，此时透明度为“1.0-Dissolve.alphaFrom”。随着效果的播放，该矩形的alpha属性将从(1.0-alphaFrom)逐渐变为“1.0–alphaTo”，直到效果播放完毕，矩形被销毁。

假设目标对象是一个容器，那么Dissolve效果将应用于容器内部的内容区域。

以下的代码使用一个CheckBox对象设置Image的visible属性，通过hideEffect和showEffect触发器分别触发各自的Dissolve效果：

6.             <mx:Dissolveidmx:Dissolveid="dissolveOut"duration="1000"alphaFrom="1.0"alphaTo="0  

7.              

8.             .0"/> 

9.              

10.          <mx:Dissolveidmx:Dissolveid="dissolveIn"duration="1000"alphaFrom="0.0"alphaTo="1.  

11.           

12.          0"/> 

13.           

14.          <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 

15.           

16.          <mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"  

17.           

18.          hideEffect="{dissolveOut}"showEffect="{dissolveIn}"/> 

4）Flex特效之Fade淡入淡出效果

Fade是一种淡入淡出效果，它通过设置组件的alpha属性来实现动画效果。当使用showEffect或hideEffect触发器设置Fade效果时，假设省略了alphaFrom和alphaTo属性的值，那么在showEffect触发器上目标对象的透明度将从0变化到目标的当前alpha值，而在hideEffect触发器上则会从当前的alpha值变化到0。假设要对字体使用Fade效果，必须使用嵌入字体。

以下的代码使用一个CheckBox对象设置Image的visible属性，通过hideEffect和showEffect触发器分别触发各自的Fade效果：

1.             <mx:Fadeidmx:Fadeid="fadeOut"duration="1000"alphaFrom="1.0"alphaTo="0.0"/> 

2.              

3.             <mx:Fadeidmx:Fadeid="fadeIn"duration="1000"alphaFrom="0.0"alphaTo="1.0"/> 

4.              

5.             <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 

6.              

7.             <mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"  

8.              

9.             hideEffect="{fadeOut}"showEffect="{fadeIn}"/> 

5）Flex特效之Glow发光效果

Glow是一种发光效果，该效果使用了flash.filters.GlowFilter滤镜类。假设对某个组件应用了Glow效果，就不能对该组件应用GlowFilter滤镜，也无法再次应用Glow效果。以下的代码通过Image对象的mouseDownEffect触发器触发Glow效果：

10.          <mx:Glowidmx:Glowid="glowImage"duration="1000"alphaFrom="1.0"alphaTo="0.3"  

11.           

12.          blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0"color="0x  

13.           

14.          00FF00"/> 

15.           

16.          <mx:Imagesourcemx:Imagesource="assets/plane.png"mouseDownEffect="{glowImage}"/> 

6）Flex特效之Iris虹效果

Iris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。该效果能够从目标的中心放大遮罩来显示目标，也能够向中心收缩遮罩来隐藏目标。以下的代码使用一个CheckBox对象设置Image的visible属性，通过hideEffect和showEffect触发器分别触发各自的Iris效果：

17.          <mx:Irisidmx:Irisid="irisOut"duration="1000"showTarget="true"/> 

18.           

19.          <mx:Irisidmx:Irisid="irisIn"duration="1000"showTarget="false"/> 

20.           

21.          <mx:Imageidmx:Imageid="Flex"source="assets/plane.png"visible="{cbx.selected}" 

22.           

23.          showEffect="{irisIn}"hideEffect="{irisOut}"/> 

24.           

25.          <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 

7）Flex特效之Move移动效果

Move效果用来实现移动动画。在给定时间内，组件的位置会随时间变化而变化。使用该效果通常须要用到以下几个属性。

lxFrom和yFrom属性用来指定初始位置。

lxTo和yTo属性用来指定目标位置。

lxBy和yBy用来指定移动量，即组件在x轴向和y轴向上的移动速度。

通常仅仅须要指定初始位置、目标位置或移动量这些值中的随意2个，Flex就会计算第3个值。假设指定全部这3个值，Flex就会忽略xBy和yBy值。假设仅指定xTo和yTo值或xBy和yBy值，那么Flex会将xFrom和yFrom设置为对象的当前位置。

以下的程序演示了怎样使用Move效果。

代码清单MoveSample.mxml

26.          <?xmlversionxmlversion="1.0"?> 

27.           

28.          <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"paddingLeft=  

29.           

30.          "0"  

31.           

32.          layout="absolute"mouseDown="moveImage();"> 

33.           

34.          <mx:Script> 

35.           

36.          <![CDATA[  

37.           

38.          //当按下鼠标时调用该事件  

39.           

40.          privatefunctionmoveImage():void{  

41.           

42.          //停止播放Move效果  

43.           

44.          moveEffect.end();  

45.           

46.          //设置目标位置  

47.           

48.          moveEffect.xTo=mouseX;  

49.           

50.          moveEffect.yTo=mouseY;  

51.           

52.          //播放Move效果  

53.           

54.          moveEffect.play();  

55.           

56.          }  

57.           

58.          ]]> 

59.           

60.          </mx:Script> 

61.           

62.          <mx:Moveidmx:Moveid="moveEffect"target="{img}"/> 

63.           

64.          <mx:Imageidmx:Imageid="img"source="assets/plane.png"/> 

65.           

66.          </mx:Application> 

67.           

代码中将Application的layout属性设置为absolute，当用户在应用程序中不论什么位置上单击鼠标时，调用moveImage方法，该方法中首先停止Move效果，然后依据鼠标单击的位置设置目标位置，最后播放效果。

通常Move效果应用于使用绝对定位的容器（如Canvas）或使用“layout=absolute”的容器（如Application或Panel）中。假设须要将其应用到自己主动布局的容器（如VBox或Grid容器）中，尽管会移动目标对象，但下次容器更新其布局时，会将目标对象移回其原始位置。在这样的情况下，能够将容器的autoLayout属性设置为false来禁止往回移动，但这会禁用容器中全部控件的布局。

8）Flex特效之Pause暂停效果

Pause效果能够实如今指定时间段内不执行不论什么操作的功能。假设将Pause效果加入为Sequence效果的子项，能够创建2个其它效果之间的暂停。

9）Flex特效之Resize大小调整效果

Resize效果用来改变组件的大小。与Move效果类似，Resize效果能够指定初始大小（widthFrom、heightFrom）、目标大小（widthTo、heightTo）和变化量（widthBy、heightBy），其使用规则也与Move效果的初始位置、目标位置和移动量的使用规则类似。以下的代码演示了Resize效果的用法：

1.             
      

2.              

3.             
      

4.              

5.             
     
       
     

6.              

7.             
      

8.              

9.             
      

10.           

11.           

12.           

13.          
      

14.           

另外hideChildrenTargets属性用来隐藏Panel容器的其它子项，当我们对Panel容器中的子项应用Resize效果时，默认情况下Panel会重复计算子项的大小和位置以调整布局，假设将这个属性设为true，能够让Panel容器在播放动画时不做这样的计算，直到播放完毕，这样能够节约系统资源。

10）Flex特效之Rotate旋转效果

Rotate是一种旋转效果，使组件环绕指定的点旋转。Rotate能够指定旋转中心的坐标（originX和originY属性）及旋转的起始角度（angleFrom属性）和终于角度（angleTo属性）。起始旋转角度的有效值范围是0～360，而终于角度则能够是正值也能够是负值，默认值为360。假设angleTo的值比angleFrom的值小，则目标沿逆时针方向旋转，否则以顺时针方向旋转。代码例如以下：

15.          

16.           

17.          duration="2000"/> 

18.           

19.          
      

20.           

另外有时须要设置hideFocusRing属性，以确定在開始播放效果时，效果是否应隐藏对焦环。该属性默认值为true。对于组件而言，对焦环已经被自己主动隐藏。假设Rotate效果应用于那些不是以UIComponent为基类目标对象，就必须隐藏对焦环。

须要注意的是，hideFocusRing属性在以Effect为基类的效果类中，默认值为false，而在以MaskEffect为基类效果类中，默认值为true。

11）Flex特效之SoundEffect声音效果

SoundEffect效果用来播放MP3音频文件。我们能够通过source属性指定要播放的MP3文件，能够直接设置该文件的URL，或是由Embedkeyword嵌入MP3文件的Class对象。

SoundEffect效果的属性包含以下几个。

lautoLoad属性用来设置是否自己主动载入MP3文件，默认值为true。

lbufferTime属性用来设置声音对象的缓冲时间。默认值为1000，单位为毫秒。

lisLoading假设已载入MP3，则该属性为true。

lloops属性用来设置循环次数，默认值为0。

lpanEasingFunction属性用来设置声音均衡效果的缓动函数。

lpanFrom属性和panTo属性用来设置声音对象的起始和终于平移，取值范围在-1.0～1.0之间，当中-1.0表示仅使用左声道，1.0表示仅使用右声道，而0.0表示在2个声道间平均地均衡声音。

lsound属性表示已载入MP3文件的声音对象。

lsource属性表示要播放的MP3文件的URL或类。

lstartTime属性用来设置開始播放时间（以毫秒为单位），默认值为0。

luseDuration属性表示是否依据duration属性指定的时间停止播放，假设为false，则会在MP3完毕播放或循环后停止效果，默认值为true。

lvolumeEasingFunction属性用来设置音量效果的缓动函数。

lvolumeFrom属性和volumeTo属性用来设置声音对象的初始和终于音量，取值范围在0.0～1.0之间，默认值为1。

在以下的代码所看到的的样例中，当应用程序创建完毕后開始播放声音文件，声音从左声道过渡到右声道。

代码清单SoundSample.mxml

1.             
      

2.              

3.             

4.              

5.             creationCompleteEffect="{mySound}"> 

6.              

7.             

8.              

9.             duration="10000" 

10.           

11.          useDuration="false" 

12.           

13.          panFrom="-1"panTo="1"  

14.           

15.          source="@Embed(source='assets/bumperc.mp3')"/> 

16.           

17.           

12）Flex特效之WipeUp、WipeRight、WipeDown、WipeLeft擦除效果

这些类定义了4个方向的擦除效果，通常与showEffect和hideEffect触发器配合使用，使用起来很简便，如以下的样例。

代码清单WipeSample.mxml

1.              <?xmlversionxmlversion="1.0"?> 

2.              

3.             <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 

4.              

5.             <!--定义擦除效果--> 

6.              

7.             <mx:WipeUpidmx:WipeUpid="wipeUpOut"duration="1000"/> 

8.              

9.             <mx:WipeUpidmx:WipeUpid="wipeUpIn"duration="1000"/> 

10.           

11.          <mx:WipeLeftidmx:WipeLeftid="wipeLeftOut"duration="1000"/> 

12.           

13.          <mx:WipeLeftidmx:WipeLeftid="wipeLeftIn"duration="1000"/> 

14.           

15.          <mx:WipeDownidmx:WipeDownid="wipeDownOut"duration="1000"/> 

16.           

17.          <mx:WipeDownidmx:WipeDownid="wipeDownIn"duration="1000"/> 

18.           

19.          <mx:WipeRightidmx:WipeRightid="wipeRightOut"duration="1000"/> 

20.           

21.          <mx:WipeRightidmx:WipeRightid="wipeRightIn"duration="1000"/> 

22.           

23.          <mx:Paneltitlemx:Paneltitle="WipeEffects"> 

24.           

25.          <mx:HBoxwidthmx:HBoxwidth="100%"> 

26.           

27.          <!--向上擦除--> 

28.           

29.          <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon1.png')"visible="{cbx.se  

30.           

31.          lected}"  

32.           

33.          hideEffect="{wipeUpOut}"showEffect="{wipeUpIn}"/> 

34.           

35.          <!--向左擦除--> 

36.           

37.          <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon2.png')"visible="{cbx.se  

38.           

39.          lected}"  

40.           

41.          hideEffect="{wipeLeftOut}"showEffect="{wipeLeftIn}"/> 

42.           

43.          <!--向下擦除--> 

44.           

45.          <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon3.png')"visible="{cbx.se  

46.           

47.          lected}"  

48.           

49.          hideEffect="{wipeDownOut}"showEffect="{wipeDownIn}"/> 

50.           

51.          <!--向右擦除--> 

52.           

53.          <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon4.png')"visible="{cbx.se  

54.           

55.          lected}"  

56.           

57.          hideEffect="{wipeRightOut}"showEffect="{wipeRightIn}"/> 

58.           

59.          </mx:HBox> 

60.           

61.          <mx:ControlBar> 

62.           

63.          <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 

64.           

65.          </mx:ControlBar> 

66.           

67.          </mx:Panel> 

68.           

69.          </mx:Application> 

70.           

执行该程序，效果如图9-2所看到的。

图9-2擦除效果

13）Flex特效之Zoom缩放效果

Zoom效果能够以指定点为中心按比例缩放对象。与Resize效果不同的是，Resize改变目标对象的长宽属性，而Zoom改变的目标对象的缩放比例。在以下的样例中，当鼠标移动到图片上时開始播放Zoom效果，鼠标移出时还原。

代码清单ZoomSample.mxml 

71.          <?xmlversionxmlversion="1.0"encoding="utf-8"?> 

72.           

73.          <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 

74.           

75.          <mx:Script> 

 

转自：

 

因为代码的空格和换行都处理掉了，代码还被隐藏了很多，凑合看吧。。

清楚的去原文地址看吧