Animate CC 控制動態網頁畫面切換

2020/02/15閱讀時間約 1 分鐘
利用影片片段安排要控制的動畫內容,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的畫面切換內容。
Step 1.
場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】,另外五個按鈕元件實體名稱依序為【b1_btn ~ b5_btn】。
進入所有頁面元件內,即可檢視由傳統補間依序完成每個頁面滑入動畫(5pic元件水平滑動至各單元畫面),在頁面滑入影格處加上影格標籤【p1 - p5】,頁面內容處時間點均已加上【this.stop( );】
Step 2.
點取 HOME 按鈕元件,由程式碼片段 > HTML5 Canvas > 事件處理常式內按下【滑鼠按鍵事件】將原來 alert 動作指令更改為 this.all_mc.gotoAndPlay("p1");
Step 3.
複製此一個按鈕設定的控制內容,更改按鈕元件名稱、任務代號、設定內容,完成另外 4 個按鈕控制內容,即完成此範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
哩老師
哩老師
現職:精誠資訊 恆逸教育訓練中心 專任多媒體設計 資深講師 專長:精通多媒體網頁視覺設計、平面設計與多媒體整合應用、Photoshop影像處理、網站視覺設計、Illustrator向量繪圖、Animate動畫效果設計、Dreamweaver網頁互動效果、Dreamweaver資料庫整合及RWD等。
留言0
查看全部
發表第一個留言支持創作者!