使用行為

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 運行程序。