範例:動畫作品集 (Flash Professional)

這個範例設計的目的,是要讓您有機會一睹 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() 的函數。這個函數會先建立一個 URLRequest 實體,代表 URL http://example.com/。然後它會將 URL 傳遞至 navigateToURL() 函數,讓使用者的瀏覽器開啟這個 URL。

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

    homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

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

測試應用程式

應用程式現在具有完整功能了。讓我們來進行測試,確定一下情況。

測試應用程式:

  1. 從主選單中選擇「控制 > 測試影片」。Flash Professional 便會建立 SWF 檔,並在 Flash Player 視窗開啟它。

  2. 試著按一下這兩個按鈕,確定它們會依照您所預期的執行。

  3. 如果按鈕沒有作用,則需要檢查下列事項:

    • 按鈕的實體名稱是否彼此不同?

    • addEventListener() 方法呼叫所用的名稱是否與按鈕的實體名稱相同?

    • addEventListener() 方法呼叫使用的事件名稱是否正確?

    • 是否為每個函數指定了正確的參數 (兩個方法都需要一個資料類型為 MouseEvent 的參數。)

    以上所有錯誤以及其他最常見的錯誤,都會引發錯誤訊息。當您選擇「測試影片」命令,或者您在測試專案時按一下按鈕,都會顯示錯誤訊息。請查看「編譯器錯誤」面板中的編譯器錯誤 (第一次選擇「測試影片」時發生的錯誤)。檢查「輸出」面板有無執行階段錯誤 (當內容播放時發生的錯誤;例如,按一下按鈕時)。