範例:建立基本應用程式

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 " 確認訊息。