如何搭配使用 ActionScript 與 Animate

  1. Adobe Animate 使用手冊
  2. Animate 簡介
    1. Animate 的新功能
    2. 視覺詞彙
    3. Animate 系統需求
    4. Animate 鍵盤快速鍵
    5. 在 Animate 中使用多個檔案類型
  3. 動畫
    1. Animate 中的動畫基本概念
    2. 如何在 Animate 中使用影格及關鍵影格
    3. Animate 中的逐格動畫
    4. 如何在 Animate 中使用傳統補間動畫
    5. 筆刷工具
    6. 移動導引線
    7. 移動補間動畫與 ActionScript 3.0
    8. 關於移動補間動畫
    9. 移動補間動畫
    10. 建立移動補間動畫
    11. 使用屬性關鍵影格
    12. 使用補間動畫將位置製成動畫
    13. 如何使用移動編輯器編輯移動補間動畫
    14. 編輯補間動畫的移動路徑
    15. 操作移動補間動畫
    16. 新增自訂加/減速
    17. 建立和套用移動預設效果
    18. 設定動畫補間動畫範圍
    19. 使用儲存為 XML 檔案的移動補間動畫
    20. 移動補間動畫與傳統補間動畫
    21. 形狀補間動畫
    22. 在 Animate 中使用骨塊工具動畫
    23. 在 Animate 進行角色製作
    24. 如何在 Adobe Animate 中使用遮色片圖層
    25. 如何在 Animate 中使用場景
  4. 互動
    1. 如何使用 Animate 建立按鈕
    2. 將 Animate 專案轉換成其他文件類型格式
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 在 Animate 中使用程式碼片段增加互動功能
    5. 建立自訂 HTML5 組件
    6. 在 HTML5 Canvas 中使用組件
    7. 建立自訂組件:範例
    8. 自訂組件的程式碼片段
    9. 最佳作法 - 使用 Animate 做廣告
    10. 虛擬實境編寫和發佈
  5. 工作區和工作流程
    1. 建立和管理繪圖筆刷
    2. 在 HTML5 Canvas 文件中使用 Google 字體
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作區
    6. 在 HTML5 Canvas 文件中使用網頁字體
    7. 時間軸與 ActionScript
    8. 使用多重時間軸
    9. 設定偏好設定
    10. 使用 Animate 編寫面板
    11. 使用 Animate 建立時間軸圖層
    12. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    13. 移動和複製物件
    14. 範本
    15. Animate 中的尋找和取代
    16. 還原、重做和操作記錄面板
    17. 鍵盤快速鍵
    18. 如何在 Animate 中使用時間軸
    19. 建立 HTML 擴充功能
    20. 影像和 GIF 動畫的最佳化選項
    21. 匯出影像和 GIF 的設定
    22. Animate 中的資源面板
  6. 多媒體和視訊
    1. 在 Animate 中變形及結合圖像物件
    2. 在 Animate 中建立並使用元件實體
    3. 影像描圖
    4. 如何在 Adobe Animate 中使用聲音
    5. 匯出 SVG 檔案
    6. 建立要在 Animate 中使用的視訊檔案
    7. 如何在 Animate 增加視訊
    8. 使用視訊提示點
    9. 使用 Animate 繪製及建立物件
    10. 調整線條和形狀
    11. 使用 Animate CC 中的筆畫、填色和漸層
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的色彩面板
    14. 使用 Animate 開啟 Flash CS6 檔案
    15. 在 Animate 中使用傳統文字
    16. 將圖案放入 Animate 中
    17. Animate 中匯入的點陣圖
    18. 3D 圖像
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 繪製線條和形狀
    21. 使用 Animate 中的元件庫
    22. 匯出聲音
    23. 在 Animate CC 中選取物件
    24. 在 Animate 中使用 Illustrator AI 檔案
    25. 使用噴刷工具套用圖樣
    26. 套用混合模式
    27. 排列物件
    28. 使用命令選單自動執行工作
    29. 多國語言文字
    30. 使用 Animate 中的攝影機
    31. 搭配使用 Animate 與 Adobe Scout
    32. 使用 Fireworks 檔案
    33. 圖像濾鏡
    34. 聲音和 ActionScript
    35. 繪圖偏好設定
    36. 使用鋼筆工具繪圖
  7. 平台
    1. 將 Animate 專案轉換成其他文件類型格式
    2. 自訂平台支援
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 建立並發佈 WebGL 文件
    5. 如何封裝 AIR for iOS 的應用程式
    6. 發佈 AIR for Android 應用程式
    7. Adobe AIR for Desktop 的發佈功能
    8. ActionScript 發佈設定
    9. 最佳作法 - 在應用程式中組織 ActionScript
    10. 如何搭配使用 ActionScript 與 Animate
    11. 最佳作法 - 輔助功能原則
    12. Animate 工作區中的輔助功能
    13. 撰寫和管理指令碼
    14. 啟用自訂平台的支援
    15. 自訂平台支援概觀
    16. 建立輔助功能內容
    17. 使用自訂平台支援外掛程式
    18. ActionScript 3.0 的除錯
    19. 啟用自訂平台的支援
  8. 匯出與發佈
    1. 如何從 Animate CC 匯出檔案
    2. OAM 發佈
    3. 匯出 SVG 檔案
    4. 使用 Animate 匯出圖像和視訊
    5. 發佈 AS3 文件
    6. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    7. 匯出聲音
    8. 匯出 QuickTime 視訊檔
    9. 使用 ActionScript 控制外部視訊播放
    10. 最佳作法 - 建立行動裝置內容的秘訣
    11. 最佳作法 - 視訊慣例
    12. 最佳作法 - SWF 應用程式編寫原則
    13. 最佳作法 - 建構 FLA 檔
    14. 最佳化 Animate 的 FLA 檔案的最佳作法
    15. ActionScript 發佈設定
    16. 指定 Animate 的發佈設定
    17. 匯出放映檔
    18. 匯出影像和 GIF 動畫
    19. HTML 發佈範本
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和發佈您的動畫

