Flex学习进阶-使用动态效果

 

首先为这个实验做个UI代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Panel x="10" y="10" width="200" height="300" layout="absolute">
        <mx:Button x="40" y="60" label="View" id="myButton" />
        <mx:Label x="40" y="100" text="4 8 15 16 23 42" id="myLabel" visible="false"/>
    </mx:Panel>
</mx:Application>
然后我们为按钮添加一个效果，步骤如下
1.定义一个动态效果标签
<mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3"  duration="1500"/>
2.将其和按钮进行绑定
<mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}" />
另外一种方法就是可以在设计模式下右侧的面板中的Flex Properties> Effects > mouseUpEffect中的值填写 {buttonGlow}实现效果
3.运行一下吧，然后做更棒的效果改变

现在来为Label作个淡出的效果，一样首先也是添加效果标签，代码如下：
        <mx:Blur id="numbersBlur"
            blurYFrom="10.0" blurYTo="0.0"
            blurXFrom="10.0" blurXTo="0.0"
            duration="2000" target="{myLabel}"/>//具体的参数不在这里面详细说明
然后将这个效果的发生添加一个触发事件，触发器自然就是按钮喽，要在按钮里面做一下小的改动：
<mx:Button x="40" y="60" label="View" id="myButton"
            mouseUpEffect="{buttonGlow}"
            click="numbersBlur.play(); myLabel.visible=true;"/>
然后发布，秀一下效果看看。

上面的做完了肯定会有和我一样不满足的朋友问，怎么做多个动作的实现，下面有两个标签可以用于实现效果：
<mx:Parallel> 和 <mx:Sequence> 从字面上的意思也能够看出来有什么区别，不过还是自己来试一下吧。


<mx:Parallel id="BlurMoveShow" target="{myLabel}">
    <mx:Blur id="numbersBlur" 
        blurYFrom="10.0" blurYTo="0.0" 
        blurXFrom="10.0" blurXTo="0.0"
        duration="2000"/>
    <mx:Move id="numbersMove" yBy="20" duration="2000" />
</mx:Parallel>

然后再试试另一个标签
<mx:Sequence id="BlurMoveShow" target="{myLabel}">
    <mx:Blur id="numbersBlur" 
        blurYFrom="10.0" blurYTo="0.0" 
        blurXFrom="10.0" blurXTo="0.0"
        duration="2000"/>
    <mx:Move id="numbersMove" yBy="20" duration="2000" />
</mx:Sequence>
 

发现区别了吧，那就是 <mx:Parallel>是同时执行里面的动作而 <mx:Sequence>是按照标签的排列顺序由上至下来执行的。