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

更新 發佈閱讀 4 分鐘
vocus|新世代的創作平台

檢視範例】【下載範例

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

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

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

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

vocus|新世代的創作平台
vocus|新世代的創作平台
vocus|新世代的創作平台

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

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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


vocus|新世代的創作平台


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

留言
avatar-img
哩老師的沙龍
30會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/13
Q版人物通常都是頭大、手短、腳短,因此在跑步時的動作步伐比較小,同樣需要注意手腳與身體元件的配合,搭配傳統補間動畫即可確保跑步動作的流暢。 目標動畫效果:應用影片片段元件表現可愛人物的跑步動作,除了元件的準備與安排來表現動作之外,以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
2020/02/13
Q版人物通常都是頭大、手短、腳短,因此在跑步時的動作步伐比較小,同樣需要注意手腳與身體元件的配合,搭配傳統補間動畫即可確保跑步動作的流暢。 目標動畫效果:應用影片片段元件表現可愛人物的跑步動作,除了元件的準備與安排來表現動作之外,以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
2020/02/13
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
2020/02/13
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
2020/02/13
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補
Thumbnail
2020/02/13
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補
Thumbnail
看更多
你可能也想看
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
首先先注重於角色的臉部表情細節的動畫表現,臉部表情之中,眼睛的眨眼算是最重要的,將配合Animate的繪圖功能,快速準備好眨眼所需要的素材內容,最後搭配轉頭動作,角色的動作就更細膩了。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作
Thumbnail
首先先注重於角色的臉部表情細節的動畫表現,臉部表情之中,眼睛的眨眼算是最重要的,將配合Animate的繪圖功能,快速準備好眨眼所需要的素材內容,最後搭配轉頭動作,角色的動作就更細膩了。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作
Thumbnail
STEP1. 選取到頭部外側圓形,複製並貼至上層一份;複選二圓形並進行『分割』解散群組,選取到中央臉型圓形,複製並貼至上層一份,選取到一份臉型圓形與分割線,進行『分割』並解散群組,獲得上邊流海與下邊臉部。 STEP2. 選取到臉部下半圓與長橢圓進行『上剪下』,即刪去多餘部分只留下臉二邊的頭髮部分
Thumbnail
STEP1. 選取到頭部外側圓形,複製並貼至上層一份;複選二圓形並進行『分割』解散群組,選取到中央臉型圓形,複製並貼至上層一份,選取到一份臉型圓形與分割線,進行『分割』並解散群組,獲得上邊流海與下邊臉部。 STEP2. 選取到臉部下半圓與長橢圓進行『上剪下』,即刪去多餘部分只留下臉二邊的頭髮部分
Thumbnail
對於人物角色的走路動作,首先介紹最輕易可完成的半側面角度,這個角度的動作姿勢是最好表現的,只要準備好角色各肢體的獨立元件,搭配變形中心與傳統補間動畫即可完成。 目標動畫效果:應用影片片段元件表現角色人物的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫製作肢體的
Thumbnail
對於人物角色的走路動作,首先介紹最輕易可完成的半側面角度,這個角度的動作姿勢是最好表現的,只要準備好角色各肢體的獨立元件,搭配變形中心與傳統補間動畫即可完成。 目標動畫效果:應用影片片段元件表現角色人物的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫製作肢體的
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
STEP1. 開啟範例練習檔,選取身體輪廓複製並貼至上層成二份,複選身體與分割依據線條進行路徑管理員『分割』並解散群組,即可進行填色,最底層完整身體元件請設定筆畫與『變數寬度描述檔』。 STEP2. 複選構成頭部的三大妥圓與二小橢圓,進行路徑管理員『相加』,複製、貼至上層此頭部元件成為二份;同樣
Thumbnail
STEP1. 開啟範例練習檔,選取身體輪廓複製並貼至上層成二份,複選身體與分割依據線條進行路徑管理員『分割』並解散群組,即可進行填色,最底層完整身體元件請設定筆畫與『變數寬度描述檔』。 STEP2. 複選構成頭部的三大妥圓與二小橢圓,進行路徑管理員『相加』,複製、貼至上層此頭部元件成為二份;同樣
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News