建立自訂組件:範例

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

請使用本文,了解範例 HTML5 自訂組件。

本文說明如何建立自訂組件。第一個範例說明影像組件 (也隨附於 Animate CC),以及了解架構的程序和開發過程中牽涉到的步驟。第二個範例說明如何包裝任何現有的 UI 組件 (例如 jQueryUI) 並匯入 Animate CC 內。

  1. 建立 DOM 影像組件

    建立名為 My Components 的類別。

    a. 首次執行時,在 <HTML5Components> 資料夾底下建立名為 mycomponents 的資料夾。

    b. 下載附加的 myimage.zip 檔案,並將內容解壓縮到

        mycomponents 資料夾之下。

    下載

    c. 重新啟動 Animate。

mycomponents 資料夾內的目錄結構
mycomponents 資料夾內的目錄結構

您現在應該會在組件資料夾中看到名為「My Components」的新類別,並且底下有個新組件,名為「My Image」。您可以將這個組件拖放到舞台上,設定影像來源屬性並發佈影片,以觀察自訂組件實際執行的情形。 

組件中繼資料 - components.js

Components.js 程式碼
Components.js

請注意,類別設定為 CATEGORY_MY_COMPONENTS。每個屬性的名稱也使用類似的索引鍵。這是類別名稱的當地語系化字串。如果您從 locale 資料夾開啟 strings.json,將會看到下列項目。

註解:

編輯這個檔案時,最常見的錯誤就是陣列的最後一個元素存在不必要的結尾逗

類別詳細資料
類別詳細資料

圖示欄位的值設定為 Sp_Image_Sm。如果移至資源資料夾,您會在底下發現兩個具有前置詞 Sp_Image_Sm 的 png,如下所示。

圖示欄位的值
圖示欄位的值

這些是深色和淺色 UI 的圖示。

components.json 中「source」欄位的值設定為「src/myimage.js」。 

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget("my.Image", {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
  
_attrs: ["id", "src", "alt", "class", "border"],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate CC
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': "image" + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return "<img>";
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

您可以依照程式碼中的註解執行,以便輕鬆地了解程式碼。 

請隨意查看 Animate 所隨附、其他組件的來源。在大多數的情況下,您可以使用其中一個組件當做起點,然後針對自己的需求進行設定。

包裝 jQuery-UI 組件

本節說明如何包裝 jQuery-UI Widget 並在 Animate CC 中使用。相同的概念可以用來包裝任何其他 UI 架構中的現有組件。

請了解 Animate CC 內已包裝的 DatePicker 組件,此組件為 jQuery-UI Widget。請下載並解壓縮下列封存的內容,做為參考之用。

下載

解壓縮的內容結構
解壓縮的內容結構

名為 jquery-ui-1.12.0 的資料夾是 jQuery UI 架構的來源,其中包含原始 DatePicker Widget 及其他資源,例如影像和 css,可像任何其他 HTML5 組件一樣,包裝這些項目並用在 Animate CC 中。僅為本機預覽所需,當您在「發佈設定」中使用「裝載的元件庫」時,可以選擇使用 cdn 來下載相關來源。 

Components.js 程式碼
Components.js

預設有兩個相依項,jQuery 和 anwidget.js。由於 anwidget.js 不在 CDN 上,因此,我們也沒有任何 CDN 項目。

下一個項目集可用於從 jquery UI 載入 datepicker Widget 所需的其他資源。如果您要從任何其他元件庫包裝任何 Widget,可以同樣方式指定相依項集。組件初始化之前,就會先下載這些相依項。

在屬性區段中,我們只公開過一個名為 label 的屬性,這是繫結至日期選取器組件的 label 屬性。同樣地,我們也可以公開其他希望使用者能在 Animate 編寫環境中設定的屬性。在執行階段,這些屬性都能當做索引鍵值配對,在實體的 options 陣列中使用。我們可以擷取設定的值,然後在執行階段套用該值。

主要來源檔案:src/datepicker.js。
主要來源檔案:src/datepicker.js。

不同於範例的區段

  1. getCreateString:

    jQuery-UI 中的日期選取器 Widget 會取得這類輸入文字元素,然後在執行階段轉換成日期選取器元素。因此,我們會跟著初始化 DOM。

  2. attach:

    我們必須覆寫這個 Widget 的這個功能。每當元素附加到 DOM 時,都會呼叫這個 API。然而,由於基礎執行階段 (在這個案例中為 createjs) 運作方式的緣故,在影格範圍期間可能會多次呼叫這個 API。

    請記住基礎元素的附加狀態,然後呼叫基底類別的 attach API (使用 this._superApply(arguments))。若是第一次將元素附加到父輩 DOM,請使用基礎 jQuery-UI Widget 的呼叫,將組件的 DOM 轉換成日期選取器。請參閱 - https://jqueryui.com/datepicker/

    大多數的 javascript Widget 都以類似的方式運作。您可以使用相同的技術來包裝所選的任何組件,並以相同方式帶入 Animate CC。

  3. Update:我們會覆寫更新並將 css 屬性套用到容器 div,然後將特質套用到實際的 DOM 元素。

    註解:

    當您覆寫 attach、detach 或 update 等 API 時,請評估基底類別的預設實作,並適時呼叫基底實作,否則,組件初始化可能會失敗。

Adobe 標誌

登入您的帳戶