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

更新於 2025/02/14發佈於 2020/02/15閱讀時間約 2 分鐘

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

為什麼會看到廣告

#javaScript互動

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

哩老師的沙龍

29會員

129內容數

多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~

留言0

查看全部

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

哩老師的沙龍的其他內容

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

利用按鈕元件與程式碼片段面板，加入HTML5 Canvas網頁格式的按鈕互動控制javaScript，控制場景上動畫內容的播放。 STEP1. 在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件，並均加上實體名稱，依序為【stop_btn】【play_btn】【skip_bt

#javaScript互動

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

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

#javaScript互動

Animate CC 按鈕與動畫互動切換

目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為

#javaScript互動

Animate CC 按鈕元件

在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成(非ActionScript)，而可以接受JavaScript控制的元件有【影片片段元件】與【按鈕元件】，二者差別在於【按鈕元件】有預設

#javaScript互動

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

#javaScript互動

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

#javaScript互動

Animate CC 按鈕與動畫互動切換