Animate CC 按鈕與時間軸瀏覽控制

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

利用按鈕元件與程式碼片段面板，加入HTML5 Canvas網頁格式的按鈕互動控制javaScript，控制場景上動畫內容的播放。

STEP1. 在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件，並均加上實體名稱，依序為【stop_btn】【play_btn】【skip_btn】。

至按鈕圖層影格180處，按下右鍵選擇執行【插入空白關鍵影格】，並置入元件庫內的replay按鈕元件，加入實體名稱為【replay_btn】。

STEP2. 移動播放磁頭至影格 1處，由程式碼片段 HTML5 Canvas 時間軸瀏覽 【在此影格停止】，讓一開始即自動停止，並自動新增Actions圖層與開啟動作面板(視窗動作)，按下【CTRL】【ENTER】測試網頁動畫即自動停止。

STEP3. 繼續在影格1，點取場景上play按鈕並於程式碼片段面板上加入【事件處理常式滑鼠按鍵事件】，即自動加入按鈕控制程式碼片段，請修改任務代號【playMV】與執行內容【this.play();】

STEP4. 繼續在影格1，點取場景上stop按鈕並於程式碼片段面板上加入【事件處理常式滑鼠按鍵事件】，即自動加入按鈕控制程式碼片段，請修改任務代號【stopMV】與執行內容【this.stop();】

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

STEP5. 複製貼上一份停止按鈕的完整程式碼片段，依序更改按鈕名稱【skip_btn】、任務代號【skipMV】、前往影格停止【this.gotoAndStop(179);】(動畫最後影格數為180，程式碼內容影格編號從 0 開始而非1，因此前往影格編號需減1為179)。

STEP6. 移動撥放磁頭至影格180處，由程式碼片段 HTML5 Canvas 時間軸瀏覽 【在此影格停止】讓動畫撥放至此自動停止。

再點取replay按鈕，並於程式碼片段面板上加入【事件處理常式滑鼠按鍵事件】，即自動加入按鈕控制程式碼片段，請修改任務代號【replayMV】與執行內容【this.gotoAndplay(1);】(至影格2播放)。

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