使用手冊 取消

在 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. 快速分享和發佈您的動畫

「程式碼片段」面板的設計目的在於讓非程式設計師也能夠輕易且快速地開始使用簡單的 JavaScript 和 ActionScript 3.0。它可以讓您將程式碼新增至 FLA 檔案，進而啟用常見功能。使用「程式碼片段」面板並不需要對 JavaScript 或 ActionScript 3.0 有所了解。

透過「程式碼片段」面板，您可以：

  • 新增會影響「舞台」上物件行為的程式碼

  • 新增可控制「時間軸」中播放磁頭移動的程式碼

  • (限 CS5.5) - 新增可允許觸控螢幕使用者互動的程式碼

  • 新增您建立的新程式碼片段至面板

使用 Animate 所包含的程式碼片段也是開始學習 JavaScript 或 ActionScript 3.0 的好方法。透過查看程式碼片段並遵循片段指示，您就可以開始了解程式碼的結構與詞彙。

Animate 中的程式碼片段選項
Animate 中的程式碼片段選項

開始之前

使用「程式碼片段」面板時，請務必了解 Animate 的這些基本概念：

  • 許多程式碼片段都需要您在程式碼中自訂一些項目。在 Animate 中，您可以在「動作」面板執行這項作業。每個程式碼片段都包含此工作的特定指示。

  • 所有包含的程式碼片段都是 JavaScript 或 ActionScript 3.0。

  • 某些程式碼片段會影響物件的行為，可讓使用者按一下物件或使其移動或消失。您可以將這些程式碼片段套用至「舞台」上的物件。

  • 當播放磁頭進入包含程式碼片段的影格時，某些片段會使某個動作立即發生。您可以將這些片段套用至「時間軸」影格。

  • 套用程式碼片段時，程式碼會新增至「時間軸」中「動作」圖層的目前影格。如果您自己尚未建立「動作」圖層，Animate 會在「時間軸」的最上層新增該圖層。

  • 若要讓 ActionScript 控制「舞台」上的物件，物件必須具有在「屬性」檢測器中指派的實體名稱。

  • 您可以按一下當您在面板中選取片段時，所出現之「顯示說明」和「顯示程式碼」按鈕。

將程式碼片段新增至物件或「時間軸」影格。

若要新增會影響物件或播放磁頭的動作：

  1. 選取「舞台」上的物件或「時間軸」中的影格。

    如果您選取的物件不是元件實體，則套用片段時，Animate 會將物件轉換為影片片段元件。

    如果您選取的物件尚未有實體名稱，在套用片段時，Animate 會新增一個實體名稱。

  2. 在「程式碼片段」面板中 (「視窗 > 程式碼片段」)，按兩下您要套用的片段。

    如果您選取「舞台」上的物件，Animate 會將片段新增至包含所選物件之影格中的「動作」面板。

    如果您選取了「時間軸」影格，Animate 只會將片段新增至該影格。

  3. 在「動作」面板中，請檢視新增的程式碼，並根據片段上方的指示來取代任何所需的項目。

「動作」面板中的程式碼片段

將新片段新增至「程式碼片段」面板

您可以用兩種方式將新程式碼片段新增至「程式碼片段」面板：

  • 在「建立新程式碼片段」對話方塊中輸入片段。

  • 匯入程式碼片段 XML 檔案。

若要使用「建立新程式碼片段」對話方塊：

  1. 在「程式碼片段」面板中，從面板選單選擇「建立新程式碼片段」。

  2. 在對話方塊中，為您的片段輸入「標題」、「工具提示」文字及 JavaScript 或 ActionScript 3.0 程式碼。

    您可以按一下「自動填字」按鈕，以新增任何在「動作」面板中目前所選取的程式碼。

  3. 如果您的程式碼包括字串「instance_name_here」，而且您希望 Animate 在片段套用時以正確實體名稱取代它，請選取「自動取代 instance_name_here」核取方塊。

    Animate 會將新片段新增至名為 Custom 的資料夾中的「程式碼片段」面板。

若要匯入 XML 格式的程式碼片段：

  1. 在「程式碼片段」面板中，從面板選單選擇「匯入程式碼片段 XML」。

  2. 選取要匯入的 XML 檔案，然後按一下「開啟舊檔」。

若要查看程式碼片段的正確 XML 格式，請從「面板」選單選擇「編輯程式碼片段 XML」。

若要刪除程式碼片段，請以滑鼠右鍵按一下面板中的程式碼片段，從快顯選單中選擇「刪除程式碼片段」。

具有 HTML5 的互動式動畫

某些動畫需要程式碼片段才能支援各種不同發佈平台。想要了解如何使用程式碼片段，讓您的動畫具有互動性嗎？請觀賞此範例結尾的教學課程並依照下列步驟執行。

  1. 在「元件庫」中，按一下「發佈設定」。

  2. 選取「JavScript/HTML」。

  3. 在「HTML/JS」索引標籤中，按一下「匯出」並選擇下列選項：

    • 檔案名稱：輸入檔案的名稱。
    • 存檔類型：選取「HTML」。

  4. 按一下「確定」。

如何增強 HTML5 互動式動畫

觀賞影片，了解如何編輯程式碼。
Adobe 標誌

登入您的帳戶

快速連結

檢視您的所有計劃 管理您的計劃

法律注意事項    |    線上隱私政策

[Feedback V2 Badge]