2D互動(Flash)課程重要提示

參考:

http://help.adobe.com/zh_TW/as3/dev/WS9b644acd4ebe5999-2734bf3c124372a52ff-8000.html

範例類型
在 Flash Professional 執行 ActionScript 3.0 範例
在 Flash Builder 執行 ActionScript 3.0 範例
在行動裝置執行 ActionScript 3.0 範例

瞭解特定類別和方法運作方式的最佳方法之一，就是執行 ActionScript 3.0 程式碼範例。您可以根據使用的裝置或目標裝置，以不同方式使用範例。

執行 Flash Professional 或 Flash Builder 的電腦: 請參閱在 Flash Professional 執行 ActionScript 3.0 範例或在 Flash Builder 執行 ActionScript 3.0 範例，取得有關如何在這些開發環境執行 ActionScript 3.0 範例的資訊。使用 trace 陳述式以及其他除錯工具，可增加您對於程式碼範例運作方式的瞭解。
行動裝置: 您可以在支援 Flash Player 10.1 及更新版本的行動裝置上執行 ActionScript 3.0 程式碼範例。請參閱在行動裝置執行 ActionScript 3.0 範例。您也可以在執行 Flash Professional 或 Flash Builder 的電腦上執行這些範例。
電視機: 雖然您無法在電視機執行這些範例，但還是可以在電腦執行，以便從範例中學習。請參閱 Adobe Developer Connection 網站上的電視版 Flash Platform，取得有關開發電視機專用應用程式的資訊。

範例類型

ActionScript 3.0 程式碼範例的類型：

程式碼片段範例 (可在 ActionScript 3.0 文件集內找到)
類別範例 (主要可在 ActionScript 3.0 語言參考中找到)
包含多個原始碼檔案(Source file)的實際範例 (請從 www.adobe.com/go/learn_programmingAS3samples_flash_tw 下載來源 ZIP 檔案)

程式碼片段範例

程式碼片段看起來如下：

var x:int = 5; 
trace(x); // 5

程式碼片段包含的程式碼，只是用於展示一種想法。它們通常不會包含套件或類別陳述式。

類別範例

很多範例顯示完整 ActionScript 類別的原始碼。類別範例看起來如下：

package { 
    public class Example1 { 
        public function Example1():void { 
            var x:int = 5; 
            trace(x); //5 
        } 
    } 
}

類別範例的程式碼包含一個套件陳述式、類別宣告以及一個建構函式。

包含多個原始碼檔案(Source file)的實際範例

《ActionScript 3.0 開發人員指南》中的很多主題會以實際範例做為總結，這些範例顯示如何在實際環境中使用特定的 ActionScript 功能。這些範例通常內含多個檔案，其中包括：

一或多個 ActionScript 原始碼檔案(Source file)
Flash Professional 使用的 .FLA 檔案
一或多個 Flash Builder 使用的 MXML 檔案
範例應用程式使用的資料檔案、影像檔案、原始碼檔案(Source file)或者其他資源 (選擇性)。

實際範例一般會以 ZIP 封存檔案提供。

開發人員指南的範例 ZIP 檔案清單

Flash Professional CS5 和 Flex 4 的 ZIP 檔案 (請從 www.adobe.com/go/learn_programmingAS3samples_flash_tw 下載) 包含下列範例：

