範例：建立基本應用程式

ActionScript 3.0 可用於多種應用程式開發環境中，其中包括 Flash Professional 和 Flash Builder 工具或者任何文字編輯器。

本範例將逐步說明如何使用 Flash Professional 或 Flash Builder 工具，建立和增強簡單的 ActionScript 3.0 應用程式。您將建立的應用程式，會顯示在 Flash Professional 和 Flex 應用程式中使用外部 ActionScript 3.0 類別檔案的簡單模式。

    設計 ActionScript 應用程式

    此範例 ActionScript 應用程式是標準的 "Hello World" 應用程式，所以它的設計很簡單：

    • 這個應用程式稱為 HelloWorld。

    • 它會顯示單一文字欄位，其中包含文字 "Hello World!"

    • 這個應用程式使用一個稱為 Greeter 的單一物件導向類別。這種設計可以使用 Flash Professional 或 Flex 專案中的類別。

    • 在這個範例中，您會先建立應用程式的基本版本。然後新增功能，讓使用者輸入使用名稱，並讓應用程式在已知的使用者清單中檢查這個名稱。

    有了清楚的定義之後，接下來就可以開始建立應用程式。

    建立 HelloWorld 專案和 Greeter 類別

    Hello World 應用程式的設計說明指出程式碼應方便重複使用。為了達到這個目標，應用程式會使用一個稱為 Greeter 的單一物件導向類別。您從利用 Flash Builder 或 Flash Professional 建立的應用程式中使用這個類別。

    利用 Flex 建立 HelloWorld 專案和 Greeter 類別：

    1. 在 Flash Builder 中，選取「File > New > Flex Project」。

    2. 輸入 HelloWorld 做為「Project Name」(專案名稱)。確定「Application」(應用程式) 類型設定成「Web (runs in Adobe Flash Player)」，然後按一下「Finish」。

      Flash Builder 會建立您的專案並顯示在 Package Explorer 之中。根據預設，此專案應該已經包含一個名為 HelloWorld.mxml 的檔案，而且編輯器已經開啟該檔案。

    3. 現在，若要使用 Flash Builder 建立自訂的 ActionScript 類別檔案，請選取「File > New > ActionScript Class」。

    4. 在「New ActionScript Class」對話方塊的「Name」欄位中，輸入 Greeter 做為類別名稱，然後按一下「Finish」。

      新的 ActionScript 編輯視窗隨即顯示。

      後續步驟請參閱下一節將程式碼加入至 Greeter 類別。

    在 Flash Professional 建立 Greeter 類別：

    1. 在 Flash Professional 中，選取「檔案 > 新增」。

    2. 在「新增文件」對話方塊中選取「ActionScript 檔案」，然後按一下「確定」。

      新的 ActionScript 編輯視窗隨即顯示。

    3. 選取「檔案 > 儲存」。選取一個資料夾來存放應用程式，將 ActionScript 檔案命名為 Greeter.as，然後按一下「確定」。

      後續步驟請參閱下一節將程式碼加入至 Greeter 類別。

    將程式碼加入至 Greeter 類別

    Greeter 類別會定義物件 Greeter，您可以用於 HelloWorld 應用程式。

    將程式碼加入 Greeter 類別：

    1. 將下列程式碼輸入新的檔案中 (某些程式碼可能已經新增)：

      package 
{ 
    public class Greeter 
    { 
        public function sayHello():String 
        { 
            var greeting:String; 
            greeting = "Hello World!"; 
            return greeting; 
        } 
    } 
}

      Greeter 類別包含一個單一的 sayHello() 方法，此方法會傳回一個 "Hello World!" 的字串。

    2. 選取「檔案 > 儲存檔案」來儲存這個 ActionScript 檔案。

    現在，Greeter 類別已經就緒，可以在應用程式中使用了。

    建立使用 ActionScript 程式碼的應用程式

    前面所建立的 Greeter 類別定義了一組獨立的軟體功能，但這還不是完整的應用程式。若要使用這個類別，您可以建立 Flash Professional 文件或 Flex 專案。

    程式碼需要 Greeter 類別的實體。下面顯示如何在應用程式使用 Greeter 類別。

    使用 Flash Professional 建立 ActionScript 應用程式：

    1. 請選取「檔案 > 新增」。

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

      新的文件視窗隨即顯示。

    3. 選取「檔案 > 儲存」。選取存放 Greeter.as 類別檔案所在的同一個資料夾，將 Flash 文件命名為 HelloWorld.fla，然後按一下「確定」。

    4. 在 Flash Professional 工具面板中，選取「文字」工具。在「舞台」中拖曳，以便定義寬度大約 300 像素、寬度約 100 像素的新文字欄位。

    5. 在「屬性」面板中，當「舞台」上的文字欄位依然選取時，將文字類型設定為「動態文字」。輸入 mainText 做為文字欄位的實體名稱。

    6. 按一下主要時間軸的第一個影格。選擇「視窗 > 動作」來開啟「動作」面板。

    7. 在「動作」面板中，輸入下列 Script：

      var myGreeter:Greeter = new Greeter(); 
