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按鈕後就會有一組數字從模糊變為清晰並且這組數字向下移動。