首先先注重於角色的臉部表情細節的動畫表現，臉部表情之中，眼睛的眨眼算是最重要的，將配合Animate的繪圖功能，快速準備好眨眼所需要的素材內容，最後搭配轉頭動作，角色的動作就更細膩了。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路，除了元件的準備與安排來表現動作

觀點

創作

藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!

哩老師的沙龍

Animate CC 臉部表情-眨眼、轉頭動畫

以影像點陣圖為動畫素材時，除了一般的影像之外，還可以藉由Photoshop處理出去背景的影像素材，以及包含半透明效果的影像素材，也都是動畫中常需要的專業素材準備。
1.挖剪造型影像
影像素材外觀除了是直角矩型外，還需要圓角矩型甚至是其他的外觀造型，此時就需要使用Photoshop的路徑與選取範圍來處

藝文

Animate CC 匯入Photoshop 素材

直昇機在飛行時，主螺旋槳與尾翼副螺旋槳是表現重點，此外還可以加上飛彈發射的安排，以及背景的移動，讓動畫更逼真與完整！
目標動畫效果:應用影片片段元件安排各元件的動畫，包括直昇機與飛彈，最後組合成完整直昇機與飛彈發射，表現特別的交通工具動畫。
使用動畫技巧:影片片段元件、傳

電影戲劇

Animate CC 直昇機動畫

1. 基本四大類型
AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。
(1)逐格動畫

　　　製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。
(2)

Animate CC 動畫類型

無群組或是非基本矩形、非基本橢圓等繪圖物件，在物件重疊時隨即自動進行圖案間編輯處理，包括填色與外框筆畫間均會互相作用。
1.填色圖案之間相加
當繪製彼此重疊且無筆畫的填色相同形狀時，重疊的形狀將自動合併在一起。

2. 填色圖案之間上減下
當您繪製彼此重疊無筆畫的不同填色形狀時，最上層的形狀會截掉一

文化生活

Animate CC繪圖與物件重疊編輯


【檢視範例】【下載範例】
應用形狀補間動畫的物件變形特點，再搭配遮色片功能，不需要藉助任何的元件與濾鏡效果，即可完美演繹目標內容的動態呈現。
目標動畫效果:應用形狀補間動畫完成畫線條動畫，以及搭配遮色片呈現內容出現的效果，並細膩設定物件變形與時間點控制，達成繪圖動畫的目地。
使用動畫技巧:形狀補間

職場產業

Animate CC 畫線與色塊變形繪圖動畫

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。
 Step 1.
場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~

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

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

進入到全部內容元件內，點取上方介紹內容設定實

Animate CC 動態產品介紹互動設計

除了控制場景上時間軸的影格播放外，更可以控制影片片段元件內時間軸的播放，因此只要影片片段元件安排得當，並正確加上元件實體名稱，就可以做出更有互動性的動畫內容控制安排，請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。
STEP1.
 範例檔中已完成摩托車的動畫

Animate CC 控制影片片段元件內時間軸播放


【檢視範例】【下載範例】
應用影片片段元件與傳統補間動畫來整合遮色片動畫，呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
Step1.
元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層，在鏡片遮色片圖層上插入多個關鍵影格，並依序移動遮色片元件於場景上不同位置，建立

Animate CC 網頁動畫與JS互動

目前尚無內容