mainText.text = myGreeter.sayHello();

    8. 儲存檔案。

    後續步驟請參閱發佈並測試 ActionScript 應用程式。

    使用 Flash Builder 建立 ActionScript 應用程式：

    1. 開啟 HelloWorld.mxml 檔案，新增程式碼以符合下列內容：

      <?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    minWidth="1024" 
    minHeight="768"" 
    creationComplete="initApp()"> 
     
    <fx:Script> 
        <![CDATA[ 
            private var myGreeter:Greeter = new Greeter(); 
             
            public function initApp():void 
            { 
                // says hello at the start, and asks for the user's name 
                mainTxt.text = myGreeter.sayHello(); 
            } 
        ]]> 
    </fx:Script> 
     
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
     
    <s:TextArea id="mainTxt" width="400"/>         
     
</s:Application>

      這個 Flex 專案包含四個 MXML 標籤：

      • <s:Application> 標籤，定義應用程式容器

      • <s:layout> 標籤，定義 Application 標籤的版面樣式 (垂直版面)

      • <fx:Script> 標籤，其中包含特定 ActionScript 程式碼

      • <s:TextArea> 標籤，定義一個欄位來顯示文字訊息給使用者

      <fx:Script> 標籤中的程式碼會定義應用程式載入時呼叫的 initApp() 方法。initApp() 方法會將 mainTxt TextArea 的文字值設為 "Hello World!" 字串，這是由您剛撰寫之 Greeter 自訂類別的 sayHello() 方法所傳回的字串。

    2. 選取「File > Save」，儲存應用程式。

    後續步驟請參閱發佈並測試 ActionScript 應用程式。

    發佈並測試 ActionScript 應用程式

    軟體開發是不斷重複同樣步驟的過程。首先是撰寫程式碼、嘗試編譯程式碼，然後編輯程式碼，直到編譯沒問題。您將會執行編譯後的應用程式並加以測試，進而查看該應用程式是否具備您想要的設計。如果沒有，您可以再次編輯程式碼，直到達到想要的設計為止。Flash Professional 和 Flash Builder 開發環境提供多種方法來發佈、測試和除錯應用程式。

    下面是在各環境中測試 HelloWorld 應用程式的基本步驟。

    使用 Flash Professional 發佈和測試 ActionScript 應用程式：

    1. 發佈應用程式，並注意是否發生編譯錯誤。在 Flash Professional 中選取「控制 > 測試影片」，編譯 ActionScript 程式碼並執行 HelloWorld 應用程式。

    2. 如果在您測試應用程式時，「輸出」視窗顯示任何錯誤或警告，請在 HelloWorld.fla 或 HelloWorld.as 檔案中修正這些錯誤。然後再次測試應用程式。

    3. 如果沒有發生編譯錯誤，您就會看到 Hello World 應用程式出現在 Flash Player 視窗中。

    您剛才建立了採用 ActionScript 3.0 的物件導向應用程式，雖然簡單，卻很完整。接下來，請繼續強化 HelloWorld 應用程式。

    使用 Flash Builder 發佈和測試 ActionScript 應用程式：

    1. 選取「Run > Run HelloWorld」。

    2. HelloWorld 應用程式隨即啟動。

      • 如果在您測試應用程式時，「Output」視窗顯示任何錯誤或警告，請在 HelloWorld.mxml 或 Greeter.as 檔案中修正錯誤。然後再次測試應用程式。

      • 如果沒有發生編譯錯誤，您就會看到 Hello World 應用程式出現在瀏覽器視窗中。文字 "Hello World!" 會接著顯示出來。

      您剛才建立了採用 ActionScript 3.0 的物件導向應用程式，雖然簡單，卻很完整。接下來，請繼續強化 HelloWorld 應用程式。

    強化 HelloWorld 應用程式

    為了讓應用程式多點變化，您現在可以設定應用程式要求使用者輸入名稱，然後根據預先定義的名稱清單進行驗證。

    首先需要更新 Greeter 類別來加入新功能。接著再更新應用程式來使用新功能。

    更新 Greeter.as 檔案：

    1. 開啟 Greeter.as 檔案。

    2. 將檔案內容變更如下 (新增和變更的行會以粗體顯示)：

      package 
{ 
    public class Greeter 
    { 
        /** 
         * Defines the names that receive a proper greeting. 
         */ 
        public static var validNames:Array = ["Sammy", "Frank", "Dean"]; 
 
        /** 
         * Builds a greeting string using the given name. 
         */ 
        public function sayHello(userName:String = ""):String 
        { 
            var greeting:String; 
            if (userName == "")  
            { 
                greeting = "Hello. Please type your user name, and then press " 
                            + "the Enter key."; 
            }  
            else if (validName(userName))  
            { 
                greeting = "Hello, " + userName + "."; 
            }  
            else  
            { 
                greeting = "Sorry " + userName + ", you are not on the list."; 
            } 
            return greeting; 
        } 
         
        /** 
         * Checks whether a name is in the validNames list. 
         */ 
        public static function validName(inputName:String = ""):Boolean  
        { 
            if (validNames.indexOf(inputName) > -1)  
            { 
                return true; 
            }  
            else  
            { 
                return false; 
            } 
        } 
    } 
}

    Greeter 類別現在有了數項新功能：

    • validNames 陣列會列出有效的使用者名稱。當載入 Greeter 類別時，這個陣列會初始化為包含三個名稱的清單。

    • sayHello() 方法現在可接受使用者名稱，並視情況變更問候內容。如果 userName 是空字串 ("")，greeting 屬性會設定提示使用者輸入名稱。如果使用者名稱有效，問候內容會變成 "Hello, userName"。如果最後這兩個條件都不成立，greeting 變數會設為 "Sorry userName, you are not on the list"。

    • 如果在 validNames 陣列找到 inputName，validName() 方法會傳回 true，如果找不到，則會傳回 false。陳述式 validNames.indexOf(inputName) 會檢查 validNames 陣列中的每個字串來比對 inputName 字串。Array.indexOf() 方法會傳回陣列中某個物件的第一個實體的索引位置。如果在陣列中找不到物件，就會傳回值 -1。

    接下來，編輯參照此 ActionScript 類別的應用程式檔案。

    使用 Flash Professional 修改應用程式：

    1. 開啟 HelloWorld.fla 檔案。

    2. 修改「影格 1」中的 Script，改成傳遞空字串 ("") 給 Greeter 類別的 sayHello() 方法： 

      var myGreeter:Greeter = new Greeter(); 