AlarmClock (事件處理範例：鬧鐘)
AlgorithmicVisualGenerator (繪製 API 範例：演算法視覺產生器)
ASCIIArt (字串範例：ASCII 藝術)
CapabilitiesExplorer (功能範例：偵測系統功能)
CustomErrors (處理錯誤範例：CustomErrors 應用程式)
DisplayObjectTransformer (幾何範例：將矩陣變形套用至顯示物件)
FilterWorkbench (濾鏡處理顯示物件範例：濾鏡工作台)
GlobalStockTicker (範例：國際化股票行情應用程式)
IntrovertIM_HTML (外部 API 範例：使用瀏覽器在 ActionScript 和 JavaScript 之間通訊)
NewsLayout (TextField 範例: 報紙樣式文字格式)
PlayList (陣列範例：PlayList)
PodcastPlayer (聲音範例：Podcast Player)
ProjectionDragger (範例：透視投影)
ReorderByZ (使用 Matrix3D 物件以重新排列顯示物件)
RSSViewer (ActionScript 中的 XML 範例：從網際網路載入 RSS 資料)
RuntimeAssetsExplorer (移動影片片段範例：RuntimeAssetsExplorer)
SimpleClock (日期與時間範例：簡易類比時鐘)
SpinningMoon (點陣圖範例：動畫轉動的月球)
SpriteArranger (顯示物件範例：SpriteArranger)
TelnetSocket (TCP 通訊端範例：建立 Telnet 用戶端)
VideoJukebox (視訊範例：視訊點唱機)
WikiEditor (一般表示式範例：Wiki 剖析器)
WordSearch (滑鼠輸入範例：WordSearch)

在「Flash 開發人員中心」和「Flex 開發人員中心」中也可以找到很多與「快速入門」文章有關的實際範例。

在 Flash Professional 執行 ActionScript 3.0 範例

使用下列其中一個程序 (視範例類型而定) 可執行使用 Flash Professional 的範例。

在 Flash Professional 執行程式碼片段範例

在 Flash Professional 執行程式碼片段範例：

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

新的 Flash 視窗隨即顯示。
按一下「時間軸」面板中第一個圖層的第一個影格。
在「動作」面板中，輸入或貼上程式碼片段範例。
選取「檔案 > 儲存」。輸入檔案的名稱，然後按一下「確定」。
若要測試範例，請選取「控制 > 測試影片」。

在 Flash Professional 執行類別範例

在 Flash Professional 執行類別範例：

選取「檔案 > 開新檔案」。
在「新增文件」對話方塊中選取「ActionScript 檔案」，然後按一下「確定」。新的編輯器視窗隨即顯示。
將類別範例程式碼複製後貼到編輯器視窗。

