Animate CC 網頁動畫與JS互動
49公開內容
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
全部內容
免費與付費
最新發佈優先
利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。
Step1.
點取介紹內容並設定實體名稱『all_mc』。
進入到全部內容元件內，點取上方介紹內容設定實
利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。
Step 1.
場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~
除了控制場景上時間軸的影格播放外，更可以控制影片片段元件內時間軸的播放，因此只要影片片段元件安排得當，並正確加上元件實體名稱，就可以做出更有互動性的動畫內容控制安排，請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。
STEP1.
範例檔中已完成摩托車的動畫
利用【前往影格並播放gotoAndPlay();】，配合包含動畫的頁面內容，即可完成動畫切換頁面的效果呈現網站頁面。
Step 1.
在按鈕圖層上已置入五個單元按鈕並均加上實體名稱 b1_btn～b5_btn，右上角回首頁按鈕為home_btn。並已分別準備頁面內容於獨立
利用按鈕元件與程式碼片段面板，加入HTML5 Canvas網頁格式的按鈕互動控制javaScript，控制場景上動畫內容的播放，若是有包含漸變動畫內容，則是使用【前往影格並播放gotoAndPlay();】，且可以在關鍵影格上設定影格標籤，用影格標籤來控制播放。
STE
利用按鈕元件與程式碼片段面板，加入HTML5 Canvas網頁格式的按鈕互動控制javaScript，控制場景上動畫內容的播放。
STEP1.
在按鈕圖層影格 1上由元件庫上依序拉入按鈕元件，並均加上實體名稱，依序為【stop_btn】【play_btn】【skip_bt
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成。Canvas 是 HTML5 的新元素，其中提供的 API 可讓您動態產生並顯示圖形、圖表、影像和動畫。有了適用於 HTML5 的 Canvas API，就可以透過
目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。
使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
Step1.
範例檔內場景上各個動畫素材均已各自轉換為
在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成(非ActionScript)，而可以接受JavaScript控制的元件有【影片片段元件
】與【按鈕元件】，二者差別在於【按鈕元件】有預設
Q版人物通常都是頭大、手短、腳短，因此在跑步時的動作步伐比較小，同樣需要注意手腳與身體元件的配合，搭配傳統補間動畫即可確保跑步動作的流暢。
目標動畫效果:應用影片片段元件表現可愛人物的跑步動作，除了元件的準備與安排來表現動作之外，以傳統補間動畫讓動作更為流暢。
使用動畫技
對於是以相片人物來製作動畫時，當然必需要在Photoshop中事先處裡好每個元件細節，然後再正確匯入Animate中來完成動畫，同樣是需要注意元件變形中心與動畫動作的設定。
目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫，需注意匯入檔案的正確方式，除了元件的準備
接著將介紹更為細膩的角色跑步動畫，細膩處即是手與腳都各分為二部分，因此無論是各元件的調整與設定都需要更仔細，否則將有元件中途分開的問題。
目標動畫效果:應用影片片段元件表現線條人物的的跑步，除了元件的準備與安排來表現動作之外，手與腳的部分均以二元件組成，所有元件將以傳統補
角色的動作還可以是跳躍的方式，類似球拋物線彈跳的方式來表現角色活潑的跳躍動作，讓角色由場景左上角跳躍至場中央，再跳躍至場景右上角，最後再跳躍回原處，由於動作特別，因此每個身上元件都需要仔細的調整。
目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作，除了元件的準備與安排
對於人物角色的走路動作，首先介紹最輕易可完成的半側面角度，這個角度的動作姿勢是最好表現的，只要準備好角色各肢體的獨立元件，搭配變形中心與傳統補間動畫即可完成。
目標動畫效果:應用影片片段元件表現角色人物的走路，除了元件的準備與安排來表現動作之外，將以傳統補間動畫製作肢體的
首先先注重於角色的臉部表情細節的動畫表現，臉部表情之中，眼睛的眨眼算是最重要的，將配合Animate的繪圖功能，快速準備好眨眼所需要的素材內容，最後搭配轉頭動作，角色的動作就更細膩了。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路，除了元件的準備與安排來表現動作
可愛版的動物走路，最大特色是在於腳的部分將省略因走路而彎曲的動作，而是以短比例的腳來表現可愛風格，所以仍然需要注意走路時腳元件的調整。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路，除了元件的準備與安排來表現動作之外，將以傳統補間動畫讓動作更為流暢。
使用動畫技
對於較細膩的動物跑步動作，若是要以傳統補間完成的話，就元件繪製時就需要考慮到元件上顏色的銜接問題，否則將出現腳元件與身體的不連續問題，另外動作上的設定也需要更細膩些，在此將以小狗跑步來解說。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的跑步，除了元件的準備與安排表現
對於動物跑步較複雜之處是在四隻腳的動作表現上，包括跑步時的腳彎曲，是不易以補間動畫表現的，因此需藉由預先準備的彎曲腳元件來替換，由於是不同的元件替換，因此僅能以逐格動畫來表現。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步，除了元件的準備與安排表現動作之外，
可愛動作的表現，除了準備好元件之外，對於各個部位元件的控制，將是動作製作時的重點，例如表情、身體部位等元件，搭配補間動畫與逐格動畫的方式，即可掌握可愛動作。
目標動畫效果:應用影片片段元件表現小動物的可愛動作，對於要動起來的部位元件均需要定義且安排於獨立圖層上，才能夠個別
在交通工具中，就屬腳踏車動畫的細節最多，因為除了輪子的轉動外，人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的，其中包括雙腳的動作與踏板的旋轉，雙腳動作需注意變形中心與補間動畫的應用，踏板的旋轉即是要依靠導引線來控制繞圈旋轉，最後搭配場景上場景元件的移動，即可完成騎腳