ActionScript 快速入門

ActionScript® 的指令碼編寫語言能讓您在應用程式中加入複雜的互動功能、播放控制項和資料顯示。您可以使用「動作」面板、Script 視窗,或是外部編輯器,將 ActionScript 新增到編寫環境中。

ActionScript 遵循自己的語法規則、保留關鍵字,並讓您使用變數以存放和擷取資訊。ActionScript 包含大型的內建類別元件庫,這些內建類別能讓您建立物件以執行許多有用的工作。如需有關 ActionScript 的詳細資訊,請參閱下列說明手冊:

您不需要了解每一個 ActionScript 元素,就可以開始編寫指令碼;如果目標明確,便可開始建立簡單動作的指令碼。

ActionScript 與 JavaScript 都根源於 ECMA-262 標準 (國際通用的 ECMAScript 指令碼編寫語言標準)。因此,熟悉 JavaScript 的開發人員會發現自己對 ActionScript 全然不陌生。如需有關 ECMAScript 的詳細資訊,請造訪 ecma-international.org。

您可以使用何種 ActionScript 版本?

Animate 包含了一個以上的 ActionScript 版本,以便滿足不同類型開發人員及播放硬體之需求。ActionScript 3.0 與 2.0 彼此「不」相容。

 

  • ActionScript 3.0 的執行速度很快。相較於其他版本的 ActionScript 而言,使用者必須對物件導向的程式設計概念有相當的認識,才能使用這個版本。ActionScript 3.0 與 ECMAScript 規格完全相容,也提供了更好的 XML 處理、改良式事件模型及增強的螢幕元素處理架構。使用 ActionScript 3.0 的 FLA 檔案無法包含舊版的 ActionScript。

  • (僅限 Animate 不建議使用) ActionScript 2.0 學習起來,要比 ActionScript 3.0 來得容易許多。儘管 Flash Player 在執行編譯過的 ActionScript 2.0 程式碼時,速度比執行編譯過的 ActionScript 3.0 程式碼要來得慢,但是 ActionScript 2.0 還是能夠運用在許多種類的專案上。對於運算資源要求比較寬鬆的專案,ActionScript 2.0 也相當適合,比如一些比較偏重設計的內容。ActionScript 2.0 也是以 ECMAScript 規格為架構,但並沒有完全相容。

  • (已於 Animate 中被取代) ActionScript 1.0 是最簡單的 ActionScript 形式,而且某些版本的 Adobe Flash Lite Player 還在使用這個版本。ActionScript 1.0 和 2.0 可以同時存在於相同的 FLA 檔案中。

  • (已於 Animate 中被取代) Flash Lite 2.x ActionScript 為 ActionScript 2.0 的子集,後者可由在行動電話及裝置上執行的 Flash Lite 2.x 所支援。

  • (已於 Animate 中被取代) Flash Lite 1.x ActionScript 為 ActionScript 1.0 的子集,後者可由在行動電話及裝置上執行的 Flash Lite 1.x 所支援。

 

