Animate CC 前往影格並播放切換動畫內容

【檢視範例】【下載範例】

利用按鈕元件與程式碼片段面板，加入HTML5 Canvas網頁格式的按鈕互動控制javaScript，控制場景上動畫內容的播放，若是有包含漸變動畫內容，則是使用【前往影格並播放gotoAndPlay();】，且可以在關鍵影格上設定影格標籤，用影格標籤來控制播放。

STEP1. 範例檔之中已分圖層安排包含五段傳統補間動畫內容，並均在關鍵影格上加入影格標籤view1~view4(點取關鍵影格有屬性控制板上設定)，五個按鈕元件也均加上實體名稱b1_btn~b4_btn與again_btn。

STEP2. 移動播放磁頭至影格9(為請選擇文字完整出現時)，由程式碼片段 HTML5 Canvas 時間軸瀏覽 【在此影格停止】，讓一開始即自動停止，並自動新增Actions圖層與開啟動作面板(視窗動作)，按下【CTRL】【ENTER】測試網頁動畫即自動停止。並複製此關鍵影格至24、39、54、70等四個相片完整出現時。

STEP3. 移動播放磁頭至影格1，點取場景上View1按鈕並於程式碼片段面板上加入【事件處理常式滑鼠按鍵事件】，即自動加入按鈕控制程式碼片段，請修改任務代號【view01】與執行內容【this.gotoAndPlay(“view1”);】

STEP4. 複製貼上一份View1按鈕的完整程式碼片段，依序更改按鈕名稱【again_btn】、任務代號【again】、前往影格停止【this.gotoAndPlay(1);】。

按下【CTRL】【ENTER】測試網頁動畫，即可測試View1與again二按鈕控制。

STEP5. 繼續複製貼上一份View1按鈕的完整程式碼片段，依序更改按鈕名稱【b2_btn】、任務代號【view02】、前往影格停止【this.gotoAndPlay(“view2”);】，相同方式在複製與完成view3、view4二按鈕的控制內容。

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果