簡單的應用程式

應用程式設計
建立 Greetings 應用程式
撰寫並執行後續的範例

本節將使用 Flash 組件和 Flash 編寫工具，逐步引導您完成建立一個簡單的 ActionScript 3.0 應用程式所需的步驟。範例以兩種檔案形式提供，一種是 FLA 檔，另一種則是外部 ActionScript 類別檔案；前者在「時間軸」上含有 ActionScript 程式碼，後者則具有只將組件包含在元件庫中的 FLA 檔。一般而言，外部類別檔案是用於開發大型應用程式，可以在類別和應用程式之間共用程式碼，讓應用程式的維護工作更容易。如需有關使用 ActionScript 3.0 撰寫程式的詳細資訊，請參閱「ActionScript 3.0 程式設計」。

應用程式設計

我們的第一個 ActionScript 組件應用程式範例是標準「Hello World」應用程式的變化，因此它的設計方式是相當簡單的：

應用程式的名稱是 Greetings。
它會使用 TextArea 起先顯示一段問候語 Hello World。
它會使用 ColorPicker 讓您可以變更文字的顏色。
它會使用三個 RadioButton 讓您可以將文字的大小設定為小、較大或最大。
它會使用 ComboBox 讓您可以從下拉式清單選取不同的問候語。
應用程式會使用「組件」面板中的組件，同時也會利用 ActionScript 程式碼建立應用程式元素。

完成定義後，就可以開始建置應用程式。

建立 Greetings 應用程式

下列建立 Greetings 應用程式的步驟是使用 Flash 編寫工具建立 FLA 檔、將組件放到「舞台」上，然後將 ActionScript 程式碼加入到時間軸。

在 FLA 檔中建立 Greetings 應用程式：

請選取「檔案 > 新增」。
在「新增文件」對話方塊中選取「Flash 檔案 (ActionScript 3.0)」，然後按一下「確定」。

新的 Flash 視窗隨即開啟。
選取「檔案 > 儲存檔案」、將 Flash 檔案命名為 Greetings.fla ，再按一下「儲存」按鈕。
在「Flash 組件」面板中，選取 TextArea 組件並將它拖曳到「舞台」上。
當「舞台」上的 TextArea 已選取的情況下，在「屬性」視窗中輸入 aTa 做為實體名稱，然後輸入下列資訊：
- 輸入 230 做為 W 值 (寬度)。
- 輸入 44 做為 H 值 (高度)。
- 輸入 165 做為 X 值 (水平位置)。
- 輸入 57 做為 Y 值 (垂直位置)。
- 在「參數」索引標籤中，輸入 Hello World! 做為 text 參數。
將 ColorPicker 組件拖曳到「舞台」上放在 TextArea 的左邊，然後將它的實體名稱設定為 txtCp 。在「屬性」檢測器中輸入下列資訊：
- 輸入 96 做為 X 值。
- 輸入 72 做為 Y 值。
逐一將三個 RadioButton 組件拖曳到「舞台」上，並將它們的實體名稱設定為 smallRb 、 largerRb 和 largestRb 。在「屬性」檢測器中為它們輸入下列資訊：
- 分別輸入 100 和 22 做為這三個組件的 W 值和 H 值。
- 輸入 155 做為 X 值。
- 分別輸入 120 、 148 和 175 做為 smallRb、largerRb 和 largestRb 的 Y 值。
- 輸入 fontRbGrp 做為這三個組件的 groupName 參數。
- 在「參數」索引標籤中，分別輸入 Small 、 Larger 和 Largest 做為這三個組件的標籤。
將 ComboBox 組件拖曳到「舞台」上，並賦予它一個實體名稱 msgCb 。在「屬性」檢測器中為它輸入下列資訊：
- 輸入 130 做為 W 值。
- 輸入 265 做為 X 值。
- 輸入 120 做為 Y 值。
- 在「參數」索引標籤中，輸入 Greetings 做為 prompt 參數。
- 按兩下 dataProvider 參數的文字欄位以開啟「值」對話方塊。
- 按一下加號，以 Hello World! 取代標籤值。
- 重複上一個步驟，加入標籤值 Have a nice day! 和 Top of the Morning! 。
- 按一下「確定」，關閉「值」對話方塊。
儲存檔案。
如果沒有開啟「動作」面板，請按 F9 或從「視窗」選單中選取「動作」將它開啟。在主要「時間軸」上按一下「影格 1」，並在「動作」面板中輸入下列程式碼：
```
import flash.events.Event; 
import fl.events.ComponentEvent; 
import fl.events.ColorPickerEvent; 
import fl.controls.RadioButtonGroup; 
 
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp"); 
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
msgCb.addEventListener(Event.CHANGE, cbHandler);
```
前三行程式碼會匯入應用程式所使用的事件類別。當使用者與其中一個組件進行互動時就會產生事件。底下五行程式碼會為應用程式要偵聽的事件註冊事件處理常式。當使用者按一下 RadioButton 時就會產生它的 click 事件。當使用者在 ColorPicker 中選取不同的顏色時就會產生 change 事件。當使用者從下拉式清單選擇不同的問候語時就會產生 ComboBox 的 change 事件。

