Flex tiggerEventEffect(一)

demojava

浏览: 553491 次
性别:
来自: 上海

最近访客更多访客>>

siwei19870827

lauyuhim

luanyong

kyokuryou

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Adobe

Flex 动画

1.模糊效果(Blur)
通过 Blur 效果，您可以对组件应用模糊视觉效果。模糊效果可以柔化图像的细节。
可以生成一些模糊效果，范围从创建一个柔化的、未聚焦的外观到高斯模糊（就像通过半透明玻璃查看图像一样的朦胧的外观）。

 <mx:Blur id="blurImage" duration="1000" 
        blurXFrom="0.0" blurXTo="10.0" 
        blurYFrom="0.0" blurYTo="10.0"/>
    <mx:Blur id="unblurImage" duration="1000" 
        blurXFrom="10.0" blurXTo="0.0" 
        blurYFrom="10.0" blurYTo="0.0"/>

<mx:Image id="flex" source="http://www.baidu.com/img/baidu_sylogo1.gif"
mouseDownEffect="{blurImage}" 
mouseUpEffect="{unblurImage}"/>

blurXFrom : Number起始水平模糊量。
blurXTo : Number 终止水平模糊量。
blurYFrom : Number 起始垂直模糊量。
blurYTo : Number 终止垂直模糊量。

2.动画效果(AnimateProperty)
效果可为组件的属性或样式设置动画效果。可通过设置属性名称、属性的开始值和结束值来设置动画效果。
此效果会将该属性设置为初始值，然后在播放效果期间更新此属性值，直到到达结束值。

	
 <mx:Sequence id="animateScaleXUpDown" >
        <mx:AnimateProperty property="scaleX" fromValue="1" toValue="1.5" duration="1000" />
        <mx:AnimateProperty property="scaleX" fromValue="1.5" toValue="1" duration="1000" />    
    </mx:Sequence>
 <mx:Image id="flex" source="http://www.baidu.com/img/baidu_sylogo1.gif"
            mouseDownEffect="{animateScaleXUpDown}"/>

fromValue 属性用于设置效果的属性的起始值。默认值是目标的当前属性值。
isStyle 属性   如果为 true，则属性特性是一个样式，您可以使用 setStyle() 方法对其进行设置。默认值为 false.
property 属性   目标上要设置动画效果的属性的名称。此属性是必需的。
roundValue 属性   如果为 true，则会将插补的补间值舍入到最接近的整数。如果您设置动画的属性是 int 或 uint 类型，则此属性会很有用。默认值为 false.
toValue 属性   该效果的结束值。默认值是目标的当前属性值。

3.融化(Dissolve)
将组件的动画效果设置为从透明到不透明，或从不透明到透明。

<mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
    <mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
       <mx:CheckBox id="cb1" label="visible" selected="true"/>
         <mx:Image source="http://www.baidu.com/img/baidu_sylogo1.gif" 
                visible="{cb1.selected}"
                hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>

alphaFrom 属性
介于 0.0 和 1.0 之间的初始透明度级别，其中 0.0 表示透明，1.0 表示完全不透明。
如果效果导致目标组件消失，则默认值为目标的 alpha 属性的当前值。如果效果导致目标组件显示，则默认值为 0.0。
alphaTo 属性
介于 0.0 和 1.0 之间的最终透明度级别，其中 0.0 表示透明，1.0 表示完全不透明。
如果效果导致目标组件消失，则默认值为 0.0。如果效果导致目标组件显示，则默认值为目标的 alpha 属性的当前值。
color 属性
一个十六进制值，代表效果显示在目标对象上方的浮动矩形的颜色。默认值是由目标组件的 backgroundColor 样式属性指定的颜色；如果未设置 backgroundColor，则为 0xFFFFFF。
targetArea 属性   要对其播放效果的目标区域。具有溶解效果的叠加层是使用此属性的尺寸绘制的。UIComponents 将在整个组件上创建叠加层。容器会在其内容区域上方创建一个叠加层，而不是在镶边上方创建。
默认值为 null.

4.褪色(Fade)
淡入淡出效果可设置组件的 alpha 属性的动画效果（从透明到不透明或从不透明到透明）。