使用 ActionScript 文件

因為 ActionScript 有多個版本 (2.0 和 3.0),而且還有多種方式可以將 ActionScript 合併到 FLA 檔,因此,要了解 ActionScript 就有不同的方法。

您可以找到有關使用 ActionScript 圖形使用者介面的說明。包括「動作」面板、Script 視窗、「指令碼助理」模式、「行為指令」面板、「輸出」面板和「編譯器錯誤」面板。這些主題適用於所有版本的 ActionScript。

其他由 Adobe 所提供的 ActionScript 文件可引導您了解各種 ActionScript 版本的差異。

ActionScript 的使用方式

使用 ActionScript 的方式有很多種。

  • (已於 Animate 中被取代)「指令碼助理」模式讓您不需自行撰寫程式碼,即可將 ActionScript 加入 FLA 檔案。您只要選取動作,軟體就會顯示使用者介面,供您輸入每個動作所需的參數。稍微了解要使用哪些函數來完成特定的工作,但並不需要學會語法。許多設計人員及非程式設計人員都使用此模式。

  • (已於 Animate 中被取代)「行為指令」也讓您不需自行撰寫程式碼,即可將程式碼加入檔案。行為指令是預先撰寫的指令碼,用於最常執行的工作。您可以加入一個行為指令,然後輕鬆地在「行為指令」面板中加以設定。行為指令只適用於 ActionScript 2.0 及舊版。

  • 撰寫您自己的 ActionScript,便可擁有最大的彈性及文件控制權,但您必須對 ActionScript 語言和慣例十分熟悉。

  • 組件是預先建立的影片片段,能讓您實作複雜的功能。組件可以是簡單的使用者介面控制項 (例如核取方塊),也可以是複雜的控制項 (例如捲動窗格)。您不但可以自訂組件的功能與外觀,還可以下載其他開發人員所建立的組件。對大部分的組件來說,您需要編寫部分屬於自己的 ActionScript 程式碼來觸發或控制組件。如需詳細資訊,請參閱使用 ActionScript 3.0 組件

 

撰寫 ActionScript

當您在編寫環境中撰寫 ActionScript 程式碼時,您會使用「動作」面板或指令碼視窗。「動作」面板或 Script 視窗包含了完整功能的程式碼編輯器,其中包括程式碼提示和標色、程式碼格式設定、語法反白標示。另外也包含除錯、行號、文字換行以及 Unicode 支援。

  • 使用「動作」面板,撰寫屬於 Animate 文件一部分的指令碼 (也就是內嵌於 FLA 檔案中的指令碼)。「動作」面板提供了一些功能,例如「動作工具箱」,它能讓您快速存取核心的 ActionScript 語言元素。它會提示您建立指令碼所需的元素。

  • 如果您想要撰寫外部指令碼 (也就是存放在外部檔案中的指令碼或類別),請使用 Script 視窗。(此外,也可以使用文字編輯器建立外部 AS 檔案)。Script 視窗包括程式碼協助功能,例如程式碼提示和標色、語法檢查和自動格式化。

