第 19 章 ActionScript 程式環境 著作權所有 © 旗標出版股份有限公司.

Presentation on theme: "第 19 章 ActionScript 程式環境 著作權所有 © 旗標出版股份有限公司."— Presentation transcript:

1 第 19 章 ActionScript 程式環境 著作權所有 © 旗標出版股份有限公司

2 本章提要 認識 ActionScript 影格動作與元件動作 動作面板 (Actions panel) 的操作

3 認識 ActionScript 為了賦予動畫互動功能, Flash 內含一種名為 ActionScript 的程式語言。這個程式語言是 Macromedia 公司專為 Flash 開發出來的, 它可以讓使用者藉由滑鼠和鍵盤, 控制動畫播放、停止、跳到某個片段, 或是移動動畫中的元件、輸入文字、玩遊戲...等等。

4 認識 ActionScript 在 Flash 5.0 版之後 ActionScript 功能大幅強化, 掀起一陣使用 Flash 製作網路遊戲的風潮。Flash MX 2004 更提昇版本為 ActionScript 2.0, 將動畫的程式功能推向更高點。不過你也不用一聽到它是程式語言就感到畏懼, 因為它具有操作簡易、除錯功能強大的程式撰寫環境 — 動作面板 (Actions panel), 即使不熟程式語言的人也能輕鬆上手。

5 影格動作與元件動作 影格動作 (Frame Actions) 元件動作 Object Actions
設定 ActionScript 的基本方法 Flash MX 2004 動作面板的編輯模式

6 影格動作 (Frame Actions) 影格動作 (Frame Actions) 就是指設在影格中的 ActionScript。這類 ActionScript 必須設在關鍵影格或空白關鍵影格裡。它藉由動畫播放來觸發動作, 也就是當動畫播放到設有 ActionScript 的關鍵影格時, 就會執行該 ActionScript。此種 ActionScript 通常都應用在動畫的播放控制方面。

7 元件動作 Object Actions 元件動作 (Object Actions) 就是指設在實體上的 ActionScript。它藉由滑鼠、鍵盤事件、以及影片片段的狀態...等等來觸發, 例如按下按鈕即執行某段 ActionScript。此種 ActionScript 常用於由使用者來控制的互動性設計。

8 元件動作 Object Actions 按鈕動作：設在按鈕元件之實體上的 ActionScript, 更嚴格地說, 應該是指設在行為指令為按鈕的實體上之 ActionScript。 影片片段動作：設在影片片段元件之實體上的 ActionScript, 更嚴格地說, 應該是指設在行為指令為影片片段的實體上之ActionScript。

9 設定 ActionScript 的基本方法 先點選要設置 ActionScript 的位置 (關鍵影格、空白關鍵影格或實體), 然後執行『視窗 / 開發面板 / 動作』命令 (或按 鍵) 開啟動作面板, 便可在該位置設定 ActionScript：

10 設定 ActionScript 的基本方法

11 Flash MX 2004 動作面板的 編輯模式 曾經使用過舊版 Flash 的讀者, 應該知道動作面板有分一般模式 (Normal Mode) 與專家模式 (Expert Mode), 切換至一般模式時, 會出現參數區讓你用填寫欄位的方式輸入各項指令參數；切換至專家模式則是要自己在 Script 窗格中逐字輸入。 不過新版的 Flash MX 2004 已經取消一般模式的編輯方式, 只保留以前所謂的專家模式, 因此也就不再區分編輯模式了。

12 動作面板 (Actions panel) 的操作
動作工具箱 Script 窗格 動作面板選項選單

13 動作工具箱 動作工具箱分類顯示各種動作 (即ActionScript 指令)。

14 動作工具箱 分類資料夾：圖示 或 表示分類資料夾, 按一下便可展開或收合該分類下所有指令。展開的分類資料夾圖示為 。
分類資料夾：圖示 或 表示分類資料夾, 按一下便可展開或收合該分類下所有指令。展開的分類資料夾圖示為 。 動作： 或 圖示表示動作 (或稱ActionScript 指令) , 雙按該指令 (或拉曳到 Script 窗格中), 即可將該指令加入 Script 窗格中。

15 Script 窗格

16 Script 窗格 在 Script 中增加新的項目：可按此鈕選擇指令來加入 Script 窗格。
取代：可搜尋程式碼中某一字串 (或變數...等), 並將之替換成別的字串。

17 Script 窗格 插入目標路徑：按此鈕可開啟插入目標路徑交談窗, 指定舞台中特定的實體來做為 ActionScript 的作用對象。
自動格式化：可依 Flash 預設的格式自動替程式排版, 若你另有個人偏好的排版方式, 則可執行動作面板的選項選單中的『自動格式化選項』命令來設定。

