Animate CC 按鈕與時間軸瀏覽控制
更新於 發佈於 閱讀時間約 2 分鐘
利用按鈕元件與程式碼片段面板，加入HTML5 Canvas網頁格式的按鈕互動控制javaScript，控制場景上動畫內容的播放。
STEP1.
在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件，並均加上實體名稱，依序為【stop_btn】【play_btn】【skip_btn】。
在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件，並均加上實體名稱，依序為【stop_btn】【play_btn】【skip_btn】。
至按鈕圖層影格180處，按下右鍵選擇執行【插入空白關鍵影格】，並置入元件庫內的replay按鈕元件，加入實體名稱為【replay_btn】。
STEP2.
移動播放磁頭至影格 1處，由程式碼片段 > HTML5 Canvas > 時間軸瀏覽 > 【在此影格停止】，讓一開始即自動停止，並自動新增Actions圖層與開啟動作面板(視窗>動作)，按下【CTRL】【ENTER】測試網頁動畫即自動停止。
移動播放磁頭至影格 1處，由程式碼片段 > HTML5 Canvas > 時間軸瀏覽 > 【在此影格停止】，讓一開始即自動停止，並自動新增Actions圖層與開啟動作面板(視窗>動作)，按下【CTRL】【ENTER】測試網頁動畫即自動停止。
STEP3.
繼續在影格1，點取場景上play按鈕並於程式碼片段面板上加入【事件處理常式>滑鼠按鍵事件】，即自動加入按鈕控制程式碼片段，請修改任務代號【playMV】與執行內容【this.play();】
繼續在影格1，點取場景上play按鈕並於程式碼片段面板上加入【事件處理常式>滑鼠按鍵事件】，即自動加入按鈕控制程式碼片段，請修改任務代號【playMV】與執行內容【this.play();】
STEP4.
繼續在影格1，點取場景上stop按鈕並於程式碼片段面板上加入【事件處理常式>滑鼠按鍵事件】，即自動加入按鈕控制程式碼片段，請修改任務代號【stopMV】與執行內容【this.stop();】
繼續在影格1，點取場景上stop按鈕並於程式碼片段面板上加入【事件處理常式>滑鼠按鍵事件】，即自動加入按鈕控制程式碼片段，請修改任務代號【stopMV】與執行內容【this.stop();】
按下【CTRL】【ENTER】測試網頁動畫，即可測試play與stop二按鈕控制。
STEP5.
複製貼上一份停止按鈕的完整程式碼片段，依序更改按鈕名稱【skip_btn】、任務代號【skipMV】、前往影格停止【this.gotoAndStop(179);】(動畫最後影格數為180，程式碼內容影格編號從 0 開始而非1，因此前往影格編號需減1為179)。
複製貼上一份停止按鈕的完整程式碼片段，依序更改按鈕名稱【skip_btn】、任務代號【skipMV】、前往影格停止【this.gotoAndStop(179);】(動畫最後影格數為180，程式碼內容影格編號從 0 開始而非1，因此前往影格編號需減1為179)。
STEP6.
移動撥放磁頭至影格180處，由程式碼片段 > HTML5 Canvas > 時間軸瀏覽 > 【在此影格停止】讓動畫撥放至此自動停止。
移動撥放磁頭至影格180處，由程式碼片段 > HTML5 Canvas > 時間軸瀏覽 > 【在此影格停止】讓動畫撥放至此自動停止。
再點取replay按鈕，並於程式碼片段面板上加入【事件處理常式>滑鼠按鍵事件】，即自動加入按鈕控制程式碼片段，請修改任務代號【replayMV】與執行內容【this.gotoAndplay(1);】(至影格2播放)。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
129內容數
多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用!
Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
你可能也想看
Google News 追蹤
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
這篇內容，將會講解什麼是「do until」，以及與「do until」相關的知識。包括do until的簡介、break、continue。
Ae 小技巧：Motion Tile 連續圖 / 背景
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
這個系列的教學會列出基本上所有常見的造型和一些基礎 ， 讓各位可以自行搭配造型～在這個第五篇呢 ， 我們會來一起了解: 常見的按鈕樣式特性，怎麼使用他們，他們的作用是甚麼。讓我們一起了解如何自訂滑鼠以及使用常見的按鈕樣式特性，學會讓按鈕播放音效，切換滑鼠造型，以及避免圖片透明的地方被點擊到。
Ae 小技巧：CC Bend It 彎曲
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Adobe After Effects 中，LoopOut 是一個非常有用的表達式，用於創建層屬性（如位置、旋轉、透明度等）的循環動畫。這個表達式可以幫助設計師自動重複一段關鍵幀動畫，而不需要手動複製和粘貼這些幀。
指令基本樣式
loopIn(type="cycle", numKeyfram
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
這篇內容，將會講解什麼是「do until」，以及與「do until」相關的知識。包括do until的簡介、break、continue。
Ae 小技巧：Motion Tile 連續圖 / 背景
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
這個系列的教學會列出基本上所有常見的造型和一些基礎 ， 讓各位可以自行搭配造型～在這個第五篇呢 ， 我們會來一起了解: 常見的按鈕樣式特性，怎麼使用他們，他們的作用是甚麼。讓我們一起了解如何自訂滑鼠以及使用常見的按鈕樣式特性，學會讓按鈕播放音效，切換滑鼠造型，以及避免圖片透明的地方被點擊到。
Ae 小技巧：CC Bend It 彎曲
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Adobe After Effects 中，LoopOut 是一個非常有用的表達式，用於創建層屬性（如位置、旋轉、透明度等）的循環動畫。這個表達式可以幫助設計師自動重複一段關鍵幀動畫，而不需要手動複製和粘貼這些幀。
指令基本樣式
loopIn(type="cycle", numKeyfram