<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
    <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
            <mx:Image source="http://www.baidu.com/img/baidu_sylogo1.gif" 
            visible="{cb1.selected}"
            hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
<mx:CheckBox id="cb1" label="visible" selected="true"/>

alphaFrom 属性
介于 0.0 和 1.0 之间的初始透明度级别，其中 0.0 表示透明，1.0 表示完全不透明。
如果效果导致目标组件消失，则默认值为目标的 alpha 属性的当前值。如果效果导致目标组件显示，则默认值为 0.0。
alphaTo 属性   最终透明度级别，其中 0.0 表示透明，1.0 表示完全不透明。
如果效果导致目标组件消失，则默认值为 0.0。如果效果导致目标组件显示，则默认值为目标的 alpha 属性的当前值。

5.发光(glow)
通过 Glow 效果，您可以对组件应用视觉 glow 效果。
Glow 效果将 Flash GlowFilter 类用作其实现的一部分。有关详细信息，请参阅 flash.filters.GlowFilter 类。如果对某个组件应用了 Glow 效果，则无法对该组件应用 GlowFilter，也无法再次应用 Glow 效果。
alphaFrom 属性
介于 0.0 和 1.0 之间的初始透明度级别，其中 0.0 表示透明，1.0 表示完全不透明。
alphaTo 属性
介于 0.0 和 1.0 之间的最终透明度级别，其中 0.0 表示透明，1.0 表示完全不透明。
blurXFrom 属性
起始水平模糊量。有效值为 0.0 到 255.0。
blurXTo 属性   终止水平模糊量。有效值为 0.0 到 255.0。
blurYFrom 属性   起始垂直模糊量。有效值为 0.0 到 255.0。
blurYTo 属性   终止垂直模糊量。有效值为 0.0 到 255.0。
color 属性   光晕颜色。默认值为应用程序的 themeColor 样式属性的值。
inner 属性
指定发光是否为内侧发光。值为 true 指示在对象外部边缘的内侧发光。默认值为 false，指示在对象外部边缘的外侧发光。默认值为 false.
knockout 属性
public var knockout:Boolean
指定对象是否具有挖空效果。值为 true 可使对象的填充颜色透明，以显示基础对象的背景颜色。默认值为 false，指示不应用挖空效果。
默认值为 false.
strength 属性
public var strength:Number
印记或跨页的强度。该值越高，压印的颜色越深，而且发光与背景之间的对比度也越强。有效值范围是从 0 到 255。
默认值为 2.

<mx:Glow id="glowImage" duration="1000" 
        alphaFrom="1.0" alphaTo="0.3" 
        blurXFrom="0.0" blurXTo="50.0" 
        blurYFrom="0.0" blurYTo="50.0" 
        color="0x00FF00"/>
    <mx:Glow id="unglowImage" duration="1000" 
        alphaFrom="0.3" alphaTo="1.0" 
        blurXFrom="50.0" blurXTo="0.0" 
        blurYFrom="50.0" blurYTo="0.0" 
        color="0x0000FF"/>
<mx:Image source="http://www.baidu.com/img/baidu_sylogo1.gif" 
            mouseDownEffect="{glowImage}" 
            mouseUpEffect="{unglowImage}"/>

6.光圈(Iris)
Iris 效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。
该效果可以从目标的中心放大遮罩来显示目标，也可以向中心收缩遮罩来隐藏目标。

    <mx:Iris id="irisOut" duration="1000" showTarget="true"/>
    <mx:Iris id="irisIn" duration="1000" showTarget="false"/>
	<mx:Image id="flex" source="http://www.baidu.com/img/baidu_sylogo1.gif"  
            visible="{cb1.selected}"
            showEffect="{irisIn}" hideEffect="{irisOut}"/>
        <mx:CheckBox id="cb1" label="visible" selected="true"/>

duration : Number
效果的持续时间（以毫秒为单位）。
showTarget : Boolean
指定目标组件是可见 (true) 还是不可见 (false)。