18 Script 窗格 顯示程式碼提示：可顯示在 Script 窗格中, 目前插入點所在, 尚未鍵入完成之指令的語法提示。

19 Script 窗格 參考：按 鈕可開啟說明面板, 查詢目前在動作工具箱或 Script 窗格中所選指令的詳細使用方法與範例程式。

20 Script 窗格 檢視選項：此鈕底下有 3 項命令, 功能分別是 — 在動作工具箱中顯示指令的快速鍵、使 Script 窗格顯示程式碼行數編號、程式碼自動折行。 鎖定目前Script：鎖定 / 解除鎖定目前編寫 ActionScript 的位置。鎖定後, 即使點選別的關鍵影格或實體, 也無法切換至其他位置編輯程式。這個功能可以避免在修改動畫時, 因為不小心錯點其他影格或實體, 而將程式編寫到錯誤的位置上。

21 動作面板選項選單 按下動作面板右上角的 鈕, 會出現如右圖之選項選單, 其中有許多實用的命令, 不過大部分與前面介紹過的各按鈕功能重疊, 故以下我們針對前面沒提過的部分加以說明：

22 動作面板選項選單 前往行數：可指定要跳到 Script 窗格程式碼中的第幾行。
再次尋找：用上一次執行尋找功能時用的關鍵字再次搜尋, 所以要使用過尋找功能, 才可以使用再次尋找功能。 匯入 Script：將含有 ActionScript 程式碼的檔案 (.as 檔或 .txt 檔) 匯入。

23 動作面板選項選單 匯出 Script：將編輯好的 ActionScript 程式碼匯出成獨立檔案 (.as 檔或 .txt 檔)。當你寫了一些很大很複雜的程式時, 可以考慮將它匯出成獨立檔案來保存, 下次要利用它時, 就可以直接匯入修改, 省去重新編輯的麻煩。 列印：將 Script 窗格中的程式碼列印出來。

24 動作面板選項選單 自動格式化選項：若你有個人偏 好的程式碼排 版方式, 可執 行此命令來設
定。設定好後, 下次執行『自動格式化』命令時, 便會套用你所設定的格式化規則。

25 動作面板選項選單 偏好設定：選此命令可開啟偏好設定交談窗的 ActionScript 頁次來修改有關動作面板的偏好設定。
說明：開啟 Flash 軟體操作說明。

26 偏好設定

27 撰寫你的第一行 ActionScript ActionScript 程式的結構 使用時間軸控制項指令 時間軸控制項指令介紹
使用 stop 指令讓動畫停止播放 使用 gotoAndyPlay 指令控制動畫播放 時間軸控制項指令介紹 撰寫 ActionScript 的注意事項 善用 ActionScript 指令輔助說明

28 ActionScript 程式的結構 因此底下我們先對 ActionScript 的程式做簡單分析：

29 ActionScript 程式的結構 當你利用動作工具箱將指令插入 Script 中, 程式會自動做格式化 (換行、縮排…等)。程式格式化的目的主要為了方面閱讀, 沒有格式化的程式也可以正常執行, 例如底下這段程式, 它的執行結果和上圖的程式是一樣的：

30 使用時間軸控制項指令 現在就來撰寫你的第一行 ActionScript 吧！動作工具箱裡全域變數 / 時間軸控制項類別中是最常用到、也最簡單的指令, 它們的作用是控制整個影片的播放狀態。 首先, 請雙按 ch19.swf 檔, 觀察這個 Flash 影片, 這是一個小人由左往右跑的動畫, 而且會不斷重複播放, 亦即往右跑出舞台後會繼續從左邊出現：

31 使用時間軸控制項指令

32 使用時間軸控制項指令 接著開啟該影片的原始 Flash 動畫檔 ch19.fla, 你可以看出它是一個具有 24 格影格, 單純的移動補間動畫 。在沒有特別 做任何設定的 狀況下, 匯出 的 Flash 影片 便會不斷地重 複播放。

33 使用 stop 指令讓動畫停止播放 再請雙按 ch19-1.swf 檔看看, 這個 Flash 影片加入了 1 個讓動畫停止播放的影格動作, 因此在播放完一遍小人由左跑到右的動畫之後, 就停住不再重複播放。這個能讓動畫停止播放的指令就是全域函數 / 時間軸控制項類別下的 stop。 接下來就請開啟 ch19-learn1.fla 檔, 我們來練習加入 stop 指令, 製作出如 ch19-1.swf 的 Flash 影片：

34 使用 stop 指令讓動畫停止播放

