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

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

首先先注重於角色的臉部表情細節的動畫表現，臉部表情之中，眼睛的眨眼算是最重要的，將配合Animate的繪圖功能，快速準備好眨眼所需要的素材內容，最後搭配轉頭動作，角色的動作就更細膩了。

目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路，除了元件的準備與安排來表現動作之外，將以傳統補間動畫讓動作更為流暢。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。

Step1.
範例檔元件庫中的人物身上每個物件均已初步分為元件，包括頭、臉、身體、眼睛、鼻子、嘴巴，而眼睛將要依動作再細分元件與設定動畫。

Step2.
進到眼睛眨眼元件內，選取左側眼睛並轉換為影片片段元件『左眼』，在進到左眼元件內，鎖定圖層1為圖層1於影格30插入影格；新增眼皮於圖層1上，於影格2插入關鍵影格，使用橢圓工具使用『物件繪製』選項，繪製寬高為41的圓形填色物件（顏色為#FFE0BB），對齊元件中心與圖層1上的眼睛（剛好完整覆蓋），繼續於眼皮圖層的影格3與5插入關鍵影格。

Step3.
繼續在左眼元件內，確認在眼皮的關鍵影格2上，使用鋼筆工具同樣使用『物件繪製』選項，繪製眼線於圓的左上位置，點取眼線物件複製，並至影格5上原位置貼上，移動影格5上的眼線至下方；再複製貼上眼線於影格3之上，執行『修改 > 變形 > 垂直翻轉』並移動眼線至眼皮下方處。

點取眼皮圖層的影格2並打散眼線與眼皮繪圖物件，打散後刪除下半部眼皮與多餘眼線；點取眼皮圖層的影格5並打散眼線與眼皮繪圖物件，打散後刪除下半部眼皮與多餘眼線，影格3保持不變即可。

進到眼睛眨眼元件內，刪除右側眼睛並複製左眼於原右眼位置，執行『修改 > 變形 > 水平翻轉』完成右眼。

Step4.
回到場景上，修改頭與臉元件的變形中心均於下方，接著為身體與背景二圖層於影格70插影格，其餘圖層於影格30、40、50、55、65、70、80、90插入關鍵影格，準備來設定轉頭時各元件的旋轉變形：

建立影格30-40、50-65、75-90間的傳統補間動畫。

Step5.
進入眼睛上看元件內，選取二眼珠並轉換為影片片段元件，眼珠圖層於影格10、20、30插入關鍵影格，眼圈圖層於影格30插入影格，向上移動影格20上的二眼珠，並複製影格20至影格30，建立眼珠圖層的影格1-10、20-30間的傳統補間動畫。

Step6.
回到場景上，身體與背景二圖層於影格120處插入影格，其餘除了眼睛圖層外，於影格100、110、120插入關鍵影格，新增眼睛上看圖層於最上方並於影格91處插入關鍵影格，置入眼睛上看元件，同樣於影格100、110、120插入關鍵影格；

調整影格100上的臉、眼睛、鼻子、嘴巴均向上移動，並複製110上的臉、眼睛、鼻子、嘴巴關鍵影格至110上，建立影格90-100與110-120間的傳統補間動畫，完成此範例。

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果