更多的建議社群內容

以下「文章和教學課程」提供更多有關使用 ActionScript 的詳細資訊:

輸出面板概觀

當您執行任何文件類型時,「輸出」面板會顯示與文件轉換或發佈等操作有關的資訊或警告。若要顯示此資訊,可以在程式碼中加入 trace() 陳述式,或者使用「列出物件」或「列出變數」命令。

如果在指令碼中使用 trace() 陳述式,便能在 SWF 檔案執行時,將特定資訊傳送到「輸出」面板。此資訊可能包含有關 SWF 檔案狀態或運算式值的備註。 

輸出面板

「輸出」面板包含下列功能表項目:

  • 複製:將「輸出」面板的所有內容複製到電腦的「剪貼簿」。若要複製輸出的選定部分,請選取您要複製的區域,然後選取「複製」。
  • 清除:清除「輸出」面板的內容。
  • 顯示輸出:顯示「輸出」面板的內容。
  • 鎖定:鎖定面板。您只能調整面板大小,無法移動或拖曳面板。
  • 說明:載入「輸出」面板的線上說明。
  • 關閉:關閉「輸出」面板。
  • 關閉群組:關閉整個面板群組。您可以同時固定多個面板,例如「時間軸」、「輸出」面板及「編譯器錯誤」面板。

若要顯示或隱藏「輸出」面板,選取「視窗 > 輸出」或按 F2。

動作面板

在尋找語言參考嗎?

若要尋找特定 ActionScript 語言元素的參考文件,請執行下列其中一項:

註解:

若要在網頁瀏覽器而非「社群說明」應用程式中開啟「說明」,請參閱這篇文章:http://kb2.adobe.com/community/publishing/916/cpsid_91609.html

學習 ActionScript

若要了解如何撰寫 ActionScript,請使用下列資源:

註解:

ActionScript 3.0 與 2.0 彼此不相容。為每個建立的 FLA 檔案只選擇一個版本。

動作面板概觀

若要建立內嵌於 FLA 檔案中的指令碼,請直接在「動作」面板 (「視窗 > 動作」或按下 F9) 輸入 ActionScript。

動作面板

「動作」面板是由兩個窗格所組成:

Script 窗格

讓您可以輸入與目前選取之影格相關聯的 ActionScript 程式碼。

Script 導覽器

列出您 Animate 文件中的指令碼,並且可讓您在指令碼之間快速地移動。若要在「Script」窗格檢視指令碼,按一下「Script 導覽器」中的項目。

「動作」面板能讓您存取程式碼協助功能,這些功能可簡化並提升在 ActionScript 中編寫程式碼的效率。您可以增加非影格特定的全域及協力廠商指令碼,以便從 Animate 中套用到整個動畫。如需詳細資訊,請參閱本頁中的增加全域及協力廠商指令碼章節。

  • 執行指令碼:執行指令碼
  • 鎖定 Script:鎖定指令碼,可以鎖定「Script」窗格中個別指令碼的標籤,並且據此加以移動。如果您尚未將 FLA 檔案內的程式碼組織到一個集中的位置,這個功能很有用。或者,如果您使用多個指令碼,這也很實用。您可以鎖定指令碼,以便在「動作」面板中保留程式碼的開放位置,並且在各種開啟的程式碼之間切換使用。這個功能在除錯時很有用。
  • 插入實體路徑和名稱:協助您設定指令碼中某個動作的絕對或相對目標路徑。
  • 尋找:尋找和取代指令碼中的文字。
  • 格式化程式碼:協助格式化程式碼。
  • 程式碼片段:開啟顯示範例程式碼片段的「程式碼片段」面板。
  • 使用精靈新增:按一下這個按鈕,使用易於使用的精靈新增動作,無需撰寫程式碼。
  • 說明:為「Script」窗格中所選取的 ActionScript 元素顯示參考資訊。例如,如果您按一下 import 陳述式,然後按一下「說明」,import 的參考資訊便會出現在「說明」面板中。