35 使用 stop 指令讓動畫停止播放 你的第一行 ActionScript 程式就這樣完成了！按下 鍵測試影片, 或是匯出 Flash 影片檔看看, 影片是不是播放到第 24 格時, 就乖乖聽從 stop 指令的指示, 停止播放了呢？

36 使用 gotoAndyPlay 指令控制動畫 播放
請雙按 ch19-2.swf 檔看看, 這個 Flash 影片加入了另 1 個能指定動畫播放位置的影格動作, 因此在播放完一遍小人由左跑到右的動畫之後, 就跳到正中間, 然後向右跑去, 並重複播放從中間跑到右邊的動畫。這個能指定動畫播放起點的指令就是全域函數 / 時間軸控制項類別下的 gotoAndyPlay。 請開啟 ch19-learn2.fla 檔, 我們來練習加入 gotoAndyPlay 指令：

37 使用 gotoAndyPlay 指令控制動畫 播放

38 使用 gotoAndyPlay 指令控制動畫 播放
你的第 2 個 ActionScript 程式完成囉！按下 鍵測試影片看看, 影片播放到第 24 格時, 是否就乖乖聽從 gotoAndyPlay 指令的指示, 跳到 half 影格標籤處播放了呢？

39 時間軸控制項指令介紹 gotoAndPlay
gotoAndyPlay 指令可以指定直接跳到某個影格繼續播放, 參數設定為前往的場景、影格編號或影格標籤名稱, 也可用運算式、變數來指定影格。

40 時間軸控制項指令介紹 gotoAndStop
gotoAndStop 指令可以指定跳到某個影格後停止在該處, 用法類似 gotoAndy Play, 參數同樣是輸入前往的影格編號或影格標籤名稱, 也可用運算式、變數來指定影格。

41 時間軸控制項指令介紹 nextFrame、prevFrame、nextScene、prevScene
這 4 個指令用法類似, 都不需要加入任何參數, 各功能說明如下：

42 時間軸控制項指令介紹 Play 指令是簡單的時間軸控制指令, 它不需要設定任何參數, 直接加入 play ( )；指令即可, 作用則是指定動畫從所在影格處開始播放。 Stop 指令是簡單的時間軸控制指令, 不需要設定任何參數, 直接加入 stop ( )；指令即可, 而作用則是叫動畫停在所在影格。 stopAllSounds : 當你加入 stopAllSounds ( )；指令, 就可以停止播放動畫中所有的聲音。

43 撰寫 ActionScript 的注意事項 在動畫中建立獨立的圖層來放置影格動作, 以免撰寫 ActionScript 時不小心動到了動畫內容。 多多利用動作工具箱來加入指令。因為程式指令不容許任何一點空格、大小寫、標點符號的錯誤, 所以利用動作工具箱來加入指令可以避免指令輸入錯誤造成程式無法執行。

44 撰寫 ActionScript 的注意事項 撰寫程式時, 請養成加上程式註解的好習慣, 對於日後動畫的維護非常有幫助。

45 撰寫 ActionScript 的注意事項 學習使用 trace 指令來追蹤程式運作狀況, 如此可以做到基本的除錯, 對於解決程式開發過程中的問題也有很大的幫助。 trace 指令可用來傳送訊息到輸出視窗, 通常利用此指令來檢查變數的值、函數的結果、物件的屬性…等正確與否。

46 撰寫 ActionScript 的注意事項

47 撰寫 ActionScript 的注意事項

48 善用 ActionScript 指令輔助說明
ActionScript 的指令那麼多, 對於陌生的指令, 建議你從動作面板的動作工具箱中選取想了解的指令, 然後按下面板右上角的參考鈕, 即可顯示說明面板查看 該指令的用法, 如此也能漸漸提升你撰寫 ActionScript 的功力喔！

49 善用 ActionScript 指令輔助說明

50 使用行為指令面板來加入 ActionScript
行為指令面板的用法 加入行為指令

51 行為指令面板的用法 除了在動作面板中一行一行編輯 ActionScript 指令, 還可以從行為指令面板選取現成的功能指令, 讓 Flash 自動幫你把對應的 ActionScript 寫入動作面板, 您完全都不需要自己寫程式呢！請執行『視窗 / 開發面板 / 行為指令』命令開啟面板：

52 行為指令面板的用法

53 加入行為指令 舉例來說, 以前如果我們想要按下按鈕時開啟某個網頁, 必須在動作面板中加入 on (release)、getURL ( ) 一串指令, 現在則只要從行為指令面板中選擇『網頁 / 前往網頁』, 然後輸入連結網址就完成了, 輕鬆又方便！步驟如下：

54 加入行為指令

55 加入行為指令

56 加入行為指令 此時你若開啟動作面板, 就會發現上面的設定已經通通轉成 ActionScript 了：