【Animate CC與javaScript互動】Animate CC 動態產品介紹互動設計

恆逸教育訓練中心  資深講師  李啟宏 利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。

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

利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。

Step1. 點取介紹內容並設定實體名稱『all_mc』。

進入到全部內容元件內，點取上方介紹內容設定實體名稱『content_mc』。點取下方按鈕設定實體名稱『button_mc』。

Step2. 進到介紹內容元件內，為已經製作每個內容的出現補間動畫，每個內容所在時間點均加上【this.stop();】；每個動畫區段的起始關鍵影格上設定影格標籤，依序為 p1、p2、p3、p4。

Step3. 新增按鈕元件『隱形按鈕』，在隱形按鈕元件內，於感應影格插入關鍵影格，並繪製一填色矩型，完成隱形按鈕。

Step4. 回到場景上，拉入隱形按鈕元件至影像按鈕上，調整按鈕尺寸並設定實體名稱為『design_btn』； 再進入到按鈕影片片段內，依序拉入 5 個隱形按鈕，依序調整按鈕尺寸並設定實體名稱為『b1_btn』、『b2_btn』、『b3_btn』、『b4_btn』、『close_btn』。

Step5. 回到場景上，按二下全部內容影片片段元件進入影片片段元件內，於影格 10 插入關鍵影格。

複選影格 1 上二關鍵影格，移動內容與按鈕至場景右側外並設定元件顏色效果 Alpha:0，建立傳統補間與加減速，再複製影格 1 上二關鍵影格至影格 20 處，建立傳統補間與加減速。

最後於影格 1 與影格 10 上均加上程式碼片段內的【在此影格停止】。

Step6. 回到場景上，點取外觀設計上的隱形按鈕元件，由程式碼片段 > HTML5 Canvas > 事件處理常式內按下【滑鼠按鍵事件】將原來alert 動作指令更改為【this.all_mc.gotoAndPlay(2);】，並整理簡化自訂工作名稱為【showintro】，預覽動畫即可測試，按下按鈕後介紹內容動態滑入。

Step7. 設定關閉介紹內容，複製此一個滑鼠按鍵事件設定的控制內容，更改元件階層名稱【this.all_mc.button_mc.close_btn】、自訂工作名稱【close】，設定關閉介紹內容的控制【this.all_mc.gotoAndPlay(11);】:

Step8. 設定切換介紹內容，複製此一個滑鼠按鍵事件設定的控制內容，更改元件階層名稱【this.all_mc.button_mc.b1_btn】、自訂工作名稱【intro1】，設定關閉介紹內容的控制【this.all_mc.content_mc.gotoAndPlay("p1");】:

複製此一個內容切換按鈕設定的控制內容，更改元件名稱、自訂工作名稱、設定內容，完成另外 3 個按鈕控制內容:

學習資訊推薦📐

Adobe Animate CC製作HTML5動畫與互動效果 多媒體網頁與UI設計師就業養成班