Animate CC 控制影片片段元件內時間軸播放

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

除了控制場景上時間軸的影格播放外，更可以控制影片片段元件內時間軸的播放，因此只要影片片段元件安排得當，並正確加上元件實體名稱，就可以做出更有互動性的動畫內容控制安排，請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。

STEP1.
範例檔中已完成摩托車的動畫，是以多層影片片段元件安排各細節動畫，包括輪子轉動、搖晃與場景上的移動，藉由影片片段元件的實體名稱與左上角按鈕，達成動畫的切換控制。

左上角四個按鈕實體名稱依序為stop1_btn~stop4_btn，場景上機車元件實體名稱為rock_mc(內時間軸安排晃動動畫)，往內為mbike_mc(按二下進入內部編輯即可點取檢視)，再往內輪子為w1_mc與w2_mc。

STEP2.
回到場景上影格1，點取【停止行走】按鈕，加上【滑鼠按鍵事件】，在動作面板上更改程式碼內容，任務代號stop1、執行內容【this.stop();】讓場景上時間軸停止，按下【CTRL】【ENTER】測試網頁動畫按下第一個按鈕即可停止行走。

STEP3.
複製貼上完整stop1_btn的滑鼠按鍵事件程式碼內容成為stop2_btn的滑鼠按鍵事件程式碼，更改按鈕名稱stop2_btn、任務代號stop2、控制內容為【this.rock_mc.stop();】(場景上的rock_mc元件內時間軸停止，即是停止車子晃動動畫內容)。

STEP4.
複製貼上完整stop2_btn的滑鼠按鍵事件程式碼內容成為stop3_btn的滑鼠按鍵事件程式碼，更改按鈕名稱stop3_btn、任務代號stop3、控制內容為:【this.rock_mc.mbike_mc.w1_mc.stop();】、【this.rock_mc.mbike_mc.w2_mc.stop();】
(場景上的rock_mc元件內-mbike_mc元件內-w1_mc與w2_mc元件內時間軸停止，即是停止輪子轉動動畫內容)。

STEP5.
複製貼上完整stop3_btn的滑鼠按鍵事件程式碼內容成為stop4_btn的滑鼠按鍵事件程式碼，更改按鈕名稱stop4_btn、任務代號playAll、控制內容為前面三個按鈕控制內容改為play();播放動畫，即是全部啟動，完成此範例。

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