Animate CC 動態產品介紹互動設計
更新於 發佈於 閱讀時間約 3 分鐘
利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。
Step1.
點取介紹內容並設定實體名稱『all_mc』。
點取介紹內容並設定實體名稱『all_mc』。
進入到全部內容元件內，點取上方介紹內容設定實體名稱『content_mc』。點取下方按鈕設定實體名稱『button_mc』。
Step2.
進到介紹內容元件內，為已經製作每個內容的出現補間動畫，每個內容所在時間點均加上【this.stop();】；每個動畫區段的起始關鍵影格上設定影格標籤，依序為 p1、p2、p3、p4。
進到介紹內容元件內，為已經製作每個內容的出現補間動畫，每個內容所在時間點均加上【this.stop();】；每個動畫區段的起始關鍵影格上設定影格標籤，依序為 p1、p2、p3、p4。
Step3.
新增按鈕元件『隱形按鈕』，在隱形按鈕元件內，於感應影格插入關鍵影格，並繪製一填色矩型，完成隱形按鈕。
新增按鈕元件『隱形按鈕』，在隱形按鈕元件內，於感應影格插入關鍵影格，並繪製一填色矩型，完成隱形按鈕。
Step4.
回到場景上，拉入隱形按鈕元件至影像按鈕上，調整按鈕尺寸並設定實體名稱為『design_btn』； 再進入到按鈕影片片段內，依序拉入 5 個隱形按鈕，依序調整按鈕尺寸並設定實體名稱為『b1_btn』、『b2_btn』、『b3_btn』、『b4_btn』、『close_btn』。
回到場景上，拉入隱形按鈕元件至影像按鈕上，調整按鈕尺寸並設定實體名稱為『design_btn』； 再進入到按鈕影片片段內，依序拉入 5 個隱形按鈕，依序調整按鈕尺寸並設定實體名稱為『b1_btn』、『b2_btn』、『b3_btn』、『b4_btn』、『close_btn』。
Step5.
回到場景上，按二下全部內容影片片段元件進入影片片段元件內，於影格 10 插入關鍵影格。
回到場景上，按二下全部內容影片片段元件進入影片片段元件內，於影格 10 插入關鍵影格。
複選影格 1 上二關鍵影格，移動內容與按鈕至場景右側外並設定元件顏色效果 Alpha:0，建立傳統補間與加減速，再複製影格 1 上二關鍵影格至影格 20 處，建立傳統補間與加減速。
最後於影格 1 與影格 10 上均加上程式碼片段內的【在此影格停止】。
Step6.
回到場景上，點取外觀設計上的隱形按鈕元件，由程式碼片段 > HTML5 Canvas > 事件處理常式內按下【滑鼠按鍵事件】將原來alert 動作指令更改為【this.all_mc.gotoAndPlay(2);】，並整理簡化自訂工作名稱為【showintro】，預覽動畫即可測試，按下按鈕後介紹內容動態滑入。
回到場景上，點取外觀設計上的隱形按鈕元件，由程式碼片段 > HTML5 Canvas > 事件處理常式內按下【滑鼠按鍵事件】將原來alert 動作指令更改為【this.all_mc.gotoAndPlay(2);】，並整理簡化自訂工作名稱為【showintro】，預覽動畫即可測試，按下按鈕後介紹內容動態滑入。
Step7.
設定關閉介紹內容，複製此一個滑鼠按鍵事件設定的控制內容，更改元件階層名稱【this.all_mc.button_mc.close_btn】、自訂工作名稱【close】，設定關閉介紹內容的控制【this.all_mc.gotoAndPlay(11);】:
設定關閉介紹內容，複製此一個滑鼠按鍵事件設定的控制內容，更改元件階層名稱【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");】:
設定切換介紹內容，複製此一個滑鼠按鍵事件設定的控制內容，更改元件階層名稱【this.all_mc.button_mc.b1_btn】、自訂工作名稱【intro1】，設定關閉介紹內容的控制【this.all_mc.content_mc.gotoAndPlay("p1");】:
複製此一個內容切換按鈕設定的控制內容，更改元件名稱、自訂工作名稱、設定內容，完成另外 3 個按鈕控制內容:
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
129內容數
多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用!
Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
你可能也想看
Google News 追蹤
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
Ae 小技巧：Motion Tile 連續圖 / 背景
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
今天介紹的是 #canve
小小的做個範例影片，
意外看到這種小動畫廣告XD
順便貼圖的廣告做上去看看成品，
https://www.instagram.com/p/C9CdEkropaS/
我們最早就是在做動畫，從一般廣告開始，慢慢去擴展不同的類型，比如說遊戲、角色動畫、電視與電影的特效……等等，但是越做越專業的情況下，我們就想再去做一些延伸，像是虛擬攝影棚跟虛擬製作，我們找到這些工作項目的共通元素去發展，甚至到後面我們還去做互動設計、沉浸式多媒體展覽與現在時下最熱門的AI生成技術。
Ae 小技巧：CC Bend It 彎曲
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：Adjustment Layer 調整圖層
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
Ae 小技巧：Motion Tile 連續圖 / 背景
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
今天介紹的是 #canve
小小的做個範例影片，
意外看到這種小動畫廣告XD
順便貼圖的廣告做上去看看成品，
https://www.instagram.com/p/C9CdEkropaS/
我們最早就是在做動畫，從一般廣告開始，慢慢去擴展不同的類型，比如說遊戲、角色動畫、電視與電影的特效……等等，但是越做越專業的情況下，我們就想再去做一些延伸，像是虛擬攝影棚跟虛擬製作，我們找到這些工作項目的共通元素去發展，甚至到後面我們還去做互動設計、沉浸式多媒體展覽與現在時下最熱門的AI生成技術。
Ae 小技巧：CC Bend It 彎曲
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：Adjustment Layer 調整圖層
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。