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

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

更新於 發佈於 閱讀時間約 4 分鐘
raw-image

檢視範例】【下載範例

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

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

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

raw-image

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

raw-image

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

raw-image

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

raw-image

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

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

raw-image
raw-image
raw-image

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

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

raw-image

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

raw-image

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


raw-image


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

avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
留言
avatar-img
留言分享你的想法!
哩老師的沙龍 的其他內容
Q版人物通常都是頭大、手短、腳短,因此在跑步時的動作步伐比較小,同樣需要注意手腳與身體元件的配合,搭配傳統補間動畫即可確保跑步動作的流暢。 目標動畫效果:應用影片片段元件表現可愛人物的跑步動作,除了元件的準備與安排來表現動作之外,以傳統補間動畫讓動作更為流暢。 使用動畫技
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補
Q版人物通常都是頭大、手短、腳短,因此在跑步時的動作步伐比較小,同樣需要注意手腳與身體元件的配合,搭配傳統補間動畫即可確保跑步動作的流暢。 目標動畫效果:應用影片片段元件表現可愛人物的跑步動作,除了元件的準備與安排來表現動作之外,以傳統補間動畫讓動作更為流暢。 使用動畫技
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補