第四行程式碼會匯入 RadioButtonGroup 類別讓應用程式可以將事件偵聽程式指定給 RadioButton 的群組，而不是個別將偵聽程式指定給每一個按鈕。
將下列程式碼行加入到「動作」面板以建立 tf TextFormat 物件，讓應用程式可以使用它來變更 TextArea 中文字的 size 和 color 樣式屬性。
```
var tf:TextFormat = new TextFormat();
```
加入下列程式碼以建立 rbHandler 事件處理函數。這個函數會在使用者按一下其中一個 RadioButton 組件後處理產生的 click 事件。
```
function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
        } 
        aTa.setStyle("textFormat", tf); 
}
```
這個函數會使用 switch 陳述式檢查 event 物件的 target 屬性，判斷觸發事件的是哪一個 RadioButton。 currentTarget 屬性含有觸發事件之物件的名稱。應用程式會根據使用者按下的 RadioButton 將 TextArea 中的文字大小變更為 14、18 或 24 點。
加入下列程式碼來實作 cpHandler() 函數，處理 ColorPicker 中值的變更動作：
```
function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
}
```
這個函數會將 tf TextFormat 物件的 color 屬性設定為 ColorPicker 中選取的顏色，然後呼叫 setStyle() 將該顏色套用到 aTa TextArea 實體中的文字。
加入下列程式碼來實作 cbHandler() 函數，以處理對 ComboBox 中選取範圍所做的變更：
```
function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.label; 
}
```
這個函數只會以 ComboBox 中選取的文字 event.target.selectedItem.label 取代 TextArea 中的文字。
選取「控制 > 測試影片」或按 Control+Enter 鍵，編譯程式碼並測試 Greetings 應用程式。

下一節將說明如何使用外部 ActionScript 類別和 FLA 檔 (在元件庫中只含有必要的組件) 建置相同的應用程式。

使用外部類別檔案建立 Greetings2 應用程式：

請選取「檔案 > 新增」。
在「新增文件」對話方塊中選取「Flash 檔案 (ActionScript 3.0)」，然後按一下「確定」。

新的 Flash 視窗隨即開啟。
選取「檔案 > 儲存檔案」、將 Flash 檔案命名為 Greetings2.fla ，再按一下「儲存」按鈕。
將下列組件從「組件」面板拖曳到元件庫：
- ColorPicker
- ComboBox
- RadioButton
- TextArea
  
  編譯過的 SWF 檔將會使用每一項資源，因此您必須將它們加入到元件庫中。請將組件拖曳到「元件庫」面板的底部。當您將這些組件加入元件庫時，也會自動加入其它的資源 (例如 List、TextInput 和 UIScrollBox)。
在「屬性」視窗的「文件類別」中，輸入 Greetings2 。

如果 Flash 顯示「找不到文件類別的定義」警告訊息，請忽略它。您將會在下列步驟中定義 Greetings2 類別。這個類別會定義應用程式主要的功能。
儲存 Greetings2.fla 檔案。
選取「檔案 > 新增」。
在「新增文件」對話方塊中選取「ActionScript 檔案」，然後按一下「確定」。

會開啟新的 Script 視窗。