7.移动(Move)
Move 效果在指定的时间间隔内随时间更改组件的位置。您可以使用 xFrom 和 yFrom 值指定初始位置，使用 xTo 和 yTo 指定目标位置，或者使用 xBy 和 yBy 指定像素数目来移动组件。
xBy 属性
public var xBy:Number
组件沿 x 轴移动的像素数目。此值可以为负值。
xFrom 属性
public var xFrom:Number
初始位置的 x 坐标。
xTo 属性
public var xTo:Number
目标位置的 x 坐标。
yBy 属性
public var yBy:Number
组件沿 y 轴移动的像素数目。此值可以为负值。
yFrom 属性
public var yFrom:Number
初始位置的 y 坐标。
yTo 属性
public var yTo:Number
目标位置的 y 坐标。

<mx:Move id="myMove" target="{img}"/>
<mx:Image id="img" source="http://www.baidu.com/img/baidu_sylogo1.gif"/>

8.暂停(Pause)
Pause 效果在对效果进行排序时很有用。它在指定时间段内不执行任何操作。如果将 Pause 效果添加为 Sequence 效果的子项，可以创建两个其它效果之间的暂停。
duration : Number
效果的持续时间（以毫秒为单位）。

<mx:Script>
	<![CDATA[
		import mx.effects.easing.*;         
	]]>
</mx:Script> 
 <mx:Sequence id="movePauseMove">
        <mx:Move xBy="150" duration="1000" easingFunction="Bounce.easeOut"/>
        <mx:Pause duration="1000"/>
        <mx:Move xBy="-150" duration="1000" easingFunction="Bounce.easeIn"/>
    </mx:Sequence>
    
        <mx:Image
            source="http://www.baidu.com/img/baidu_sylogo1.gif" 
            mouseDownEffect="{movePauseMove}"/>

9.改变大小(Resize)
Resize 效果在指定的时间间隔更改组件的宽度或高度，或同时更改这两者。
heightBy 属性
public var heightBy:Number
组件高度所修改的像素数目。值可以为负数。
heightFrom 属性
public var heightFrom:Number
初始高度（以像素为单位）。如果省略，Flex 将使用当前高度。
heightTo 属性
public var heightTo:Number
最终高度（以像素为单位）。
hideChildrenTargets 属性
public var hideChildrenTargets:Array
Panel 容器的 Array。这些 Panel 容器的子项在播放 Resize 效果时处于隐藏状态。
您可以使用数据绑定语法在 MXML 中设置此属性，如下例所示，其中 panelOne 和 panelTwo 是应用程序中两个 Panel 容器的名称：

<mx:Resize id="e" heightFrom="100" heightTo="400"
  hideChildrenTargets="{[panelOne, panelTwo]}" />

widthBy 属性
public var widthBy:Number
组件宽度所修改的像素数目。值可以为负数。
widthFrom 属性
public var widthFrom:Number
初始宽度（以像素为单位）。如果省略，Flex 将使用当前宽度。
widthTo 属性
public var widthTo:Number
最终宽度（以像素为单位）。
hideChildrenTargets 属性
public var hideChildrenTargets:Array
Panel 容器的 Array。这些 Panel 容器的子项在播放 Resize 效果时处于隐藏状态。
您可以使用数据绑定语法在 MXML 中设置此属性，如下例所示，其中 panelOne 和 panelTwo 是应用程序中两个 Panel 容器的名称：
<mx:Resize id="e" heightFrom="100" heightTo="400"
hideChildrenTargets="{[panelOne, panelTwo]}" />
widthBy 属性
public var widthBy:Number
组件宽度所修改的像素数目。值可以为负数。
widthFrom 属性
public var widthFrom:Number
初始宽度（以像素为单位）。如果省略，Flex 将使用当前宽度。
widthTo 属性
public var widthTo:Number
最终宽度（以像素为单位）。

  

<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"/>
    <mx:Resize id="contract" target="{img}" widthTo="30" heightTo="60"/>
  <mx:Image id="img" width="30" height="60"
            source="http://www.baidu.com/img/baidu_sylogo1.gif"/>
    <mx:Button label="Expand" click="expand.end(); expand.play();"/>
            <mx:Button label="Contract" click="contract.end(); contract.play();"/>

