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動畫與互動效果
