使用行為

Adobe Flex行為可以讓我們?yōu)榱隧憫?yīng)用戶或是程序的動(dòng)作而在程序中添加的動(dòng)畫效果。一個(gè)行為是一個(gè)觸發(fā)器和一個(gè)效果的集合。觸發(fā)器是一個(gè)動(dòng)作，例如在組件上點(diǎn)擊鼠標(biāo)，一個(gè)組件獲得焦點(diǎn)，或者是一個(gè)組件變?yōu)榭梢姟Ｒ粋€(gè)效果是在一段時(shí)間內(nèi)發(fā)生在目標(biāo)組件上的可見或是聲音上的變化，這個(gè)時(shí)間通常以毫秒計(jì)。

在這一節(jié)，我們將會(huì)顯示如何在我們的Flex用戶界面上添加行為。我們將演示如何使用MXML來創(chuàng)建行為，如何從不同的組件調(diào)用同一個(gè)效果，以及如何組合多個(gè)效果來創(chuàng)建一個(gè)組合效果。

設(shè)置工程

在我們開始之前，我們要確保完成下面的任務(wù)：
創(chuàng)建了Lessons工程
打開自動(dòng)編譯選項(xiàng)

創(chuàng)建一個(gè)行為

我們決定來創(chuàng)建一個(gè)當(dāng)用戶點(diǎn)擊時(shí)按鈕會(huì)發(fā)光的行為。我們希望這個(gè)光是綠色，并且持續(xù)1.5秒，并且用一個(gè)淺綠色來標(biāo)識(shí)已經(jīng)點(diǎn)擊了這個(gè)按鈕。

1 在瀏覽視圖中選擇Lessons工程，創(chuàng)建一個(gè)名為Behaviors.mxml的程序文件。

2 將Behaviors.mxml文件設(shè)置為默認(rèn)編譯的文件。

3 在MXML編輯器的代碼模式下，通過添加下面的代碼來定義一個(gè)Glow效果：
<mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/>

Glow將會(huì)由完全不透明變?yōu)椴糠滞该鳎皇菚?huì)是完全透明。當(dāng)效果結(jié)束時(shí)將會(huì)持續(xù)一個(gè)淺綠色。

4 在設(shè)計(jì)模式下，添加一個(gè)Panel容器，并且設(shè)置如下的屬性：
Width: 200
Height: 300
X: 10
Y: 10

5 向Panel容器中添加一個(gè)Button控件，并且設(shè)置如下的屬性：
ID: myButton
Label: View
X: 40
Y: 60

6 在屬性視圖中，點(diǎn)擊工具欄中的視圖類，將屬性列為一個(gè)表，然后可以定位屬性的效果類。

這個(gè)類別列出了Button控件的觸發(fā)器。

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 運(yùn)行程序。程序運(yùn)行效果如下：

從不同的組件調(diào)用效果

與組件觸發(fā)器不同，我們可以使用Flex事件來調(diào)用效果。這個(gè)功能就可以使得我們在一個(gè)組件上調(diào)用效果在不同的組件上執(zhí)行。例如，我們可以使用一個(gè)Button控件的點(diǎn)擊來引發(fā)一個(gè)在TextArea上的褪變效果。

當(dāng)用戶點(diǎn)擊我們的程序View按鈕時(shí)，我們希望顯示一個(gè)Label組件還用模糊的文本顯示一系列數(shù)字。

1 在設(shè)計(jì)模式下，在View按鈕下插入一個(gè)Label控件，并且設(shè)置如下的屬性：
ID: myLabel
Text: 4 8 15 16 23 42
X: 40
Y: 100

2 切換到代碼模式，通過添加下面的代碼來定義一個(gè)Blur效果。
<mx:Blur id="numbersBlur"
blurYFrom="10.0" blurYTo="0.0"
blurXFrom="10.0" blurXTo="0.0"
duration="2000"/>

在這個(gè)標(biāo)簽屬性里指明了Blur效果水平與垂直的開始與結(jié)束數(shù)量。

3 在<mx:Blure>標(biāo)簽中，指明名為myLabel的控件為效果目標(biāo)：
<mx:Blur id="numbersBlur" target="{myLabel}"
blurYFrom="10.0" blurYTo="0.0"
blurXFrom="10.0" blurXTo="0.0"
duration="2000"/>

在這里我們希望這個(gè)效果在名為myLabel的控件上執(zhí)行。

4 在<mx:Button>標(biāo)簽中，指明當(dāng)一個(gè)點(diǎn)擊事件發(fā)生時(shí)執(zhí)行numbersBlur效果：
<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="numbersBlur.play();"/>

當(dāng)用戶點(diǎn)擊Button控件時(shí)，程序通過調(diào)用效果的play()方法來調(diào)用這個(gè)效果。
因?yàn)閚umbersBlur效果的目標(biāo)是myLabel控件，所以這個(gè)效果會(huì)在Label上執(zhí)行，而不是Button控件。

5 通過設(shè)置Label的visible屬性來將設(shè)置為不可見，如下所示：
<mx:Label id="myLabel" x="40" y="100" text="4 8 15 16 23 42" visible="false"/>

6 當(dāng)用戶點(diǎn)擊Button時(shí)設(shè)置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 運(yùn)行程序，程序的運(yùn)行效果如下：

創(chuàng)建一個(gè)復(fù)合效果

我們可以使得當(dāng)數(shù)字獲得焦點(diǎn)時(shí)，Label組件向下移動(dòng)20象素。換句話說，我們可以將我們的Blur效果與Move效果進(jìn)行組合。

Flex支持將多個(gè)效果組合成為一個(gè)復(fù)合效果。我們可以使用<mx:Parallel>或是<mx:Sequence>標(biāo)簽來定義一個(gè)復(fù)合效果，這取決于我們是希望這些效果同時(shí)執(zhí)行還是順序執(zhí)行。在這我們這個(gè)程序中，我們希望Blur與Move效果同時(shí)執(zhí)行。

1 在代碼模式下，輸入下面的代碼來開始組合效果：
<mx:Parallel id="BlurMoveShow">
</mx:Parallel>

2 將我們代碼中的<mx:Blur>標(biāo)簽的內(nèi)容粘貼到<mx:Parallel>標(biāo)簽中。

3 進(jìn)行如下的代碼設(shè)置：
<mx:Parallel id="BlurMoveShow" target="{myLabel}">

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

在這里我們希望我們的Label標(biāo)簽在2秒內(nèi)向下移動(dòng)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>標(biāo)簽中進(jìn)行如下的更改設(shè)置：
<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 運(yùn)行程序。