Flex 特效一览

1：glow(发光)

代码：

<mx:Glow id="glow" duration="1000"

alphaFrom="0.6" alphaTo="0.2"

blurXFrom="0.0" blurXTo="50.0"

blurYFrom="0.0" blurYTo="50.0"

color="0xffffff"/>

duratuion 是特效的时间 1000 毫秒

alphaFrom 是透明度从 0.6 开始

alphaTo 是透明度到 0.2

blurXFrom 是X放向的模糊开始位置(相对于控件的)

blurXTo 是X放向的模糊结束位置(相对于控件的)

blurYFrom 是Y放向的模糊开始位置(相对于控件的)

blurYTo 是Y放向的模糊结束位置(相对于控件的)

color 是发光的颜色

作用到控件：

<mx:Image source="../assets/zh_cn_msdn_T_20070606.png" rollOverEffect="{glow}" id="back"/>

rollOverEffect 是鼠标经过时触发。

效果图参看：

2：Blur(模糊)

代码：

<mx:Blur id="blurImage" duration="1000"

blurXFrom="0.0" blurXTo="10.0"

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

duratuion 是特效的时间 1000 毫秒

blurXFrom 是X放向的模糊开始位置(相对于控件的)

blurXTo 是X放向的模糊结束位置(相对于控件的)

blurYFrom 是Y放向的模糊开始位置(相对于控件的)

blurYTo 是Y放向的模糊结束位置(相对于控件的)

作用到控件：

<mx:Image source="../assets/zh_cn_virtual_tab1_090803.png" mouseDownEffect="{blurImage}"

mouseUpEffect="{unblurImage}"

toolTip="Welcome"/>

mouseDownEffect 是鼠标按下时的特效。

mouseUpEffect 是鼠标松开时的特效

效果图参看：

3：Sequence (顺序) Bounce(弹跳)

代码：

import mx.effects.easing.*;

<mx:Sequence id="movePauseMove">

<mx:Move yBy="-150" duration="1000" easingFunction="Bounce.easeOut"/>

<mx:Move yBy="150" duration="1000" easingFunction="Bounce.easeIn"/>

</mx:Sequence>

yBy 是作用在Y方向。

duratuion 是特效的时间 1000 毫秒

easingFunction 是松开动作

Bounce.easeOut 是跳出的动作

Bounce.easeIn 是跳回的动作

作用到控件：

<mx:Image source="../assets/zh_cn_ptn_090722.png"

mouseDownEffect="{movePauseMove}"

id="image4"/>

mouseDownEffect 是鼠标按下时的特效。

效果参看：

4：Zoom(放大)

代码：

<mx:Zoom id="zoomAll"

zoomWidthFrom="1" zoomWidthTo="1.5"

zoomHeightFrom="1" zoomHeightTo="1.5" />

zoomWidthFrom 放大的宽度从 1 倍开始

zoomWidthTo 放大的宽度到 1.5 倍

zoomHeightFrom 放大的高度从 1 倍开始

zoomHeightTo 放大的高度到 1.5 倍

<![CDATA[

import flash.events.MouseEvent;

public function doZoom(event:MouseEvent):void {

if (zoomAll.isPlaying) { //判断动作是否正在进行中

zoomAll.reverse(); //如果是就返回(如果是放大就变成缩小)

}

else {

zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false); //判断事件是否是 鼠标移出事件，如果是就为true否则的话就为false

}

}

]]>

作用到控件：

<mx:Image source="../assets/zh_cn_ptn_090722.png"

rollOver="doZoom(event)"

rollOut="doZoom(event)"

id="image4"/>

rollOver：鼠标经过事件。

rollout：鼠标移出事件。

参看效果图：

Flex特效之Fade淡入淡出效果

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

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

<mx:Fadeidmx:Fadeid="fadeOut"duration="1000"alphaFrom="1.0"alphaTo="0.0"/> <mx:Fadeidmx:Fadeid="fadeIn"duration="1000"alphaFrom="0.0"alphaTo="1.0"/> <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> <mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}" hideEffect="{fadeOut}"showEffect="{fadeIn}"/>

5）Flex特效之Glow发光效果

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

<mx:Glowidmx:Glowid="glowImage"duration="1000"alphaFrom="1.0"alphaTo="0.3" blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0"color="0x 00FF00"/> <mx:Imagesourcemx:Imagesource="assets/plane.png"mouseDownEffect="{glowImage}"/>

6）Flex特效之Iris虹效果

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

<mx:Irisidmx:Irisid="irisOut"duration="1000"showTarget="true"/> <mx:Irisidmx:Irisid="irisIn"duration="1000"showTarget="false"/> <mx:Imageidmx:Imageid="Flex"source="assets/plane.png"visible="{cbx.selected}" showEffect="{irisIn}"hideEffect="{irisOut}"/> <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

<?xmlversionxmlversion="1.0"?> <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"paddingLeft= "0" layout="absolute"mouseDown="moveImage();"> <mx:Script> <![CDATA[ //当按下鼠标时调用该事件 privatefunctionmoveImage():void{ //停止播放Move效果 moveEffect.end(); //设置目标位置 moveEffect.xTo=mouseX; moveEffect.yTo=mouseY; //播放Move效果 moveEffect.play(); } ]]> </mx:Script> <mx:Moveidmx:Moveid="moveEffect"target="{img}"/> <mx:Imageidmx:Imageid="img"source="assets/plane.png"/> </mx:Application>

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

通常Move效果应用于使用绝对定位的容器（如Canvas）或使用“layout=absolute”的容器（如Application或Panel）中。如果需要将其应用到自动布局的容器（如VBox或Grid容器）中，虽然会移动目标对象，但下次容器更新其布局时，会将目标对象移回其原始位置。在这种情况下，可以将容器的autoLayout属性设置为false来禁止往回移动，但这会禁用容器中所有控件的布局。