Flash CS3 文件

ActionScript 3.0 程式設計 > ActionScript 快速入門 > 範例：動畫作品集

範例：動畫作品集

這個範例設計的目的，是要讓您有機會一睹 ActionScript 程式碼片段如何能拼湊成完整應用程式 (如果使用的 ActionScript 數量不是太大的話) 的神奇。「動畫作品集」這個範例示範如何取用現有的線性動畫 (例如，為客戶建立的作品項目) 並加入一些適合用來將該動畫整合到線上作品集中的次要互動式元素。我們在動畫中加入的互動式行為，會包含兩個可供觀賞者按下的按鈕：一個用來啟動動畫，另一個用來瀏覽至不同的 URL (如作品集選單或作者的首頁)。

建立這個作品項目的程序可以分成下列幾個主要部分：

1. 準備 FLA 檔以便用來加入 ActionScript 和互動式元素。
2. 建立和加入按鈕。
3. 撰寫 ActionScript 程式碼。
4. 測試應用程式。

副主題

準備加入互動性

在動畫中加入互動式元素之前，先建立一些容納新增內容的位置來設定 FLA 檔，會很有幫助。相關的步驟包括：建立可在「舞台」上放置按鈕的空間，以及建立可在 FLA 檔中分別保存不同項目的「空間」。

設定 FLA 以便加入互動式元素：

1. 如果您並沒有要加入互動性的線性動畫，請建立包含簡單動畫 (如單一移動補間動畫或形狀補間動畫) 的新 FLA 檔。若有的話，請開啟含有您在專案中展示之動畫的 FLA 檔，並另用新名稱儲存以建立新的工作檔案。
2. 決定您希望兩個按鈕 (一個會啟動動畫，另一個則連結到作者的作品集或首頁) 出現在螢幕上的位置。如有必要，請在「舞台」上為這個新內容清除或增加一些空間。如果動畫的位置尚未決定，您可能會想要在第一個影格上建立開頭畫面 (或許您要改變動畫的位置，讓它在「影格 2」或之後的影格上開始播放)。
3. 在「時間軸」中的其它圖層上方增加新圖層，並重新命名為 buttons。這將會是您在其中加入按鈕的圖層。
4. 在這個 buttons 圖層上方增加新圖層，並命名為 actions。這是您要將 ActionScript 程式碼加入應用程式的地方。

建立並加入按鈕

接下來，我們必須實際建立和放置構成互動式應用程式主軸的按鈕。

建立按鈕並將它加入 FLA：

1. 使用繪圖工具，在 buttons 圖層上建立第一個按鈕 (「播放」按鈕) 的視覺外觀。例如，您可以繪製上面有文字的水平橢圓形。
2. 使用「選取」工具選取這一個按鈕的所有圖像部分。
3. 從主選單中選擇「修改＞轉換成元件」。
4. 在對話方塊中選擇「按鈕」做為元件類型，指定元件的名稱，然後按一下「確定」。
5. 選取按鈕之後，在「屬性」檢測器中指定按鈕的實體名稱為 playButton。
6. 重複步驟 1 到 5，建立會將觀賞者帶到作者首頁的按鈕。將這個按鈕命名為 homeButton。

撰寫程式碼

這個應用程式的 ActionScript 程式碼可以分成三組功能，但全部都是輸入在同一個位置。這個程式碼必須做的三件事，如下：

• 一旦 SWF 檔載入 (當播放磁頭進入「影格 1」) 時，立即停止播放磁頭。
• 偵聽事件，以便在使用者按一下「播放」按鈕時開始播放 SWF 檔。
• 偵聽事件，以便在使用者按一下作者首頁按鈕時，讓瀏覽器進入適當的 URL。

建立程式碼，以便在播放磁頭進入「影格 1」時停止它：

1. 選取 actions 圖層「影格 1」上的關鍵影格。
2. 若要開啟「動作」面板，請從主選單中選擇「視窗＞動作」。
3. 在 Script 窗格中，輸入下列程式碼：

   stop();
   

撰寫程式碼，以便在按一下「播放」按鈕時啟動動畫：

1. 在上個步驟中輸入的程式碼結尾處，加入兩行空行。
2. 在 Script 底部輸入下列程式碼：

   function startMovie(event:MouseEvent):void
   {
       this.play();
   }
   

   這個程式碼會定義名為 startMovie() 的函數。當呼叫 startMovie() 時，就會讓主要時間軸開始播放。

3. 在緊接上個步驟所加入程式碼之後的那一行，輸入下面這行程式碼：

   playButton.addEventListener(MouseEvent.CLICK, startMovie);
   

   這行程式碼會將 startMovie() 函數註冊為 playButton 之 click 事件的偵聽程式。換句話說，程式碼會設定成每當按一下 playButton 這個按鈕時，便呼叫 startMovie() 函數。

撰寫程式碼，以便在按一下首頁按鈕時，讓瀏覽器瀏覽至某個 URL：

1. 在上個步驟中輸入的程式碼結尾處，加入兩行空行。
2. 在 Script 底部輸入下列程式碼：

   function gotoAuthorPage(event:MouseEvent):void
   {
       var targetURL:URLRequest = new URLRequest("http://example.com/");
       navigateToURL(targetURL);
   }
   

   這個程式碼會定義名為 gotoAuthorPage() 的函數。這個函數首先會建立代表 URL http://example.com/ 的 URLRequest 實體，然後將這個 URL 傳遞給 navigateToURL() 函數，讓使用者的瀏覽器開啟該 URL。

3. 在緊接上個步驟所加入程式碼之後的那一行，輸入下面這行程式碼：

   homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);
   

   這行程式碼會將 gotoAuthorPage() 函數註冊為 homeButton 之 click 事件的偵聽程式。換句話說，程式碼會設定成每當按一下 homeButton 這個按鈕時，便呼叫 gotoAuthorPage() 函數。

測試應用程式

此時，應用程式應該可以完全發揮功能。讓我們來進行測試，確定一下情況。

測試應用程式：

1. 從主選單中選擇「控制＞測試影片」。Flash 便會建立 SWF 檔，並在 Flash Player 視窗中開啟它。
2. 試著按一下這兩個按鈕，確定它們會依照您所預期的執行。
3. 如果按鈕沒有作用，則需要檢查下列事項：
   • 按鈕的實體名稱是否彼此不同？
   • addEventListener() 方法呼叫所用的名稱是否與按鈕的實體名稱相同？
   • addEventListener() 方法呼叫使用的事件名稱是否正確？
   • 是否為每個函數指定了正確的參數？(兩個函數都應該只有一個資料類型為 MouseEvent 的參數)。

   當您選擇「測試影片」命令，或者按一下按鈕時，上述所有情況以及其它大部分的可能錯誤都應該會產生錯誤訊息。請查看「編譯器錯誤」面板中是否有編譯器錯誤 (當您第一次選擇「測試影片」時發生的錯誤)，並檢查「輸出」面板有無執行階段錯誤 (當 SWF 進行播放時發生的錯誤；例如，當您按一下按鈕時)。

Flash CS3

有新的意見加入至這個頁面時，傳送電子郵件給我 | 意見報告

目前頁面: http://livedocs.adobe.com/flash/9.0_tw/main/00000026.html

加入意見