使用動作程式碼精靈

您可以使用「動作」面板中的「使用精靈新增」選項,為 HTML5 構圖新增互動功能。「使用精靈新增」是簡化的使用者介面,可將程式碼新增到整個作品中。

  1. 建立 HTML5 Canvas 文件,然後按一下「視窗 > 動作」。

  2. 如下列螢幕快照所示,按一下「動作」面板中的「使用精靈新增」。

    「動作」面板上的「使用精靈新增」按鈕

  3. 使用程式碼精靈,選取您想建立程式碼的動作。

    範例螢幕快照顯示動作的動作程式碼選項

    在上方螢幕快照中,已選取「取得影格編號」動作,並在動作視窗中已更新對應的程式碼。

    根據您所選取的動作類型,也可以選擇想套用動作的對應物件。如果物件擁有實體名稱,您可以搜尋舞台上的特定物件。而且,您也可以在目前選取範圍上套用動作。 

    套用動作的物件清單

  4. 請按一下「下一步」以選擇觸發事件。根據之前步驟中選擇的動作類型和物件類型,視窗中會列出一組觸發事件。

    觸發事件清單

  5. 選擇一個適當的觸發事件,後接其對應的觸發物件 (如果有的話),然後按一下「完成並新增」按鈕。  

當您選取舞台中的物件,可以從選單中選擇「目前選取範圍」選項,然後執行動作程式碼精靈。您也可以針對程式碼選擇時間軸與元件動作。

加強動畫的互動

互動是動畫不可或缺的部分,有助於促進觀眾的視覺體驗。想要了解如何在影片中加入動作,而不需任何程式碼嗎?請觀賞此範例結尾的教學課程並依照下列步驟執行。

  1. 在「時間軸」中,選取動作片段。

  2. 按一下「視窗 > 動作」。

  3. 按一下「動作」窗格中的「使用精靈新增」。

  4. 在「目前影格」中,選取下列選項:

    • 選擇動作:選取「播放」。
    • 要套用動作的物件:選取所需的物件。
  5. 按「下一步」。

如何為您的動畫增加互動

請觀賞影片,以了解播放物件、將物件垂直移動和放置物件等其他動作。

使用 Script 視窗

Script 視窗能讓您建立要匯入應用程式中的外部指令碼檔案。這些指令碼可以是 ActionScript 或 Animate JavaScript 檔案。

此外,您也可以在 HTML5 Canvas 文件中增加全域及協力廠商指令碼。如需詳細資訊,請參閱在 Animate 中建立及發佈 HTML5 Canvas 文件的「增加全域及協力廠商指令碼」章節

Script 視窗

如果開啟一個以上的外部檔案,檔案名稱便會橫跨顯示於指令碼視窗頂端的標籤上。

在「Script」視窗中,您可以使用下列功能:PinScript、尋找和取代、語法標色、格式化程式碼、程式碼提示、程式碼註解、程式碼收合。另外也可以使用除錯選項 (僅限 ActionScript 檔案) 以及文字換行。Script 視窗也能讓您顯示行號和隱藏的字元。

在 Script 視窗中建立外部檔案

  1. 選取「檔案 > 新增」。

    新增文件
    新增文件

  2. 請從畫面頂端的索引標籤中選擇您要的目的,例如「角色動畫」、「社交」、「遊戲」、「教育」、「廣告」、「網頁」和「進階」。選取要建立的外部檔案類型 (ActionScript 檔案或 Animate JavaScript 檔案)。