如果此類別是程式的主要文件類別，它必須擴充 MovieClip 類別：
```
import flash.display.MovieClip; 
public class Example1 extends MovieClip{ 
//... 
}
```
另外請確定在範例中參照的所有類別都會使用 import 陳述式來宣告。
選取「檔案 > 儲存」。將檔案的名稱指定為範例中相同的類別名稱 (例如 ContextMenuExample.as)。
備註：某些類別範例，例如 flashx.textLayout.container.ContainerController 類別範例，在套件宣告中包含多個階層 (package flashx.textLayout.container.examples {)。對於這些範例，只要將檔案儲存在符合封裝宣告 (flashx/textLayout/container/examples) 的子資料夾中，或移除封裝名稱 (這樣 ActionScript 會只以 package { 開頭)，您就可以從任何位置測試檔案。
選取「檔案 > 開新檔案」。
在「新增文件」對話方塊中選取「Flash 文件 (ActionScript 3.0)」，然後按一下「確定」。新的 Flash 視窗隨即顯示。
在「屬性」面板中的「文件類別」欄位，輸入範例類別的名稱，此名稱就是剛才儲存的 ActionScript 原始碼檔案(Source file)名稱 (例如 ContextMenuExample)。
選取「檔案 > 儲存」。將 FLA 檔案的名稱指定為範例中相同的類別名稱 (例如 ContextMenuExample.fla)。
若要測試範例，請選取「控制 > 測試影片」。

在 Flash Professional 執行實際範例

實際範例一般會以 ZIP 封存檔案提供。使用 Flash Professional 執行實際範例：

將封存檔案解壓縮至選擇的資料夾。
在 Flash Professional 中，選取「檔案 > 開啟」。
瀏覽封存檔案要解壓縮的資料夾。選取資料夾中的 FLA 檔案，然後按一下「開啟」。
若要測試範例，請選取「控制 > 測試影片」。

在 Flash Builder 執行 ActionScript 3.0 範例

使用下列其中一個程序 (視範例類型而定) 可執行使用 Flash Builder 的範例。

在 Flash Builder 執行程式碼片段範例

在 Flash Builder 執行程式碼片段範例：

建立新的 Flex 專案 (選取「檔案 > 新增 > Flex 專案」) 或者在現有的 Flex 專案中建立新的 MXML 應用程式 (選取「檔案 > 新增 > MXML 應用程式」)。為專案或應用程式指定描述性名稱 (例如 ContextMenuExample)。
在產生的 MXML 檔案中，新增一個 <mx:Script> 標籤。
將程式碼片段內容貼到 <mx:Script> 和 </mx:Script> 標籤之間。儲存 MXML 檔案。
若要執行範例，請選取「執行 > 主要 MXML 檔案的執行功能表選項」(例如「執行 > 執行 ContextMenuExample)」。

在 Flash Builder 執行類別範例

在 Flash Builder 執行類別範例：

選取「檔案 > 新增 > ActionScript 專案」。
在「專案名稱」欄位中輸入主要類別的名稱 (例如 ContextMenuExample)。其他欄位使用預設值 (或者根據您的特殊環境，變更它們)。按一下「完成」，建立專案以及主要的 ActionScript 檔案。
擦除 ActionScript 檔案中任何產生的內容。將包括套件和匯入陳述式的範例程式碼貼到 ActionScript 檔案中，然後儲存檔案。

備註：某些類別範例，例如 flashx.textLayout.container.ContainerController 類別範例，在套件宣告中包含多個階層 (package flashx.textLayout.container.examples {)。對於這些範例，只要將檔案儲存在符合封裝宣告 (flashx/textLayout/container/examples) 的子資料夾中，或移除封裝名稱 (這樣 ActionScript 會只以 package { 開頭)，您就可以從任何位置測試檔案。
若要執行範例，請選取「執行 > 主要 ActionScript 類別名稱的執行功能表選項」(例如「執行 > 執行 ContextMenuExample)」。

在 Flash Builder 執行實際範例

實際範例一般會以 ZIP 封存檔案提供。使用 Flash Builder 執行實際範例：

將封存檔案解壓縮至選擇的資料夾。為資料夾指定描述性名稱 (例如 ContextMenuExample)。
在 Flash Builder 中，選取「檔案 > 新增 Flex 專案」。在「專案位置」部分中，按一下「瀏覽」，然後選取內含範例檔案的資料夾。在「專案名稱」欄位中，輸入資料夾名稱 (例如 ContextMenuExample)。其他欄位使用預設值 (或者根據您的特殊環境，變更它們)。按「下一步」繼續。
在「輸出」面板中按「下一步」，接受預設值。
在「來源路徑」面板中按一下「主要應用程式檔案」欄位旁邊的「瀏覽」按鈕。從範例資料夾選取主要 MXML 範例檔案。按一下「完成」來建立專案檔案。
若要執行範例，請選取「執行 > 主要 MXML 檔案的執行功能表選項」(例如「執行 > 執行 ContextMenuExample)」。

在行動裝置執行 ActionScript 3.0 範例

您可以在支援 Flash Player 10.1 的行動裝置執行 ActionScript 3.0 程式碼範例。不過，一般您可以執行程式碼範例，便能得知特定類別和方法的運作方式。在這種情況下，在桌上型電腦之類的非行動裝置執行範例。在桌上型電腦上，您可以在 Flash Professional 或 Flash Builder 使用 trace 陳述式以及其他除錯工具，增加您對於程式碼範例的瞭解。

若您想在行動裝置上執行範例，可以將檔案複製到裝置或網站伺服器。若要將檔案複製到裝置，然後在瀏覽器中執行範例，請執行以下步驟：

按照在 Flash Professional 執行 ActionScript 3.0 範例或在 Flash Builder 執行 ActionScript 3.0 範例中的指示，執行以下步驟。在 Flash Professional 中，當您選取「控制 > 測試影片」，就可以建立 SWF 檔案。在 Flash Builder 中，當您執行、除錯或建立自己的 Flash Builder 專案時，就可以建立 SWF 檔案。
將 SWF 檔案複製到行動裝置上的目錄。使用裝置提供的軟體來複製檔案。
在行動裝置的瀏覽器位址列，輸入 SWF 檔案的 file:// URL。例如，輸入 file:://applications/myExample.swf。

若要將檔案複製到網站伺服器，然後在裝置的瀏覽器中執行範例，請執行以下步驟：

建立 SWF 檔案以及 HTML 檔案。首先，按照在 Flash Professional 執行 ActionScript 3.0 範例或在 Flash Builder 執行 ActionScript 3.0 範例中的指示執行。在 Flash Professional 中，選取「控制 > 測試影片」，只建立 SWF 檔案。若要建立這兩個檔案，請先在「發佈設定」對話方塊的「格式」索引標籤中選取「Flash」和「HTML」。然後，選取「檔案 > 發佈」，建立 HTML 和 SWF 檔案二者。在 Flash Builder 中，當您執行、除錯或建立自己的 Flash Builder 專案時，就可以同時建立 SWF 檔案和 HTML 檔案。
將 SWF 檔案和 HTML 檔案複製到網站伺服器的目錄。
在行動裝置的瀏覽器位址列，輸入 HTML 檔案的 HTTP 網址。例如，輸入 http://www.myWebServer/examples/myExample.html。

在行動裝置上執行範例之前，請考慮以下每一個問題。

舞台大小

在行動裝置上執行範例時，您使用的舞台大小會比您使用非行動裝置時要小一些。很多範例不需要特殊的「舞台」大小。建立 SWF 檔案時，請指定裝置適合的「舞台」大小。例如，指定 176 x 208 個像素。

在《ActionScript 3.0 開發人員指南》中，實際範例的用途是說明不同的 ActionScript 3.0 概念和類別。他們的使用者介面設計就是要在桌上型電腦或筆記型電腦上看來美觀又好用。雖然，這些範例可以在行動裝置上執行，不過「舞台」大小和使用者介面設計並不適合很小的螢幕。Adobe 建議您在電腦上執行實際的範例，對 ActionScript 有了相當的瞭解之後，再到行動應用程式中使用特定的程式碼片段。

以文字欄位取代 trace 陳述式

在行動裝置上執行範例時，您不會看到範例中的 trace 陳述式輸出。若要瞭解輸出，請建立 TextField 類別的實體。然後。將 trace 陳述式的文字附加至文字欄位的 text 屬性。

您可以使用以下的函數，設定一個文字欄位，以便用於追蹤：

function createTracingTextField(x:Number, y:Number, 
                                width:Number, height:Number):TextField { 
           
    var tracingTF:TextField = new TextField(); 
    tracingTF.x = x; 
    tracingTF.y = y; 
    tracingTF.width = width; 
    tracingTF.height = height; 
     
    // A border lets you more easily see the area the text field covers. 
    tracingTF.border = true; 
    // Left justifying means that the right side of the text field is automatically 
    // resized if a line of text is wider than the width of the text field. 
    // The bottom is also automatically resized if the number of lines of text 
    // exceed the length of the text field. 
    tracingTF.autoSize = TextFieldAutoSize.LEFT; 
     
    // Use a text size that works well on the device. 
    var myFormat:TextFormat = new TextFormat(); 
    myFormat.size = 18; 
    tracingTF.defaultTextFormat = myFormat; 
     
    addChild(tracingTF); 
    return tracingTF; 
}

例如，將此函數新增至文件類別，作為一個私有的函數。然後，在文件的其他方法中，使用類似下列的程式碼來追蹤資料：

var traceField:TextField = createTracingTextField(10, 10, 150, 150); 
// Use the newline character "\n" to force the text to the next line. 
traceField.appendText("data to trace\n"); 
traceField.appendText("more data to trace\n"); 
// Use the following line to clear the text field. 
traceField.appendText("");

appendText() 方法只接受一個值當作是參數。這個值是字串 (字串實體或字串常值)。若要列印非字串變數的值，請先將該值轉換為 String。最簡單的轉換方式就是呼叫物件的 toString() 方法：

var albumYear:int = 1999; 
traceField.appendText("albumYear = "); 
traceField.appendText(albumYear.toString());

文字大小

很多範例使用文字欄位，協助說明概念。有時候，調整文字欄位中的文字大小，可以讓使用者更容易看清楚行動裝置的資料。例如，如果範例使用 myTextField 這個文字欄位實體，請使用以下程式碼變更其文字大小：

// Use a text size that works well on the device. 
var myFormat:TextFormat = new TextFormat( ); 
myFormat.size = 18; 
myTextField.defaultTextFormat = myFormat

擷取使用者輸入

行動作業系統和瀏覽器會捕捉 SWF 內容不會接收的部分使用者輸入事件。特定行為會視作業系統和瀏覽器而定，但是當您在行動裝置執行範例時，可能會造成無法預期的行為。如需詳細資訊，請參閱 KeyboardEvent 優先順序。

而且，很多範例的使用者介面則是針對桌上型電腦和筆記型電腦而設計。例如，《ActionScript 3.0 開發人員指南》中，大部分的實際範例非常適合在桌上型電腦檢視。因此，在行動裝置螢幕上，有時候看不到完整的舞台。瀏覽器內容的平移能力視瀏覽器而定。再者，這些範例的左右移動是針對捕捉以及處理捲動或左右平移事件而設計。因此，部分範例的使用者介面並不適會在較小的螢幕執行。Adobe 建議您在電腦上執行這些範例，對 ActionScript 有了相當的瞭解之後，再到行動應用程式中使用特定的程式碼片段。

如需詳細資訊，請參閱左右移動和捲動顯示物件。

處理焦點

部分範例需要您提供焦點給欄位。提供焦點給欄位後，您就可以輸入文字或選取按鈕。若要提供欄位焦點，請使用行動裝置的指標裝置，例如觸控筆或您的手指。或者，使用行動裝置的導覽鍵，提供欄位焦點。若要選取焦點所在的按鈕，請使用行動裝置的「選取」鍵，就像是使用電腦上的 Enter 一樣。在部分裝置上，輕點按鈕兩下就可以選取它。

如需有關焦點的詳細資訊，請參閱管理焦點。

處理滑鼠事件

很多範例會偵聽滑鼠事件。在電腦上，例如當使用者使用滑鼠在顯示物件上滾動，或者在顯示物件上按一下滑鼠按鍵後，就會發生這些滑鼠事件。在行動裝置上，觸控筆或手指之類的指標裝置所產生的事件，稱為觸控事件。Flash Player 10.1 會將觸控事件對應至滑鼠事件。這種對應關係可以確保先開發 SWF 內容，再繼續 Flash Player 10.1 的工作。因此，使用指標裝置來選取或拖曳顯示物件時，這些範例仍有效。

效能

行動裝置的處理能力比桌上型裝置差。部分消耗大量 CPU 的範例在行動裝置上的執行速度很慢。例如，繪製 API 範例：演算法視覺產生器在進入每一個影格時，會進行大量計算和繪圖。在電腦上執行此範例會說明各種的繪圖 API。不過，由於效能有限，所以此範例不適合部分的行動裝置。

如需行動裝置效能的詳細資訊，請參閱最佳化 Flash 平台的效能。

最佳作法

為行動裝置開發應用程式時，範例並不會將最佳作法納入考量。行動裝置的記憶體與處理能力有限，這一點要特別注意。同樣地，小型螢幕的使用者介面與桌上型電腦顯示器各有不同的需求。如需開發行動裝置應用程式的詳細資訊，請參閱最佳化 Flash 平台的效能。