10旋转效果(Rotate)
Rotate 效果可围绕指定的点旋转组件。您可以指定旋转中心的坐标以及旋转的起始角度和最终角度。既可以指定正角度值，也可以指定负角度值。
angleFrom 属性
public var angleFrom:Number = 0
目标对象的起始旋转角度（以度表示）。有效值范围是 0 到 360。
默认值为 0.
angleTo 属性
public var angleTo:Number = 360
目标对象结束旋转时的角度（以度表示）。此值可以是正值也可以是负值。
如果 angleTo 的值比 angleFrom 的值小，则目标沿逆时针方向旋转。否则，它将以顺时针方向旋转。如果希望对目标进行多次旋转，请将此值设置为较大的正数或较小的负数。
默认值为 360.
hideFocusRing 属性
hideFocusRing:Boolean []
确定在开始播放效果时，效果是否应隐藏对焦环。目标本身负责实际隐藏对焦环。
默认值为 true.
实现
    public function get hideFocusRing():Boolean
    public function set hideFocusRing(value:Boolean):void
originX 属性
public var originX:Number
旋转中心点的 x 位置。目标将围绕此点进行旋转。有效值介于 0 和目标的宽度之间。
默认值为 0.
originY 属性
public var originY:Number
旋转中心点的 y 位置。目标将围绕此点进行旋转。有效值介于 0 和目标的高度之间。
默认值为 0.

<mx:Script>
	<![CDATA[
            [Bindable]
            public var angle:int=0;
            private function rotateImage():void {
                rotate.end();
                angle += 45;
                rotate.play();
            }
	]]>
</mx:Script> 
	<mx:Rotate id="rotate" angleFrom="{angle-45}" angleTo="{angle}" target="{myVB}"/>
        <mx:VBox id="myVB" width="50%" horizontalAlign="center">
            <mx:Image id="img" 
                source="http://www.baidu.com/img/baidu_sylogo1.gif"/>
        </mx:VBox>
            <mx:Button label="Rotate 45 Degrees" click="rotateImage();"/>

11声音效果(SoundEFfect)
SoundEffect 类用于播放 MP3 音频文件。例如，可以设置在用户单击 Button 控件时播放一种声音。此效果允许您重复播放声音、选择源文件以及控制音量和平移。

   <mx:SoundEffect id="mySounds" source="@Embed(source='deo.mp3')" target="flex"/>

    <mx:Panel title="Sound Effect Example" width="75%" height="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Label width="100%" color="blue" 
            text="Click on the phone to hear the sound effect."/>

        <mx:Image id="flex" source="http://www.baidu.com/img/baidu_sylogo1.gif "
            mouseDownEffect="{mySounds}"  click="{mySounds}"/>
    </mx:Panel>

12擦除效果(WipeLeft,WipeRight,WipeUP,WipeDown)
duration : Number
效果的持续时间（以毫秒为单位）。
xFrom : Number
遮罩初始位置的 x 坐标。

<mx:WipeUp id="wipeUpOut" duration="1000"  xFrom="1"/>
    <mx:WipeUp id="wipeUpIn" duration="1000"  xFrom="1"/>
    <mx:WipeLeft id="wipeLeftOut" duration="1000"/>
    <mx:WipeLeft id="wipeLeftIn" duration="1000"/>
    <mx:WipeDown id="wipeDownOut" duration="1000"/>
    <mx:WipeDown id="wipeDownIn" duration="1000"/>
    <mx:WipeRight id="wipeRightOut" duration="1000"/>
    <mx:WipeRight id="wipeRightIn" duration="1000"/>
<mx:Panel title="Wipe Effects">     
      <mx:HBox width="100%">    
          <!--向上擦除-->
<mx:Image source="http://www.baidu.com/img/baidu_sylogo1.gif" visible="{cbx.selected}" hideEffect="{wipeUpOut}" showEffect="{wipeUpIn}"/>
<!--向左擦除-->
<mx:Image source="http://www.baidu.com/img/baidu_sylogo1.gif" visible="{cbx.selected}" hideEffect="{wipeLeftOut}" showEffect="{wipeLeftIn}"/>
          <!--向下擦除-->
<mx:Image source="http://www.baidu.com/img/baidu_sylogo1.gif" visible="{cbx.selected}" hideEffect="{wipeDownOut}" showEffect="{wipeDownIn}"/>
          <!--向右擦除-->
