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）Flex特效之Resize大小调整效果

Resize）Flex特效之Rotate旋转效果

Rotate）Flex特效之SoundEffect声音效果

SoundEffect）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>

转自：http://www.cnblogs.com/csharponworking/archive/2011/04/07/2008826.html

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

清楚的去原文地址看吧

Flex里的特效的更多相关文章

  1. flex里InputText不能输入中文

    最近做项目都没做任何的更新,今天突然遇到在flex里的InputText无法进行中文输入,晚上查找了下资料,很多原因说是flashplayer的一个BUG. 在网上找到两种解决办法: 1.会出现这种情 ...

  2. Flex里的命名空间，fx、mx、s【转】

    Flex 4带给我们的,是全新的命名空间.了解这些命名空间必定是一件好事情.Flex 4有三个非常重要的命名空间,分别是: xmlns:fx=”http://ns.adobe.com/mxml/200 ...

  3. Flex里的fx s mx

    笔记是从其他地方整合的,仅供参考 原来flex build 4有三个命名空间fx,mx,s,分别对应一下三个: •xmlns:fx="http://ns.adobe.com/mxml/200 ...

  4. 如何取消FLEX里模态窗口的毛玻璃效果

    在Flex里面,比如使用PopUpManager.createPopUp(this,TipWindow,false)第三个参数设成true 会出现毛玻璃效果让CPU飙升,可不可以改变模态窗口的效果,不 ...

  5. Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能

    其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件 监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...

  6. DarkStone - 跨平台移动应用开发之 Flex 的崛起

    我的好友Ds 发布一个flex的消息.我帮忙转发 DarkStone - 跨平台移动应用开发之 Flex 的崛起 (2013-08-20 22:28:32)     此文章由 周戈 (DarkSton ...

  7. FLEX的动画

    1.使用自带效果 在Flex里面不像在Flash里面随意制作动画了,Flex更趋向于应用程序,而不是动画制作了,所以没有了时间轴的概念.在Flex中使用动画效果,可以用Flex自带的Effect,或者 ...

  8. Flex Excel下载

    最近做Flex里的Excel下载,用as3xls进行Excel导出后,Excel修改编辑后老出现:不能以当前格式保存...若要保存所做的更改,请单击“确定”,然后将其另存为最新的格式. 最后通过JAV ...

  9. Flex Metadata tags 元数据标签

    1.[Alternative] [可替换] 标明此类可以被参数中的类替换,版本号说明发生替换的版本. [Alternative]和[Deprecated] 不同.如果是[不建议使用]的类,以后的版本可 ...

随机推荐

  1. bat文件无法双击运行

    问题: win7系统下新建txt文件,编辑脚本内容后,保存为test.bat.每次双击它,只会默认以txt格式打开它,而不是运行它. 解决: 1. 双击打开“我的电脑”,然后在“工具”下选择“文件夹选 ...

  2. 集合中Set_List必须覆盖 hashCode（）与 equals（）

    集合中Set_List必须覆盖 hashCode()与 equals() @Override public int hashCode() { System.out.println("==== ...

  3. 上传App时遇IDFA错误问题

    今天上传App时遇到下图1的情况,很纳闷,又是苹果新规. 通常是第三方的库引起啦,马上想到百度统计了,打开SDK下载页面看看简单介绍,里面有讲到这个问题了. 图2就是这次改动的原因. 更新SDK,之前 ...

  4. SoccerLeagueDB

    create table if not exists League ( lid int primary key auto_increment,      lyear int not null,   s ...

  5. poj1185炮兵阵地

    #include <iostream> #include <cstdio> #include <cmath> #include <algorithm> ...

  6. iOS 购物—个人中心界面

    上一个QQ界面真实无心插柳,想不到一个新手的普通界面可以上首页推荐,在这谢谢那些csdn工作者对新手的支持,谢谢soledadzz  的特别推荐: 以下这个界面也是师傅锻炼我的题目主要是让我熟悉tab ...

  7. Android该系统提供的服务--Vibrator(振子)

    Android该系统提供的服务--Vibrator(振子) --转载请注明出处:coder-pig Vibrator简单介绍与相关方法: watermark/2/text/aHR0cDovL2Jsb2 ...

  8. 学派Delphi方法（推荐）——————————【Badboy】

    Delphi是一个新的可视化编程环境, 提供了一种方便.快捷的Windows使用顺序开发工具. 它使用了MicrosoftWindows图形用户界面的很多先进特性和设计思想. 本文就给读者引见学Del ...

  9. UVA 11248 - Frequency Hopping（网络流量）

    UVA 11248 - Frequency Hopping 题目链接 题意:给定一个网络,如今须要从1到N运输流量C,问是否可能,假设可能输出可能,假设不可能,再问能否通过扩大一条边的容量使得可能,假 ...

  10. Objective-C代码块语法(block)使用

    和其它变量本质上相似的代码块.所不同的是,数据存储代码块是主体的函数. 使用的代码块被,你可以像打电话一样等标准功能,传入参数的数量,并获得返回值. 插入符号(^)语法标记块.我们熟悉的参数按照规约定 ...