建立 DOM 影像組件
- Adobe Animate 使用手冊
- Animate 簡介
- 動畫
- Animate 中的動畫基本概念
- 如何在 Animate 中使用影格及關鍵影格
- Animate 中的逐格動畫
- 如何在 Animate 中使用傳統補間動畫
- 筆刷工具
- 移動導引線
- 移動補間動畫與 ActionScript 3.0
- 關於移動補間動畫
- 移動補間動畫
- 建立移動補間動畫
- 使用屬性關鍵影格
- 使用補間動畫將位置製成動畫
- 如何使用移動編輯器編輯移動補間動畫
- 編輯補間動畫的移動路徑
- 操作移動補間動畫
- 新增自訂加/減速
- 建立和套用移動預設效果
- 設定動畫補間動畫範圍
- 使用儲存為 XML 檔案的移動補間動畫
- 移動補間動畫與傳統補間動畫
- 形狀補間動畫
- 在 Animate 中使用骨塊工具動畫
- 在 Animate 進行角色製作
- 如何在 Adobe Animate 中使用遮色片圖層
- 如何在 Animate 中使用場景
- 互動
- 工作區和工作流程
- 建立和管理繪圖筆刷
- 在 HTML5 Canvas 文件中使用 Google 字體
- 使用 Creative Cloud Libraries 和 Adobe Animate
- 使用 Animate 的舞台和工具面板
- Animate 工作流程和工作區
- 在 HTML5 Canvas 文件中使用網頁字體
- 時間軸與 ActionScript
- 使用多重時間軸
- 設定偏好設定
- 使用 Animate 編寫面板
- 使用 Animate 建立時間軸圖層
- 匯出適用於行動裝置應用程式和遊戲引擎的動畫
- 移動和複製物件
- 範本
- Animate 中的尋找和取代
- 還原、重做和操作記錄面板
- 鍵盤快速鍵
- 如何在 Animate 中使用時間軸
- 建立 HTML 擴充功能
- 影像和 GIF 動畫的最佳化選項
- 匯出影像和 GIF 的設定
- Animate 中的資源面板
- 多媒體和視訊
- 在 Animate 中變形及結合圖像物件
- 在 Animate 中建立並使用元件實體
- 影像描圖
- 如何在 Adobe Animate 中使用聲音
- 匯出 SVG 檔案
- 建立要在 Animate 中使用的視訊檔案
- 如何在 Animate 增加視訊
- 使用 Animate 繪製及建立物件
- 調整線條和形狀
- 使用 Animate CC 中的筆畫、填色和漸層
- 使用 Adobe Premiere Pro 和 After Effects
- Animate CC 中的色彩面板
- 使用 Animate 開啟 Flash CS6 檔案
- 在 Animate 中使用傳統文字
- 將圖案放入 Animate 中
- Animate 中匯入的點陣圖
- 3D 圖像
- 在 Animate 中使用元件
- 使用 Adobe Animate 繪製線條和形狀
- 使用 Animate 中的元件庫
- 匯出聲音
- 在 Animate CC 中選取物件
- 在 Animate 中使用 Illustrator AI 檔案
- 套用混合模式
- 排列物件
- 使用命令選單自動執行工作
- 多國語言文字
- 使用 Animate 中的攝影機
- 圖像濾鏡
- 聲音和 ActionScript
- 繪圖偏好設定
- 使用鋼筆工具繪圖
- 平台
- 將 Animate 專案轉換成其他文件類型格式
- 自訂平台支援
- 在 Animate 中建立及發佈 HTML5 Canvas 文件
- 建立並發佈 WebGL 文件
- 如何封裝 AIR for iOS 的應用程式
- 發佈 AIR for Android 應用程式
- Adobe AIR for Desktop 的發佈功能
- ActionScript 發佈設定
- 最佳作法 - 在應用程式中組織 ActionScript
- 如何搭配使用 ActionScript 與 Animate
- Animate 工作區中的輔助功能
- 撰寫和管理指令碼
- 啟用自訂平台的支援
- 自訂平台支援概觀
- 使用自訂平台支援外掛程式
- ActionScript 3.0 的除錯
- 啟用自訂平台的支援
- 匯出與發佈
- 疑難排解
請使用本文,了解範例 HTML5 自訂組件。
本文說明如何建立自訂組件。第一個範例說明影像組件 (也隨附於 Animate),以及了解架構的程序和開發過程中牽涉到的步驟。第二個範例說明如何包裝任何現有的 UI 組件 (例如 jQueryUI) 並匯入 Animate 內。
-
建立名為 My Components 的類別。
a. 首次執行時,在 <HTML5Components> 資料夾底下建立名為 mycomponents 的資料夾。
b. 下載附加的 myimage.zip 檔案,並將內容解壓縮到
mycomponents 資料夾之下。
下載
c. 重新啟動 Animate。
您現在應該會在組件資料夾中看到名為「My Components」的新類別,並且底下有個新組件,名為「My Image」。您可以將這個組件拖放到舞台上,設定影像來源屬性並發佈影片,以觀察自訂組件實際執行的情形。
組件中繼資料 - 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 // 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 中使用。相同的概念可以用來包裝任何其他 UI 架構中的現有組件。
請了解 Animate 內已包裝的 DatePicker 組件,此組件為 jQuery-UI Widget。請下載並解壓縮下列封存的內容,做為參考之用。
下載
名為 jquery-ui-1.12.0 的資料夾是 jQuery UI 架構的來源,其中包含原始 DatePicker Widget 及其他資源,例如影像和 css,可像任何其他 HTML5 組件一樣,包裝這些項目並用在 Animate 中。僅為本機預覽所需,當您在「發佈設定」中使用「裝載的元件庫」時,可以選擇使用 cdn 來下載相關來源。
預設有兩個相依項,jQuery 和 anwidget.js。由於 anwidget.js 不在 CDN 上,因此,我們也沒有任何 CDN 項目。
下一個項目集可用於從 jquery UI 載入 datepicker Widget 所需的其他資源。如果您要從任何其他元件庫包裝任何 Widget,可以同樣方式指定相依項集。組件初始化之前,就會先下載這些相依項。
在屬性區段中,我們只公開過一個名為 label 的屬性,這是繫結至日期選取器組件的 label 屬性。同樣地,我們也可以公開其他希望使用者能在 Animate 編寫環境中設定的屬性。在執行階段,這些屬性都能當做索引鍵值配對,在實體的 options 陣列中使用。我們可以擷取設定的值,然後在執行階段套用該值。
不同於範例的區段
-
getCreateString:
jQuery-UI 中的日期選取器 Widget 會取得這類輸入文字元素,然後在執行階段轉換成日期選取器元素。因此,我們會跟著初始化 DOM。
-
attach:
我們必須覆寫這個 Widget 的這個功能。每當元素附加到 DOM 時,都會呼叫這個 API。然而,由於基礎執行階段 (在這個案例中為 createjs) 運作方式的緣故,在影格範圍期間可能會多次呼叫這個 API。
請記住基礎元素的附加狀態,然後呼叫基底類別的 attach API (使用 this._superApply(arguments))。若是第一次將元素附加到父輩 DOM,請使用基礎 jQuery-UI Widget 的呼叫,將組件的 DOM 轉換成日期選取器。請參閱 - https://jqueryui.com/datepicker/
大多數的 javascript Widget 都以類似的方式運作。您可以使用相同的技術來包裝所選的任何組件,並以相同方式帶入 Animate
-
Update:我們會覆寫更新並將 css 屬性套用到容器 div,然後將特質套用到實際的 DOM 元素。
當您覆寫 attach、detach 或 update 等 API 時,請評估基底類別的預設實作,並適時呼叫基底實作,否則,組件初始化可能會失敗。