在 Script 視窗中編輯現有檔案

  • 若要開啟現有的指令碼,請選取「檔案 > 開啟舊檔」,再開啟現有的 AS 檔。

  • 若要編輯已經開啟的指令碼,可以按一下顯示指令碼名稱的文件標籤。

動作面板和 Script 視窗中的工具

「動作」面板能讓您存取程式碼協助功能,這些功能可簡化並提升在 ActionScript 中編寫程式碼的效率。

尋找

尋找和取代指令碼中的文字。

 

插入目標路徑

(僅限「動作」面板) 幫助您為指令碼中的動作設定絕對或相對目標路徑。

 

說明 

為「Script」窗格中所選取的 ActionScript 元素顯示參考資訊。例如,如果您按一下 import 陳述式,然後按一下「說明」,import 的參考資訊便會出現在「說明」面板中。

 

程式碼片段

開啟顯示範例程式碼片段的「程式碼片段」面板。

 

使用精靈新增

協助您使用介面新增動作的程式碼,無需撰寫程式碼。 

從動作面板存取內容感應式說明

  1. 若要選取要參考的項目,請執行下列其中一個步驟:
    • 選取「動作」面板工具箱窗格 (位於「動作」面板左邊) 中的 ActionScript 詞彙。

    • 從「動作」面板的「Script」窗格中選取 ActionScript 術語。

    • 在「動作」面板的「Script」窗格中,將插入點放在 ActionScript 術語前面。

  2. 若要開啟選取項目的「說明」面板參考頁面,請執行下列其中一個步驟:
    • 按下 F1。

    • 以滑鼠右鍵按一下項目,然後選取「檢視說明」。

    • 按一下「指令碼」窗格上方的「說明」

設定 ActionScript 偏好設定

不論您是在「動作」面板還是 Script 視窗中編輯程式碼,都可以設定並修改一組偏好設定。

  1. 選取「編輯 > 偏好設定」(Windows) 或「Animate > 偏好設定」(Macintosh),然後在「類別」清單中按一下「程式碼編輯器」。

  2. 設定下列任何一項偏好設定:

    自動縮排

    當開啟自動縮排時,您在左圓括弧 "(" 之後輸入的文字會依據「定位鍵距離」設定進行自動縮排。使用左大括弧 "{" 時,這個行為也適用。

    定位鍵距離

    指定新行縮排的字元數。

    程式碼提示

    在「Script」窗格中啟用程式碼提示。

    延遲

    指定顯示程式碼提示之前的延遲時間 (秒)。此選項已於 Animate 中被取代。

    字體

    指定指令碼所用的字體。

    開啟/匯入

    指定開啟或匯入 ActionScript 檔案時所用的字元編碼。

    儲存/匯出

    指定儲存或匯出 ActionScript 檔案時所用的字元編碼。

    重新載入修改後的檔案

    指定修改、移動或刪除指令碼檔案時所發生的事情。請選取「永遠」、「永不」或「提示」。

    永遠

    不顯示任何警告訊息,並自動重新載入該檔案。

    永不

    不顯示任何警告訊息,而該檔案仍將維持在目前狀態。

    提示

    (預設) 顯示警告訊息,並可選擇是否重新載入該檔案。

    當建立含有外部指令碼的應用程式時,這個偏好設定可讓您避免覆寫指令碼。或是避免發佈含有舊版指令碼的應用程式。這些警告訊息能讓您自動關閉指令碼,然後重新開啟更新且修改過的版本。

    語法顏色

    指定指令碼中的程式碼標色。

    ActionScript 3.0 設定

    這些按鈕會開啟「ActionScript 設定」對話方塊,可供您設定 ActionScript 3.0 的來源路徑、元件庫路徑及外部元件庫路徑。

Adobe 標誌

登入您的帳戶