第四章 第六节 使用行为
Adobe Flex 行为使你可以为应用程序添加动画和运动，来对用户和编程活动作出反应。
行为，是由一个触发器和一种效果组合而成。触发器是一种活动，如鼠标在组件上点击，组
件获得焦点，或组件可见。效果是在目标组件上的可视性或可听性上的某种变化，以毫秒计
算。效果的例子包括淡出，尺寸变化，或者组件发生移动。
本节将教授你如何在Flex 用户界面中添加行为。具体内容包括如何使用MXML 去创建
行为，如何从不同的组件调用一种效果，以及如何组合多种效果以产生合成效果。
创建一个行为
你打算创建一个行为，当按钮被用户点击时变成绿色，维持一秒半以后，离开按钮时变
成淡绿色以表明它已经被点击过。
1. 在导航视图中选择Lessons 项目，选择File > New > MXML Application 并创建名叫
Behaviors.mxml 的文件。
2. 将Behaviors.mxml 设置为被编译的默认文件，并在关联菜单中选择Set As Default
Application。
3. 在MXML 编辑器源代码模式中，在<mx:Application>标签后定义绿色效果：
<mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3"
duration="1500"/>
绿色效果开始时十分饱满，然后逐步变得透明，但不完全透明。最后变成淡绿色以表明
按钮已经被点击过。
4. 在设计模式下，从组件视图拖拉一个面板容器到布局上，并设置其相应属性：
Width: 200
Height: 300
X: 10
Y: 10
5. 从组件视图中拖拉一个按钮控件到面板上，并设置其相应属性：
ID: myButton
Label: View
X: 40
Y: 60
6. 在属性视图中，点击工具条中的分类视图/Category View 查看属性，然后找到效果分
类/Effects category。
按钮控件相对应的触发器分类列表。
7. 通过在波浪括号中键入效果的ID 来作为触发器的值，为mouseUpEffect 触发器赋
上绿色渐变效果，就象这样：
mouseUpEffect: {buttonGlow}
波浪括号（{ }）是必须的，因为效果是使用数据绑定来分配给它们的触发器的。
在源代码模式下，<mx:Button>标签看起来就象这样：
<mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}" />
8. 保存文件，编译后运行。结果如下：
从不同的组件调用一种效果
取代组件触发器，你还可以使用Flex 事件去调用效果。这样就可以使同一种效果为不
同的组件所调用。举个例子，你可以使用按钮控件的点击事件去告知TextArea 控件播放淡
入淡出的效果。
当用户点击应用程序的查看按钮时，你希望Label 组件的文本逐渐由模糊到清楚。
1. 在设计模式中，在查看/View 按钮下插入一个Label 控件，并设置相应的属性：
ID: myLabel
Text: 4 8 15 16 23 42
X: 40
Y: 100
2. 切换到源代码模式下，在<mx:Glow>标签后的<mx:Blur>里定义好绿色渐变效果：
<mx:Blur id="numbersBlur"
blurYFrom="10.0" blurYTo="0.0"
blurXFrom="10.0" blurXTo="0.0"
duration="2000"/>
3. 在<mx:Blur>标签中，将名为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();"/>
当用户点击按钮控件时，应用程序调用效果的play（）方法。
因为 numbersBlur 效果的目标是myLabel 控件，所以应用程序将效果运用到label 而非
按钮上。
5. 在<mx:Label>标签中将visible 属性设置为false，隐藏Label 控件：
<mx:Label id="myLabel" x="40" y="100" text="4 8 15 16 23 42" visible="false" />
这些数字不会被显示，直到用户点击查看按钮。
6. 当用户点击查看按钮时，使用语句将按钮的visible 属性设为真，使Label 控件可见：
<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}"
click="numbersBlur.play(); myLabel.visible=true;"/>
当用户点击按钮时，绿色渐变效果开始播放，Label 控件变得可见。
在 Behaviors.mxml 文件中输入如下代码：
<?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. 保存文件，编译后运行。
创建一个组合效果
你还可以使Label 组件在获得焦点的同时向下移动20 个象素。也就是说，你可以将绿
色渐变效果与移动效果组合起来。
Flex 提供将超过一种的多种效果组合起来的能力。你可以使用<mx:Parallel>标签或
<mx:Sequence>标签来定义一个组合效果，这取决你是想要组合的效果是并行地或顺序地进
行播放。在例子中，是要绿色渐变的效果与移动的效果同时进行。
1. 在源代码模式中，在<mx:Blur>标签前的<mx:Parallel>标签中输入：
<mx:Parallel id="BlurMoveShow">
</mx:Parallel>
并行组合的效果名称为BlurMoveShow。
2. 在代码中选择整个<mx:Blur>标签，然后粘贴到<mx:Parallel>标签对中，让它成为
<mx:Parallel>标签的子标签。
3. 在<mx:Blur>标签中选择target="{myLabel}" 属性，然后将它移动到<mx:Parallel>标
签内，让它成为<mx:Parallel>标签的属性：
<mx:Parallel id="BlurMoveShow" target="{myLabel}">
你希望组合效果作用在名叫myLabel 的组件上。
4. 在<mx:Blur>标签后的<mx:Move>标签中定义移动的效果：
<mx:Move id="numbersMove" yBy="20" duration="2000" />
你希望Label 控件在两秒钟内向下移动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>标签中，用BlurMoveShow 组合效果取代numbersBlur 效果来响应点
击事件：
<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}"
click="BlurMoveShow.play(); myLabel.visible=true;"/>
6. 保存文件，编译后运行。
在本节中，你学习了如何创建行为，从不同的组件调用相同的效果，以及如何将多种效
果合成来生成组合效果。
加支付宝好友偷能量挖...
