例子学习网址：http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

UIComponent 是所有组件的父类，定义了组件共有的属性和方法，其中包括行为触发器：

触发器名词对应的事件名词事件描述
addedEffectadded当被添加到容器中时触发
createCompleteEffectcreateComplete当组件完成绘制时触发
removedEffectremoved当组件从容器中删除时触发
focusInEffectfocusIn当组件获得焦点时触发
focusOutEffectfocusOut当组件失去焦点时触发
hideEffecthide当组件变成不可见时触发
showEffectshow当组件变成可见时触发
mouseDownEffectmouseDown当鼠标在组件上按下时触发
mouseUpEffectmouseUp当鼠标在组件上松开时触发
rollOutEffectrollOut当鼠标在组件上移开时触发
rollOverEffectrollOver当鼠标移到组件上时触发
moveEffectmove当组件被移动时触发
resizeEffectresize当组件大小改变时触发

所有的动画效果都是Effcet 类的子类，位于 mx.Effects 包中：

Effect 名称动画效果描述
AnimateProperty针对组件的一个以数字计算的属性，比如长度，
按给定的起始值逐渐改变属性的大小。
Blur模糊效果。可以让组件变得模糊，核心由 BlurFilter 滤镜完成。
当对组件使用了该效果，不可再使用 Blur 滤镜和其他模糊效果。
Fade淡入淡出效果。
注意：当目标对象中包括文字时，必须使用嵌入字体。
Dissolve溶解效果，主要是在目标对象上增加覆盖层，改变覆盖层的透明度，达到让目标消失或出现的效果。
和 Fade 效果相比，它可以设置覆盖层的颜色。
注意：当目标对象中包括文字时，必须使用嵌入字体。
Glow发光效果，使用了GlowFilter 滤镜。
当对组件使用了该效果，不可再使用GlowFilter 滤镜和其他发光效果。
Iris彩虹效果，组件以矩形方式，从中心放大或缩小到中心。
属于遮罩效果。
Move移动效果，移动组件的坐标，只有当组件位于支持绝对定位的容器中时才有效。
Pause

停止，什么都不改变，没有动画。
一般用于复合动画效果中，用来分割前后两个动画。

Resize尺寸调整效果，改变组件的长和宽。
当改变组件的长和宽时，处于同一个容器的其他组件的大小也可能会相应改变，如果该容器使用了绝对定位则不会发生这种情况。
Rotate旋转效果。
SoundEffect注意：当目标对象中包括文字时，必须使用嵌入字体。
WipeLeft
WipeRight
WipeUp
WipeDown		擦除效果，属于遮罩效果。
对应不同方向。
Zoom放缩效果，以组件为中心进行放缩。

所有动画对象都继承 Effect 对象。抽象类，定义了以下方法来控制动画的播放流程：

  • play(targets:Array = null, playReversedFromEnd:Boolean=false)：开始播放，targets：一组目标对象，这将覆盖原来的目标对象。playReversedFromEnd：是否逆向播放。

  • end()：停止播放动画

  • pause()：暂停动画

  • resume()：当暂停时，继续播放

  • reverse()：逆向播放动画，如果动画正在播放，则从当前位置开始逆向播放。
    我们也可以使用AS来完成行为的创建：

列举一个Blur Effect例子

view source
print?
01<?xml version="1.0"encoding="utf-8"?>
02<!-- Simple example to demonstrate the Blur effect. -->
03<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
04
05<mx:Blur id="blurImage"duration="1000"
06blurXFrom="0.0"blurXTo="10.0"
07blurYFrom="0.0"blurYTo="10.0"/>
08<mx:Blur id="unblurImage"duration="1000"
09blurXFrom="10.0"blurXTo="0.0"
10blurYFrom="10.0"blurYTo="0.0"/>
11
12<mx:Panel title="Blur Effect Example"width="75%"height="75%"
13paddingTop="10"paddingLeft="10"paddingRight="10"paddingBottom="10">
14
15<mx:Text width="100%"color="blue"
16text="Click and hold the mouse on the p_w_picpath to see blurImage effect. Release the mouse to see the unblurImage effect."/>
17
18<mx:Image id="flex"source="@Embed(source='assets/Nokia_6630.png')"
19mouseDownEffect="{blurImage}"
20mouseUpEffect="{unblurImage}"/>
21
22</mx:Panel>
23</mx:Application>