使用手冊 取消

建立 HTML 擴充功能

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

Animate 可以透過使用 HTML 擴充功能加以擴充。Adobe Extension Builder 3 可讓您建立適用於 Animate 的 HTML 擴充功能。以前您只能使用 SWF 擴充功能來擴充 Animate。然而，Adobe Extension Builder 3 可讓您建立適用於 Creative Cloud 應用程式的 HTML 擴充功能。若要開始使用，您需要下載並安裝 Eclipse 和 Extension Builder 3.0。

建立 HTML 擴充功能

若要建立 HTML 擴充功能，請執行下列動作。

  1. 啟動 Eclipse。 
  2. 在「New Project wizard」(新增專案精靈) 中，建立新的應用程式擴充功能專案。為檔案提供有意義的名稱，然後按一下「Next」(下一步)。
  3. 在「New Adobe Application Extension Project」(新增 Adobe 應用程式擴充功能專案) 面板上，選擇「Adobe Animate」。按一下「下一步」。
  4. 使用可用的選項設定您的擴充功能：
    1. Bundle ID (組合包 ID) 可唯一識別您的擴充功能。
    2. Menu name (選單名稱) 是您擴充功能的顯示名稱。「Menu Name」(選單名稱) 會出現在 Animate 的「視窗 > 擴充功能」選單中。
    3. Window Details (視窗詳細資料) 會使用這些選項來自訂擴充功能視窗類型和大小。

      按「Next」(下一步)。
  5. 您可以在後續幾個畫面中進一步為您的擴充功能自訂參考元件庫：
    1. CEP Interface Library (CEP 介面元件庫) 提供可與主機應用程式互動的功能。預設會選取這個選項。
    2. Frameworks (架構) 適用於一般 Javascript 元件庫，例如 jQuery。
    3. Services (服務) 包括 Adobe IPC Communication Toolkit，可讓 Adobe 應用程式、擴充功能和外部應用程式之間通訊。其中提供透過 CEP Service Manager 傳送訊息所用的通訊協定，CEP Service Manager 的作用就像 Creative Cloud 通訊中樞一樣。

      按一下「Finish」(完成) 即可建立新的 Eclipse 專案。

在 Animate 中針對您的擴充功能進行除錯

您可以直接從 Eclipse 執行您的擴充功能：

  1. 以滑鼠右鍵按一下專案，並選取「執行身分 > Adobe Flash 擴充功能」。隨即啟動 Animate。
  2. 在 Animate 中，選取「視窗 > 擴充功能」選單項目。隨即會開啟擴充功能面板。

匯出您的擴充功能

若要散佈您的擴充功能，您必須將它匯出為 ZXP 套件。然後，Creative Cloud 應用程式上的 Adobe Extension Manager 會下載並執行 ZXP 套件：

  1. 在 Eclipse 中，切換至「Script Explorer」(指令碼總管) 檢視，以滑鼠右鍵按一下您的專案，並選取「匯出 > Adobe Extension Builder 3 > Application Extension (應用程式擴充功能)」。隨即會顯示「Export Wizard」(匯出精靈)。
  2. 您必須擁有憑證才能簽署擴充功能套件。請瀏覽到現有憑證，或按一下「Create」(建立) 以建立新憑證。
  3. 按一下「Finish」(完成)。
  4. 匯出完成時，您將會在專案資料夾中看到您擴充功能的 ZXP 套件已準備好可供散佈。

注意：若要安裝，您將需要存取 <extension>\.staged-extension\CSXS\manifest.xml 檔案並更新 host 標籤，以便將 Animate 最小版本設定為 13.0。

在 Animate 中安裝您的擴充功能

您可以使用 Adobe Extension Manager 在 Animate 內安裝 HTML 擴充功能。HTML 擴充功能可以協助您擴充 Animate 的各項功能和能力。

為 HTML 擴充功能增加互動功能

您可以建置 HTML 擴充功能，然後透過增加控制項、定義行為及取得有關主機 (包括 Animate 和作業系統) 環境的資訊，與 Animate 互動。這可以透過兩種方法完成：

  1. 使用 CEP 介面元件庫：CEP 介面元件庫提供的 API 可用來取得有關主機環境和 eval 指令碼的資訊，好讓您可以執行 JSFL。若要深入了解 CEP 介面元件庫，請在 Eclipse 中開啟「Help (說明) > Help Contents (說明內容) > Adobe Extension Builder > References (參考)」。
  2. 使用 JSFL：JSFL 指令碼可以透過使用 CEP 介面元件庫的 Eval 指令碼 API 來執行。

    除了 JSFL 之外，Animate 內的 CEP 基礎架構還會公開下列事件，這些事件只能在 HTML 面板中使用。
    • com.adobe.events.flash.documentChanged 會因為目前作用中的文件有所變更而觸發。
    • com.adobe.events.flash.timelineChanged 會在您對目前作用中文件的時間軸進行變更時觸發。
    • com.adobe.events.flash.documentSaved 會在您儲存目前文件時觸發。
    • com.adobe.events.flash.documentOpened 會在您開啟新文件時觸發。
    • com.adobe.events.flash.documentClosed 會在您關閉目前作用中的文件時觸發。
    • com.adobe.events.flash.documentNew 會在您建立新文件時觸發。
    • com.adobe.events.flash.layerChanged 會在您選取不同圖層時觸發。
    • com.adobe.events.flash.frameChanged 會在您選取不同影格時觸發。
    • com.adobe.events.flash.selectionChanged 會在您選取舞台上的不同物件時觸發。
    • com.adobe.events.flash.mouseMove 會在您將滑鼠移到「舞台」上方時觸發。

範例 

csinterface.addEventListener(&quot;com.adobe.events.flash.selectionChanged&quot;, CallbackFunction)

在上面的程式碼片段中：

  • csinterface：CEP 介面元件庫的物件。
  • com.adobe.events.flash.selectionChanged：變更物件的選取範圍時所觸發的事件。您也可以使用上述任何事件。
  • CallbackFunction：偵聽所觸發事件的方法。
Adobe 標誌

登入您的帳戶

快速連結

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

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