在 HTML5 Canvas 中使用組件

搜尋

上次更新時間 2021年4月29日

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

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

選取「檔案 > 新增」。

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

HTML5 Canvas
選取「視窗 > 組件」。

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

拖放組件
選取「符合來源尺寸」，將視訊播放器的大小調整為符合輸入視訊尺寸。這個功能僅適用於 mp4 視訊。若是其他視訊類型，請手動調整舞台上的視訊實體大小，以確保外觀比例維持不變。
按下 CTRL + ENTER (在 MAC 則按下 CMD + ENTER) 預覽影片。視訊會在您的預設瀏覽器中播放。由於控制項預設為可見，因此，當您將滑鼠停駐在瀏覽器的視訊上時，即可檢視控制項。

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

預覽組件輸出

註解：

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

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

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

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

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

選取舞台上的視訊實體，並停用「屬性」檢測器中的「自動播放」設定。
在「組件」面板中按兩下 Button 組件兩次，以便在舞台上建立兩個實體並放置按鈕。您也可以從「組件」面板將按鈕直接拖放到舞台上。

放置按鈕
選取第一個按鈕實體，在 PI 將標籤變更為「播放」並將第二個按鈕變更為「暫停」。
按一下「視窗 > 程式碼片段」，開啟「程式碼片段」面板。瀏覽至「HTML5 Canvas > 組件」並展開「使用者介面」區段。
選取舞台上的「播放」按鈕，按兩下「程式碼片段」面板中的「按鈕按鍵事件」，然後按一下「確定」。Animate 會為選取的按鈕指定實體名稱。您可以在「動作」面板中檢視新加入的程式碼。

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

增加到「動作」面板中的程式碼
若要在按下按鈕時播放視訊，請移動 <啟動您的自訂程式碼> 和 <結束您的自訂程式碼> 區段之間的程式碼。

移動標記內的程式碼
若要增加可暫停視訊的程式碼，請選取暫停按鈕，指派新按鈕，再按一下處理常式並增加暫停視訊程式碼。
預覽影片。按一下「播放」按鈕以播放視訊，並按一下「暫停」按鈕以暫停視訊。