Animate CC Q版照片人物動畫
閱讀時間約 2 分鐘
對於是以相片人物來製作動畫時，當然必需要在Photoshop中事先處裡好每個元件細節，然後再正確匯入Animate中來完成動畫，同樣是需要注意元件變形中心與動畫動作的設定。
目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫，需注意匯入檔案的正確方式，除了元件的準備與安排來表現動作之外，將以傳統補間動畫完成，讓動作更為流暢。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心、匯入PSD檔。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心、匯入PSD檔。
Step1.
人物.PSD檔案圖層上可以檢視到所有的元件，均已分解處裡至圖層上，處裡相片元件時請注意元件與元件之間需要有重疊的影像部分，因此除了去背景之外的處裡，還要以Photoshop筆形工具描繪需要部位的路徑，再經由路徑轉為選取範圍並拷貝至其他圖層的方式，來處裡每個部位內容，例如肩膀與手臂之間，先選取拷貝出手臂後，再處裡肩膀處凸出，手與腳的二段元件銜接處均相同。
人物.PSD檔案圖層上可以檢視到所有的元件，均已分解處裡至圖層上，處裡相片元件時請注意元件與元件之間需要有重疊的影像部分，因此除了去背景之外的處裡，還要以Photoshop筆形工具描繪需要部位的路徑，再經由路徑轉為選取範圍並拷貝至其他圖層的方式，來處裡每個部位內容，例如肩膀與手臂之間，先選取拷貝出手臂後，再處裡肩膀處凸出，手與腳的二段元件銜接處均相同。
Step2.
開啟範例檔，新增影騙片段元件『人物』，執行『檔案 > 匯入 > 匯入至舞台』請複選所有圖層並選擇『點陣圖影像含有可編輯的圖層樣式』（確保點陣圖的半透明效果），以及選擇『壓縮：不失真』、『將圖層轉換成：Animate圖層』，按下確定自動完成匯入與元件轉換以及分圖層。
開啟範例檔，新增影騙片段元件『人物』，執行『檔案 > 匯入 > 匯入至舞台』請複選所有圖層並選擇『點陣圖影像含有可編輯的圖層樣式』（確保點陣圖的半透明效果），以及選擇『壓縮：不失真』、『將圖層轉換成：Animate圖層』，按下確定自動完成匯入與元件轉換以及分圖層。
Step3.
使用任意變形工具更改每個元件的變形中心，頭於下巴處、手臂於肩膀處、手與手掌均在元件銜接處，大腿於與身體銜接處、腳與鞋在元件之間銜接處，左右手與腳均相同。
使用任意變形工具更改每個元件的變形中心，頭於下巴處、手臂於肩膀處、手與手掌均在元件銜接處，大腿於與身體銜接處、腳與鞋在元件之間銜接處，左右手與腳均相同。
Step4.
所有圖層於影格7、13、19、24插入關鍵影格，拉入參考倒引線於底下、中央、下巴處，依序使用移動與變形工具旋轉，調整影格1與影格13的姿勢，最後建立傳統補間動畫完成人物元件。
所有圖層於影格7、13、19、24插入關鍵影格，拉入參考倒引線於底下、中央、下巴處，依序使用移動與變形工具旋轉，調整影格1與影格13的姿勢，最後建立傳統補間動畫完成人物元件。
最後回到場景上，新增人物圖層並置入人物元件於舞台上，完成此範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。