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

2020/02/15閱讀時間約 2 分鐘

利用按鈕元件與程式碼片段面板，加入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動畫與互動效果

為什麼會看到廣告

#javaScript互動

哩老師的沙龍Animate CC 網頁動畫與JS互動javaScript互動

哩老師的沙龍

29會員

161內容數

藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!

留言0

查看全部

發表第一個留言支持創作者！

哩老師的沙龍的其他內容

Animate CC 加上互動控制與程式碼片段

在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成。Canvas 是 HTML5 的新元素，其中提供的 API 可讓您動態產生並顯示圖形、圖表、影像和動畫。有了適用於 HTML5 的 Canvas API，就可以透過

#javaScript互動