請使用本文,深入了解如何使用可自訂的組件。

組件會提供一組與可重複使用且可自訂的組件相關的功能,以提升廣告建立者的生產力。先前,Animate CC 支援與 Flash 目標搭配使用的 Flash 組件。從這個版本開始,Animate 支援 HTML5 Canvas。 

  1. 選取「檔案 > 新增」

    「新增文件」對話方塊畫面頂端的索引標籤中選擇「進階」,然後選取「HTML5 Canvas」選項。

    新增文件
    HTML5 Canvas
  2. 選取「視窗 > 組件」。

    預設組件
    預設組件

  3. 選取「組件 > 視訊」。將關聯的組件拖放到畫布上。 

  4. 選取「舞台」上的 Video 組件實體,檢視並修改「屬性」檢測器中的參數。Source 參數可讓您從本機位置選取視訊檔案,或者提供任何 URL 以播放視訊 (mp4、ogg、ogv 或 webm 格式)。

    components_drag_drop
    拖放組件

  5. 選取「符合來源尺寸」,將視訊播放器的大小調整為符合輸入視訊尺寸。這個功能僅適用於 mp4 視訊。若是其他視訊類型,請手動調整舞台上的視訊實體大小,以確保外觀比例維持不變。

  6. 按下 CTRL + ENTER (在 MAC 則按下 CMD + ENTER) 預覽影片。視訊會在您的預設瀏覽器中播放。由於控制項預設為可見,因此,當您將滑鼠停駐在瀏覽器的視訊上時,即可檢視控制項。

    您可以使用相同程序來使用其他組件。

    components_preview
    預覽組件輸出

註解:

組件會以 DOM 元素的形式新增至 HTML 文件,因此,請參閱「組件程式碼片段」(「程式碼片段 > HTML5 Canvas > 組件」),將互動功能加入組件。

使用程式碼片段將互動功能加入組件

  1. 選取「視窗 > 組件」。

  2. 若要將互動功能加入組件,請選取「視窗 > 程式碼片段」面板。您可以檢視各種可用組件行為的對應。

  3. 在「程式碼片段」畫面中,選取「HTML5 Canvas > 組件」。

    component_snippets
    預設程式碼片段

  4. 根據您所選的組件,按兩下對應的程式碼片段,以顯示「動作」面板中的程式碼片段。如需有關如何將互動功能加入程式碼片段的資訊,請參閱在 Animate CC 中使用程式碼片段增加互動功能

範例

請使用下列範例,了解如何使用程式碼片段,以便透過程式碼控制的視訊播放。

  1. 選取舞台上的視訊實體,並停用「屬性」檢測器中的「自動播放」設定。 

  2. 在「組件」面板中按兩下 Button 組件兩次,以便在舞台上建立兩個實體並放置按鈕。您也可以從「組件」面板將按鈕直接拖放到舞台上。

    Component_example_7
    放置按鈕

  3. 選取第一個按鈕實體,在 PI 將標籤變更為「播放」並將第二個按鈕變更為「暫停」。 

  4. 按一下「視窗 > 程式碼片段」,開啟「程式碼片段」面板。瀏覽至「HTML5 Canvas > 組件」並展開「使用者介面」區段。 

  5. 選取舞台上的「播放」按鈕,按兩下「程式碼片段」面板中的「按鈕按鍵事件」,然後按一下「確定」。Animate CC 會為選取的按鈕指定實體名稱。您可以在「動作」面板中檢視新加入的程式碼。

    Component_example_4
    增加程式碼片段

  6. 選取舞台上的視訊,並展開「程式碼片段」中的「視訊」區段。按兩下「播放視訊」。播放視訊所需的程式碼隨即增加到「動作」面板中。

    Component_example_5
    增加到「動作」面板中的程式碼

  7. 若要在按下按鈕時播放視訊,請移動 <啟動您的自訂程式碼> 和 <結束您的自訂程式碼> 區段之間的程式碼。 

    Component_example_6
    移動標記內的程式碼

  8. 若要增加可暫停視訊的程式碼,請選取暫停按鈕,指派新按鈕,再按一下處理常式並增加暫停視訊程式碼。

  9. 預覽影片。按一下「播放」按鈕以播放視訊,並按一下「暫停」按鈕以暫停視訊。 

註解:

您可以在「屬性」檢測器中檢視每個組件的 className 特質。使用這些類別名稱可利用 CSS 針對組件進行外觀處理。使用 CSS 組件可載入您的自訂 CSS。CSS 組件可讓您選取影片中隨附的任何本機 CSS 檔案。

安裝散佈的組件

Animate 設計人員或開發人員可以使用「管理擴充功能」公用程式來安裝散佈的 ZXP 檔案組件。

必要條件

管理擴充功能公用程式。如需下載指示,請在 Animate CC 產品中按一下「說明 > 管理擴充功能」。

安裝組件

若要安裝散佈的組件,請執行下列步驟:

  1. 按兩下 ManageExtensions.exe 檔案。「管理擴充功能」對話方塊隨即出現。

    ManageExtensions
  2. 按一下「安裝擴充功能」並選取您要安裝的擴充功能 (.zxp 檔案)。

  3. 若要檢視 Animate CC 中安裝的組件,請按一下「視窗 > 組件」。「組件」彈出式對話方塊隨即出現。

  4. 按一下右上角的功能表圖示,並按一下「重新載入組件」。

    reloading-components

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策