<mx:Image source="http://www.baidu.com/img/baidu_sylogo1.gif" visible="{cbx.selected}" hideEffect="{wipeRightOut}" showEffect="{wipeRightIn}"/>
      </mx:HBox>
      <mx:ControlBar>
          <mx:CheckBox id="cbx" label="visible" selected="true"/>
      </mx:ControlBar>

13图片缩放(Zoom)
Zoom 效果放大或缩小中心点上的对象。

<mx:Script>
	<![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);
                }
            }
	]]>
</mx:Script> 
	<mx:Zoom id="zoomAll" zoomWidthTo="1" zoomHeightTo="1" zoomWidthFrom=".5" zoomHeightFrom=".5"  />
        <mx:Image id="img" source="http://www.baidu.com/img/baidu_sylogo1.gif" scaleX=".5" scaleY=".5" rollOver="doZoom(event)" rollOut="doZoom(event)" ></mx:Image>

captureRollEvents : Boolean
如果为 true，将阻止 Flex 在鼠标未发生过移动的情况下调度 rollOut 和 rollOver 事件。 Zoom
   className : String
[] 效果类的名称，如“Fade”。 Effect
   constructor : Object
对类对象或给定对象实例的构造函数的引用。 Object
   customFilter : EffectTargetFilter
指定一个 EffectTargetFilter 类型的自定义滤镜对象，效果将使用此对象来确定播放效果的目标。 Effect
   duration : Number
效果的持续时间（以毫秒为单位）。 Effect
   easingFunction : Function = null
动画的缓动函数。 TweenEffect
   effectTargetHost : IEffectTargetHost
一个属性，您可以通过设置此属性访问数据效果基于列表的目标控件。 Effect
   filter : String
指定用于过滤效果目标的算法。 Effect
   hideFocusRing : Boolean
确定在开始播放效果时，效果是否应隐藏对焦环。 Effect
   instanceClass : Class
一个 Class 类型的对象，用于指定此效果类的效果实例类。 Effect
   isPlaying : Boolean
[] 一个只读标志，如果当前正在播放效果的任一实例，则为 true；否则，则为 false。 Effect
    originX : Number
代表当效果目标位于支持绝对定位的容器（如 Canvas 容器）中时缩放原点 x 位置的数字。 Zoom
    originY : Number
代表当效果目标位于支持绝对定位的容器（如 Canvas 容器）中时缩放原点 y 位置的数字。 Zoom
   perElementOffset : Number
在效果的第一个目标之后，其它效果目标的附加延迟（以毫秒为单位）。 Effect
   prototype : Object
[] 对类或函数对象的原型对象的引用。 Object
   relevantProperties : Array
一个属性名称 Array，执行过滤时将使用这些名称。 Effect
   relevantStyles : Array
一个样式名称 Array，执行过滤时将使用这些名称。 Effect
   repeatCount : int = 1
效果的重复次数。 Effect
   repeatDelay : int = 0
重复播放效果前需要等待的时间（以毫秒为单位）。 Effect
   startDelay : int = 0
开始播放效果前需要等待的时间（以毫秒为单位）。 Effect
   suspendBackgroundProcessing : Boolean = false
如果为 true，则在播放效果时阻止所有背景处理。 Effect
   target : Object
要应用此效果的 UIComponent 对象。 Effect
   targets : Array
一个 UIComponent 对象 Array，这些对象都是效果的目标。 Effect
   triggerEvent : Event
如果触发了某个效果，则此项目是由 EffectManager 传递给此 Effect 的 Event 对象；如果 EffectManager 当前没有播放此效果，则为 null。 Effect
    zoomHeightFrom : Number
一个介于 0.01 和 1.0 之间的百分比数值，代表开始进行高度缩放时的缩放比例。 Zoom
    zoomHeightTo : Number
一个介于 0.01 和 1.0 之间的百分比数值，代表完成高度缩放时的缩放比例。 Zoom
    zoomWidthFrom : Number
一个介于 0.01 和 1.0 之间的百分比数值，代表开始进行宽度缩放时的缩放比例。 Zoom
    zoomWidthTo : Number
一个介于 0.01 和 1.0 之间的百分比数值，代表完成宽度缩放时的缩放比例。

分享到：

FlextiggerEventEffect(二) | as IdeferredInstance 创建模板

2011-09-24 09:42
浏览 1205
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论