Animate CC 小動物可愛動作動畫

【檢視範例】【下載範例】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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