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

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

更新於 發佈於 閱讀時間約 3 分鐘
raw-image

檢視範例】【下載範例

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

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

raw-image

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

raw-image

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

raw-image

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

raw-image

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

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

raw-image
raw-image

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

avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
留言
avatar-img
留言分享你的想法!
哩老師的沙龍 的其他內容
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
利用影片片段安排要控制的動畫內容,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的畫面切換內容。  Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】,另外五個按鈕元件實體名稱依序為【b1_btn ~
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
利用影片片段安排要控制的動畫內容,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的畫面切換內容。  Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】,另外五個按鈕元件實體名稱依序為【b1_btn ~
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