Animate CC 蝴蝶飛舞動畫

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

關於逐格動畫最常使用的時機，其實就是當無法以補間動畫方式來呈現的動畫，就得退而求其次的以逐格動畫呈現，即是逐一安排關鍵影格的動畫內容來呈現出動畫，當然就需要搭配適當的變形編輯與動畫內容的準備。

目標動畫效果:由逐格動畫搭配變形編輯與傳統補間動畫導引線，製作蝴蝶循移動軌跡飛舞動畫。
使用動畫技巧:逐格動畫、影片片段元件、傳統補間導引線。

Step1.
範例練習檔元件庫內準備了蝴蝶的身體與翅膀二圖像元件。直接執行『插入 > 新增元件』，請新增影片片段元件『蝴蝶』，在蝴蝶影片片段元件內，請由元件庫拉入身體與翅膀二元件，身體元件請對齊至元件中心，請多複製一份翅膀並執行『修改 > 變形 > 水平翻轉』成為蝴蝶左側的翅膀，將蝴蝶組裝完整。

Step2.
選取整個蝴蝶執行『修改 > 變型 > 順時針旋轉90度』，並再些微變形旋轉成略左上右下，再執行『修改 > 時間軸 > 分散至圖層』，將三個元件分至三個獨立圖層上，刪除圖層1並整理圖層名稱。使用變形工具將二個翅膀元件的變形編輯中心移至身體上的側邊中心。

Step3.
調整右側翅膀圖層順序至左側翅膀與身體之上，使用變形工具由下往上變形下方右側翅膀成翻轉至上；點取左側翅膀圖層，使用變形傾斜工具，讓左側翅膀向右略微傾斜，讓二翅膀有前後感。

Step4.
點二下前方右側翅膀進入原地編輯模式來編輯翅膀元件，在影格2插入關鍵影格，點取關鍵影格使用扭曲變形，調整左上與右上編輯點，將翅膀調整成稍微向前，而且低一點。繼續在影格3插入關鍵影格，點取關鍵影格使用扭曲變形，調整左上與右上編輯點，將翅膀調整成再低一點。

Step5.
在影格4插入關鍵影格，點取關鍵影格使用變形工具，將翅膀變形成對稱向下。複製影格2貼至影格5，點取關鍵影格使用變形工具，將翅膀變形成對稱向下。

Step6.
複製影格1貼至影格6，點取關鍵影格使用變形工具，將翅膀變形成對稱向下。複製影格4貼至影格7，完成翅膀細部動作編輯。

回到蝴蝶影片片段，將三圖層影格至影格7插入影格。

Step7.
回到場景上，由元件庫拉入蝴蝶影片片段元件，在影格200處為蝴蝶圖層插入關鍵影格，製作蝴蝶由左下移動至右上的傳統移動補間動畫，背景圖層同樣於影格200插入影格。在蝴蝶圖層上按下滑鼠右鍵，選擇執行『增加移動導引線』即新增導引線圖層，並使用鉛筆工具繪製要控制蝴蝶移動的導引線，讓關鍵影格上的蝴蝶編輯中心貼齊導引線。

Step8.
移動播放磁頭至要讓蝴蝶停留的位置並於圖層上該時間影格插入關鍵影格，複製該影格並向右時間影格上貼上該影格，即是二關鍵影格上蝴蝶位置為一致，移除此二停留影格間的補間動畫來控制蝴蝶暫停移動。

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