mainText.text = myGreeter.sayHello("");

    3. 選取工具面板中的「文字」工具。在「舞台」上建立兩個新的文字欄位。將這兩個欄位並排放到現有的 mainText 文字欄位下方。

    4. 在第一個新的文字欄位中 (它是標籤)，輸入 User Name:。

    5. 選取另一個新的文字欄位，並在「屬性」檢測器中選取「Input Text」做為文字欄位的類型。選取「單行」做為「字行類型」。輸入 textIn 當做實體名稱。

    6. 按一下主要時間軸的第一個影格。

    7. 在「動作」面板中，將下面幾行加在現有 Script 的最後面：

      mainText.border = true; 
textIn.border = true; 
 
textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
 
function keyPressed(event:KeyboardEvent):void 
{ 
    if (event.keyCode == Keyboard.ENTER) 
    { 
        mainText.text = myGreeter.sayHello(textIn.text); 
    } 
}

      新的程式碼增加了下列功能：

      • 頭兩行只是定義兩個文字欄位的邊框。

      • 文字輸入欄位如 textIn 欄位，有一組可供它傳送的事件。您可以使用 addEventListener() 方法，定義會在發生某類型事件時執行的函數。在此例中，這個事件即是在鍵盤上按一個按鍵。

      • keyPressed() 自訂函數會檢查按下的按鍵是否為 Enter 鍵。如果是 Enter 鍵，它會呼叫 myGreeter 物件的 sayHello() 方法，將 textIn 文字欄位中的文字當做參數傳遞。這個方法會根據傳入的值傳回問候的字串，而傳回的字串則接著指定給 mainText 文字欄位的 text 屬性。

      「影格 1」的完整 Script 如下：

      var myGreeter:Greeter = new Greeter(); 
