使用行为

使用行为

 

Adobe Flex行为可以让我们为了响应用户或是程序的动作而在程序中添加的动画效果。一个行为是一个触发器和一个效果的集合。触发器是一个动作，例如在组件上点击鼠标，一个组件获得焦点，或者是一个组件变为可见。一个效果是在一段时间内发生在目标组件上的可见或是声音上的变化，这个时间通常以毫秒计。

在这一节，我们将会显示如何在我们的Flex用户界面上添加行为。我们将演示如何使用MXML来创建行为，如何从不同的组件调用同一个效果，以及如何组合多个效果来创建一个组合效果。

 

设置工程

在我们开始之前，我们要确保完成下面的任务：
创建了Lessons工程
打开自动编译选项

 

创建一个行为

我们决定来创建一个当用户点击时按钮会发光的行为。我们希望这个光是绿色，并且持续1.5秒，并且用一个浅绿色来标识已经点击了这个按钮。

1 在浏览视图中选择Lessons工程，创建一个名为Behaviors.mxml的程序文件。

2 将Behaviors.mxml文件设置为默认编译的文件。

3 在MXML编辑器的代码模式下，通过添加下面的代码来定义一个Glow效果：
<mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/>

Glow将会由完全不透明变为部分透明，但不是会是完全透明。当效果结束时将会持续一个浅绿色。

4 在设计模式下，添加一个Panel容器，并且设置如下的属性：
Width: 200
Height: 300
X: 10
Y: 10

5 向Panel容器中添加一个Button控件，并且设置如下的属性：
ID: myButton
Label: View
X: 40
Y: 60

6 在属性视图中，点击工具栏中的视图类，将属性列为一个表，然后可以定位属性的效果类。

这个类别列出了Button控件的触发器。

7 我们可以通过下面的代码来将Glow效果赋给按钮控件
<mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}"/>

8 保存文件，程序代码如下所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Glow id="buttonGlow" color="0x99FF66"
        alphaFrom="1.0" alphaTo="0.3"
        duration="1500"/>
    <mx:Panel x="10" y="10" width="200" height="300" layout="absolute">
        <mx:Button x="40" y="60" label="View" id="myButton"
            mouseUpEffect="{buttonGlow}"/>
    </mx:Panel>
</mx:Application>

9 运行程序。程序运行效果如下：

 

从不同的组件调用效果

与组件触发器不同，我们可以使用Flex事件来调用效果。这个功能就可以使得我们在一个组件上调用效果在不同的组件上执行。例如，我们可以使用一个Button控件的点击来引发一个在TextArea上的褪变效果。

当用户点击我们的程序View按钮时，我们希望显示一个Label组件还用模糊的文本显示一系列数字。

1 在设计模式下，在View按钮下插入一个Label控件，并且设置如下的属性：
ID: myLabel
Text: 4 8 15 16 23 42
X: 40
Y: 100

2 切换到代码模式，通过添加下面的代码来定义一个Blur效果。
<mx:Blur id="numbersBlur"
    blurYFrom="10.0" blurYTo="0.0"
    blurXFrom="10.0" blurXTo="0.0"
    duration="2000"/>

在这个标签属性里指明了Blur效果水平与垂直的开始与结束数量。

3 在<mx:Blure>标签中，指明名为myLabel的控件为效果目标：
<mx:Blur id="numbersBlur" target="{myLabel}"
    blurYFrom="10.0" blurYTo="0.0"
    blurXFrom="10.0" blurXTo="0.0"
    duration="2000"/>

在这里我们希望这个效果在名为myLabel的控件上执行。

4 在<mx:Button>标签中，指明当一个点击事件发生时执行numbersBlur效果：
<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="numbersBlur.play();"/>

当用户点击Button控件时，程序通过调用效果的play()方法来调用这个效果。
因为numbersBlur效果的目标是myLabel控件，所以这个效果会在Label上执行，而不是Button控件。

5 通过设置Label的visible属性来将设置为不可见，如下所示：
<mx:Label id="myLabel" x="40" y="100" text="4 8 15 16 23 42" visible="false"/>

6 当用户点击Button时设置Label为可见，如下所示：
<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="numbersBlur.play(); myLabel.visible=true;"/>

最终的程序代码如下所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Glow id="buttonGlow" color="0x99FF66"
        alphaFrom="1.0" alphaTo="0.3"
        duration="1500"/>
    <mx:Blur id="numbersBlur" target="{myLabel}"
        blurYFrom="10.0" blurYTo="0.0"
        blurXFrom="10.0" blurXTo="0.0"
        duration="2000"/>
    <mx:Panel x="10" y="10" width="200" height="300" layout="absolute">
        <mx:Button x="40" y="60" label="View" id="myButton"
            mouseUpEffect="{buttonGlow}"
            click="numbersBlur.play(); myLabel.visible=true;"/>
        <mx:Label x="40" y="100" text="4 8 15 16 23 42" id="myLabel"
            visible="false"/>
    </mx:Panel>
</mx:Application>

7 保存文件

8 运行程序，程序的运行效果如下：

创建一个复合效果

我们可以使得当数字获得焦点时，Label组件向下移动20象素。换句话说，我们可以将我们的Blur效果与Move效果进行组合。

Flex支持将多个效果组合成为一个复合效果。我们可以使用<mx:Parallel>或是<mx:Sequence>标签来定义一个复合效果，这取决于我们是希望这些效果同时执行还是顺序执行。在这我们这个程序中，我们希望Blur与Move效果同时执行。

1 在代码模式下，输入下面的代码来开始组合效果：
<mx:Parallel id="BlurMoveShow">
</mx:Parallel>

2 将我们代码中的<mx:Blur>标签的内容粘贴到<mx:Parallel>标签中。

3 进行如下的代码设置：
<mx:Parallel id="BlurMoveShow" target="{myLabel}">

4 定义我们新的Move效果：
<mx:Move id="numbersMove" yBy="20" duration="2000"/>

在这里我们希望我们的Label标签在2秒内向下移动20象素。

我们的<mx:Parallel>如下所示：
<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>

5 在我们的<mx:Button>标签中进行如下的更改设置：
<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="BlurMoveShow.play(); myLabel.visible=true;"/>

6 保存文件，最终的程序代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Glow id="buttonGlow" color="0x99FF66"
        alphaFrom="1.0" alphaTo="0.3"
        duration="1500"/>
    <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:Panel x="10" y="10" width="200" height="300" layout="absolute">
        <mx:Button x="40" y="60" label="View" id="myButton"
            mouseUpEffect="{buttonGlow}"
            click="BlurMoveShow.play(); myLabel.visible=true;"/>
        <mx:Label x="40" y="100" text="4 8 15 16 23 42" id="myLabel"
            visible="false"/>
    </mx:Panel>
</mx:Application>

7 运行程序。