Animate CC 小動物可愛動作動畫

更新 發佈閱讀 4 分鐘
raw-image

檢視範例】【下載範例

可愛動作的表現,除了準備好元件之外,對於各個部位元件的控制,將是動作製作時的重點,例如表情、身體部位等元件,搭配補間動畫與逐格動畫的方式,即可掌握可愛動作。

目標動畫效果:應用影片片段元件表現小動物的可愛動作,對於要動起來的部位元件均需要定義且安排於獨立圖層上,才能夠個別安排動作並建立補間動畫。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心、替換元件。

Step1.
範例檔元件庫中包含了所有小動物的各個元件(元件準備同之前介紹,先轉換成元件後再分散至圖層)。

raw-image

首先進入到小豬動作元件內,首先更改頭元件變形中心至下巴處、尾巴變形中心至與身體連接處,接著為所有圖層於影格30處插入影格,再為小豬所有身體部位圖層於影格5、10、15、20、25、30處插入關鍵影格(影子除外)。

raw-image

依序設定影格5、10、15、20、25上的小豬動作,可以旋轉與移動各個元件來表現動作姿勢。

raw-image
raw-image

最後分別依序點取影格20與25上的表情元件,由屬性控制版上按下替換按鈕替換為表情2元件,建立傳統補間動畫,並於影格50插入影格讓動作稍有間斷。

raw-image

Step2.
進入到小鳥動作元件內,首先更改身體元件變形中心至下腹部處、翅膀變形中心至與身體連接處,接著為所有圖層於影格60處插入影格,再為小鳥所有身體部位圖層於影格5插入關鍵影格(影子除外),並略向上移動所有小鳥元件;以此類推依序於影格10、15、20插入關鍵影格,並依序向上移動小鳥所有元件,呈逐關鍵影格往上移動(表現飛起)。

raw-image

繼續於影格30插入關鍵影格,保持元件位置不動,繼續於影格35插入關鍵影格,向下移動所有小鳥元件,最後移動複製影格1上所有小鳥元件關鍵影格至影格40處(表現落地)。

Step3.
依序設定影格5、10、15、20上的小鳥動作,可以旋轉與移動各個元件來表現飛起的動作姿勢,包括翅膀的上下位置與旋轉身體角度等。

raw-image
raw-image

接著繼續調整影格35上的元件姿勢,最後分別依序點取影格15與20上的表情元件,由屬性控制版上按下替換按鈕替換為表情2元件,建立傳統補間動畫。

raw-image

影子圖層請於影格25處插入關鍵影格並設定顏色效果Alpha:30%,同樣建立傳統補間動畫。

Step4.
回到場景上,首先為所有圖層於影格150處插入影格,再於小鳥圖層上影格40、60、100處插入關鍵影格,向右移動影格40上小鳥元件位置,並複製影格40關鍵影格至影格60,建立影格1-40、60-100間傳統補間動畫(注意影格安排是配合影片片段元件內的動作影格數設定)。

raw-image

為了讓小鳥停下來時不作動作,因此需要再準備一個小鳥不作動作的元件,請直接於元件庫上重製小鳥動作元件成小鳥不動,並至小鳥不動元件內移除所有影格2之後的影格,回到場景上於小鳥圖層影格120處插入關鍵影格,由屬性控制版上替換小鳥動作元件微小鳥不動元件,完成場景上小鳥的動畫。

Step5.
最後於小豬圖層上影格30、50、80、100、130處插入關鍵影格,向右移動影格30上小豬元件位置,並複製影格30關鍵影格至影格50,向右移動影格80上小豬元件位置,並複製影格80關鍵影格至影格100,建立影格1-30、50-80、100-130間傳統補間動畫。

raw-image

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

留言
avatar-img
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
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
這篇文章描述了設計可愛小羊基諾李維的過程,包括對眼睛、特色和可愛度的考量,以及角色設計的修改和選定過程。作者透過創作讓大家感到愉悅和放鬆。
Thumbnail
這篇文章描述了設計可愛小羊基諾李維的過程,包括對眼睛、特色和可愛度的考量,以及角色設計的修改和選定過程。作者透過創作讓大家感到愉悅和放鬆。
Thumbnail
當鸚鵡展開翅膀伸懶腰是甚麼意思呢?  情境一 : 玩耍前的熱身運動。 就像我們伸展前做的熱身運動,鳥寶會依序伸展翅膀和雙腳。 情境二 : 心情放鬆時的伸展。 此時鳥寶的沒有任何恐懼及不安的情緒,打從內心感到放鬆。 情境三 : 集中注意力的準備。 如果想和鳥寶一起玩,或是想
Thumbnail
當鸚鵡展開翅膀伸懶腰是甚麼意思呢?  情境一 : 玩耍前的熱身運動。 就像我們伸展前做的熱身運動,鳥寶會依序伸展翅膀和雙腳。 情境二 : 心情放鬆時的伸展。 此時鳥寶的沒有任何恐懼及不安的情緒,打從內心感到放鬆。 情境三 : 集中注意力的準備。 如果想和鳥寶一起玩,或是想
Thumbnail
不同材質和樣貌的老鼠們,不同的鼠生經驗
Thumbnail
不同材質和樣貌的老鼠們,不同的鼠生經驗
Thumbnail
還是堅持一周至少一張手繪練習作品,避免手的記憶遺忘了,原本選擇手繪水果,我發現跟實體相像東西比較難畫,不知為何,畫出來都覺得怪怪的,後來放棄還是選擇動物,這次選擇了五隻可愛的小動物,看起非常可愛,如下圖: 之前都只畫一隻主體,這次挑戰五隻動物,每一隻都長得不一樣,不過原則都一樣,在繪畫的過程發現
Thumbnail
還是堅持一周至少一張手繪練習作品,避免手的記憶遺忘了,原本選擇手繪水果,我發現跟實體相像東西比較難畫,不知為何,畫出來都覺得怪怪的,後來放棄還是選擇動物,這次選擇了五隻可愛的小動物,看起非常可愛,如下圖: 之前都只畫一隻主體,這次挑戰五隻動物,每一隻都長得不一樣,不過原則都一樣,在繪畫的過程發現
Thumbnail
你好,來自摺紙大笨象先生的問候!在此教學短片中,你將學習完成一隻狐狸。此教學為簡易程度,適合初學者。
Thumbnail
你好,來自摺紙大笨象先生的問候!在此教學短片中,你將學習完成一隻狐狸。此教學為簡易程度,適合初學者。
Thumbnail
STEP1. 開啟範例練習檔,使用直接選取工具調整身體尾部輪廓,複選二身體構成大橢圓執行路徑管理員『分割』並解散群組,刪去上方身體外的多餘元件。 複選三斑點妥圓與身體二橢圓元件,執行路徑管理員『分割』並解散群組,刪去上方身體外的多餘元件,進行填色完成身體部分。 STEP2. 複選前腳元件與中央
Thumbnail
STEP1. 開啟範例練習檔,使用直接選取工具調整身體尾部輪廓,複選二身體構成大橢圓執行路徑管理員『分割』並解散群組,刪去上方身體外的多餘元件。 複選三斑點妥圓與身體二橢圓元件,執行路徑管理員『分割』並解散群組,刪去上方身體外的多餘元件,進行填色完成身體部分。 STEP2. 複選前腳元件與中央
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News