mainText.text = myGreeter.sayHello(""); 
 
mainText.border = true; 
textIn.border = true; 
 
textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
 
function keyPressed(event:KeyboardEvent):void 
{ 
    if (event.keyCode == Keyboard.ENTER) 
    { 
        mainText.text = myGreeter.sayHello(textIn.text); 
    } 
}

    8. 儲存檔案。

    9. 選取「控制 > 測試影片」，執行應用程式。

      當您執行應用程式時，應用程式會提示您輸入使用者名稱。如果您輸入有效的名稱 (Sammy、Frank 或 Dean)，應用程式便會顯示確認訊息 "hello"。

    使用 Flash Builder 修改應用程式：

    1. 開啟 HelloWorld.mxml 檔案。

    2. 接下來，修改 <mx:TextArea> 標籤，向使用者說明只供顯示。將背景顏色變更成淺灰色，並將 editable 特質設定成 false：

          <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" />

    3. 現在，在 <s:TextArea> 結束標籤正後方加上下列幾行。這幾行會建立 TextInput 組件，讓使用者輸入使用者名稱值：

          <s:HGroup width="400"> 
        <mx:Label text="User Name:"/>     
        <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
    </s:HGroup>

      enter 特質會定義使用者在 userNameTxt 欄位中按下 Enter 鍵所發生的事。在這個範例中，程式碼會將欄位中的文字傳遞至 Greeter.sayHello() 方法。mainTxt 欄位中的問候內容會跟著一起變更。

      HelloWorld.mxml 檔案類似如下：

      <?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    minWidth="1024" 
    minHeight="768"" 
    creationComplete="initApp()"> 
     
    <fx:Script> 
        <![CDATA[ 
            private var myGreeter:Greeter = new Greeter(); 
             
            public function initApp():void 
            { 
                // says hello at the start, and asks for the user's name 
                mainTxt.text = myGreeter.sayHello(); 
            } 
        ]]> 
    </fx:Script> 
     
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
     
    <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false"/>     
 
    <s:HGroup width="400">     
        <mx:Label text="User Name:"/>     
        <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
    </s:HGroup> 
     
</s:Application>

    4. 儲存編輯過的 HelloWorld.mxml 檔案。選取「Run > Run HelloWorld」，執行應用程式。

      當您執行應用程式時，應用程式會提示您輸入使用者名稱。如果您輸入有效的名稱 (Sammy、Frank 或 Dean)，應用程式便會顯示 " Hello, userName" 確認訊息。