在 Script 視窗中輸入下列程式碼：

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import flash.text.TextFormat; 
    import fl.events.ComponentEvent; 
    import fl.events.ColorPickerEvent; 
    import fl.controls.ColorPicker; 
    import fl.controls.ComboBox; 
    import fl.controls.RadioButtonGroup; 
    import fl.controls.RadioButton; 
    import fl.controls.TextArea; 
    public class Greetings2 extends Sprite { 
        private var aTa:TextArea; 
        private var msgCb:ComboBox; 
        private var smallRb:RadioButton; 
        private var largerRb:RadioButton; 
        private var largestRb:RadioButton; 
        private var rbGrp:RadioButtonGroup; 
        private var txtCp:ColorPicker; 
        private var tf:TextFormat = new TextFormat(); 
        public function Greetings2() {

此 Script 會定義一個名為 Greetings2 的 ActionScript 3.0 類別。Script 會執行下列動作：

匯入檔案中將使用的類別。一般的作法是在程式碼中參考到不同類別時，才會加入這些 import 陳述式，但為簡潔起見，範例在這一個步驟中就會將它們全部匯入。
宣告變數，表示將加入到程式碼的不同組件物件類型。另一個變數則會建立 tf TextFormat 物件。
定義類別的建構函數 Greetings2() 。下列步驟會繼續將程式碼行加入這個函數，也會將其它方法加入到類別。

選取「檔案 > 儲存檔案」，將檔案命名為 Greetings2.as ，然後按一下「儲存」按鈕。

將下列程式碼行加入到 Greeting2() 函數：

    createUI(); 
    setUpHandlers(); 
}

函數現在看起來會像下面這樣：

public function Greetings2() { 
    createUI(); 
    setUpHandlers(); 
}

將下列各行程式碼加入到 Greeting2() 方法的右大括弧後面：

private function createUI() { 
    bldTxtArea(); 
    bldColorPicker(); 
    bldComboBox(); 
    bldRadioButtons(); 
} 
private function bldTxtArea() { 
    aTa = new TextArea(); 
    aTa.setSize(230, 44); 
    aTa.text = "Hello World!"; 
    aTa.move(165, 57); 
    addChild(aTa); 
} 
private function bldColorPicker() { 
    txtCp = new ColorPicker(); 
    txtCp.move(96, 72); 
    addChild(txtCp); 
} 
private function bldComboBox() { 
    msgCb = new ComboBox(); 
    msgCb.width = 130; 
    msgCb.move(265, 120); 
    msgCb.prompt = "Greetings"; 
    msgCb.addItem({data:"Hello.", label:"English"});             
    msgCb.addItem({data:"Bonjour.", label:"Français"});             
    msgCb.addItem({data:"¡Hola!", label:"Español"});             
    addChild(msgCb); 
} 
private function bldRadioButtons() { 
    rbGrp = new RadioButtonGroup("fontRbGrp"); 
    smallRb = new RadioButton(); 
    smallRb.setSize(100, 22); 
    smallRb.move(155, 120); 
    smallRb.group = rbGrp; //"fontRbGrp"; 
    smallRb.label = "Small"; 
    smallRb.name = "smallRb"; 
    addChild(smallRb); 
    largerRb = new RadioButton(); 
    largerRb.setSize(100, 22); 
    largerRb.move(155, 148); 
    largerRb.group = rbGrp; 
    largerRb.label = "Larger"; 
    largerRb.name = "largerRb"; 
    addChild(largerRb); 
    largestRb = new RadioButton(); 
    largestRb.setSize(100, 22); 
    largestRb.move(155, 175); 
    largestRb.group = rbGrp; 
    largestRb.label = "Largest"; 
    largestRb.name = "largestRb"; 
    addChild(largestRb); 
}

這些程式碼行會執行下列動作：

實體化應用程式中使用的組件。
設定每個組件的大小、位置和屬性。
使用 addChild() 方法，將各個組件加入「舞台」中。

在 bldRadioButtons() 方法的右大括弧之後，加入下列 setUpHandlers() 方法的程式碼：

private function setUpHandlers():void { 
    rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
    txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
    msgCb.addEventListener(Event.CHANGE, cbHandler); 
} 
private function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
    } 
    aTa.setStyle("textFormat", tf); 
} 
private function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
} 
private function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.data; 
} 
} 
}

這些函數會定義組件的事件偵聽程式。

選取「檔案 > 儲存檔案」進行存檔。
選取「控制 > 測試影片」或按 Control+Enter 鍵，編譯程式碼並測試 Greetings2 應用程式。

撰寫並執行後續的範例

撰寫並執行 Greetings 應用程式後，您應該已對如何執行本手冊中的其它程式碼範例有了基本的認識。每個範例中相關的 ActionScript 3.0 程式碼都會以反白標示並附上討論，您可以剪下本手冊中的每個範例內容，然後將它貼入 FLA 檔、編譯並執行。