Flex教程-使用行为

　　本教程将学习：
一、使用MXML去创建行为。
二、在不同的组件间调用效果。
三、创建合成效果。
一、使用MXML去创建行为。
下面我们将制作一个当用户点击按钮时按钮会发光的效果。
1.在Source模式下，在<mx: Application>后输入下面的代码，定义一个发光效果。 

<mx:Glow id="buttonGlow" color="0x99ff66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/> 

2．在Design模式下，从Componsents面板中拖一个按钮到应用程序中，并设置按钮的属性如下：

ID：myButton
Label:View
X:40
Y:60

3.在属性面板中，点击View by Category视图按钮。并找出Effects类型的属性。

4.将mouseUpEffect赋值为发光效果。如下： 

mouseUpEffect:{buttonGlow} 

在Source模式下，<mx:Button>标签代码如下： 

<mx:Button x="40" y="60" label=”View” id=”myButton”  mouseUpEffect="{buttonGlow}"/> 

5.保存文件。
6.点击工具栏上的Run按钮编译应用程序。
浏览器会运行你的Flex应用程序。点击View按钮。View按钮就会执行<mx:Glow>标签的发光效果。

二、在不同的组件间调用效果
下面我们将制作一个当用户点击按钮时Label组件将出现一组从模糊到清晰的数字。
1.在Design模式中，从Components面板中拖一个Label组件到应用程序中，并设置Label属性如下：

ID:myLabel
Text:4 8 15 16 23 42
X:40
Y:100

2.转换到Source模式中，定义模糊效果，在<mx:Glow>标签下输入如下代码： 

<mx:Blur id="numberBlur" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" duration="2000"/> 

3.在<mx:Blur>标签中指定Label组件为模糊效果的目标组件： 

<mx:Blur id="numberBlur" target="{myLabel}" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" duration="2000"/> 

4.在<mx:Button>标签中指定click事件为模糊效果： 

<mx:Button id="myButton" label="View" x="40" y="60" click="numberBlur.play();" mouseUpEffect="{buttonGlow}"/> 

5．在<mx:label>标签中，设置visible属性为false来隐藏Label组件： 

<mx:Label id="myLabel" text="4 8 15 16 23 42" x="40" y="100" visible="false"/> 

6．当用户在点击View按钮时，设置Label组件的visible属性为true来显示Label组件： 

<mx:Button id="myButton" label="View" x="40" y="60" click="numberBlur.play();myLabel.visible=true" mouseUpEffect="{buttonGlow}"/> 

完整的代码如下： 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" layout="absolute" click="numberBlur.play()">
 <mx:Glow id="buttonGlow" color="0x99ff66" alphaFrom="1.0"  alphaTo="1.3" duration="1500"/>
 <mx:Blur id="numberBlur" target="{myLabel}" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" duration="2000"/>
 <mx:Button id="myButton" label="View" x="40" y="60" click="numberBlur.play();myLabel.visible=true" mouseUpEffect="{buttonGlow}"/>
 <mx:Label id="myLabel" text="4 8 15 16 23 42" x="40" y="100" visible="false"/>
</mx:Application> 

7．保存文件。
8.点击工具栏上的Run按钮编译应用程序。
浏览器会运行你的Flex应用程序。点击View按钮后就会有一组数字从模糊变为清晰。
三、创建合成效果
下面我们将制作一个当用户点击按钮时Label组件将出现一组从模糊到清晰的数字并且Label组件从上向下移动20px的位置。
1.在Source模式下，在<mx:Blur>标签前输入如下代码： 

<mx:Parallel id="BlurMoveShow">
</mx:Parallel> 

2.将全句<mx:Blur>标签剪切到</mx:Parallel>前。将<mx:Blur>成为<mx:Parallel>的子标签。
3.<mx:Blur>标签中，选择target=”{myLabel}”，并剪切到<mx:Parallel>中，如下： 

<mx:Parallel id="BlurMoveShow" target="{myLabel}"> 

4.定义移动效果。在<mx:Blur>标签后输入如下代码： 

<mx:Move id="numberMove" yBy="20" duration="2000"/> 

Label组件将在2秒中下移20px的位置。
完整的<mx:Parallel>标签如下： 

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

5.在<mx:Button>标签中，改变click事件的效果设定为BlurMoveShow,代码如下： 

<mx:Button id="myButton" label="View" x="40" y="60" click="BlurMoveShow.play();myLabel.visible=true" mouseUpEffect="{buttonGlow}"/> 

6．保存文件。
7.点击工具栏上的Run按钮编译应用程序。
浏览器会运行你的Flex应用程序。点击View按钮后就会有一组数字从模糊变为清晰并且这组数字向下移动。