Animate CC Q版照片人物動畫

Animate CC Q版照片人物動畫

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

檢視範例】【下載範例

對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。

目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備與安排來表現動作之外,將以傳統補間動畫完成,讓動作更為流暢。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心、匯入PSD檔。

Step1.
人物.PSD檔案圖層上可以檢視到所有的元件,均已分解處裡至圖層上,處裡相片元件時請注意元件與元件之間需要有重疊的影像部分,因此除了去背景之外的處裡,還要以Photoshop筆形工具描繪需要部位的路徑,再經由路徑轉為選取範圍並拷貝至其他圖層的方式,來處裡每個部位內容,例如肩膀與手臂之間,先選取拷貝出手臂後,再處裡肩膀處凸出,手與腳的二段元件銜接處均相同。

raw-image

Step2.
開啟範例檔,新增影騙片段元件『人物』,執行『檔案 > 匯入 > 匯入至舞台』請複選所有圖層並選擇『點陣圖影像含有可編輯的圖層樣式』(確保點陣圖的半透明效果),以及選擇『壓縮:不失真』、『將圖層轉換成:Animate圖層』,按下確定自動完成匯入與元件轉換以及分圖層。

raw-image

Step3.
使用任意變形工具更改每個元件的變形中心,頭於下巴處、手臂於肩膀處、手與手掌均在元件銜接處,大腿於與身體銜接處、腳與鞋在元件之間銜接處,左右手與腳均相同。

raw-image

Step4.
所有圖層於影格7、13、19、24插入關鍵影格,拉入參考倒引線於底下、中央、下巴處,依序使用移動與變形工具旋轉,調整影格1與影格13的姿勢,最後建立傳統補間動畫完成人物元件。

raw-image
raw-image

最後回到場景上,新增人物圖層並置入人物元件於舞台上,完成此範例。

raw-image

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

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