Flex中文帮助第五章 Flex使用行为-优快云博客

本文链接：https://blog.youkuaiyun.com/hartkevin/article/details/5315174

第五章 Flex使用行为

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>标签中定义移动的效果：

你希望 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效果来响应点击事件：