Animate CC 蝴蝶飛舞動畫
更新於 發佈於 閱讀時間約 2 分鐘
關於逐格動畫最常使用的時機，其實就是當無法以補間動畫方式來呈現的動畫，就得退而求其次的以逐格動畫呈現，即是逐一安排關鍵影格的動畫內容來呈現出動畫，當然就需要搭配適當的變形編輯與動畫內容的準備。
目標動畫效果:由逐格動畫搭配變形編輯與傳統補間動畫導引線，製作蝴蝶循移動軌跡飛舞動畫。
使用動畫技巧:逐格動畫、影片片段元件、傳統補間導引線。
使用動畫技巧:逐格動畫、影片片段元件、傳統補間導引線。
Step1.
範例練習檔元件庫內準備了蝴蝶的身體與翅膀二圖像元件。直接執行『插入 > 新增元件』，請新增影片片段元件『蝴蝶』，在蝴蝶影片片段元件內，請由元件庫拉入身體與翅膀二元件，身體元件請對齊至元件中心，請多複製一份翅膀並執行『修改 > 變形 > 水平翻轉』成為蝴蝶左側的翅膀，將蝴蝶組裝完整。
範例練習檔元件庫內準備了蝴蝶的身體與翅膀二圖像元件。直接執行『插入 > 新增元件』，請新增影片片段元件『蝴蝶』，在蝴蝶影片片段元件內，請由元件庫拉入身體與翅膀二元件，身體元件請對齊至元件中心，請多複製一份翅膀並執行『修改 > 變形 > 水平翻轉』成為蝴蝶左側的翅膀，將蝴蝶組裝完整。
Step2.
選取整個蝴蝶執行『修改 > 變型 > 順時針旋轉90度』，並再些微變形旋轉成略左上右下，再執行『修改 > 時間軸 > 分散至圖層』，將三個元件分至三個獨立圖層上，刪除圖層1並整理圖層名稱。使用變形工具將二個翅膀元件的變形編輯中心移至身體上的側邊中心。
選取整個蝴蝶執行『修改 > 變型 > 順時針旋轉90度』，並再些微變形旋轉成略左上右下，再執行『修改 > 時間軸 > 分散至圖層』，將三個元件分至三個獨立圖層上，刪除圖層1並整理圖層名稱。使用變形工具將二個翅膀元件的變形編輯中心移至身體上的側邊中心。
Step3.
調整右側翅膀圖層順序至左側翅膀與身體之上，使用變形工具由下往上變形下方右側翅膀成翻轉至上；點取左側翅膀圖層，使用變形傾斜工具，讓左側翅膀向右略微傾斜，讓二翅膀有前後感。
調整右側翅膀圖層順序至左側翅膀與身體之上，使用變形工具由下往上變形下方右側翅膀成翻轉至上；點取左側翅膀圖層，使用變形傾斜工具，讓左側翅膀向右略微傾斜，讓二翅膀有前後感。
Step4.
點二下前方右側翅膀進入原地編輯模式來編輯翅膀元件，在影格2插入關鍵影格，點取關鍵影格使用扭曲變形，調整左上與右上編輯點，將翅膀調整成稍微向前，而且低一點。繼續在影格3插入關鍵影格，點取關鍵影格使用扭曲變形，調整左上與右上編輯點，將翅膀調整成再低一點。
點二下前方右側翅膀進入原地編輯模式來編輯翅膀元件，在影格2插入關鍵影格，點取關鍵影格使用扭曲變形，調整左上與右上編輯點，將翅膀調整成稍微向前，而且低一點。繼續在影格3插入關鍵影格，點取關鍵影格使用扭曲變形，調整左上與右上編輯點，將翅膀調整成再低一點。
Step5.
在影格4插入關鍵影格，點取關鍵影格使用變形工具，將翅膀變形成對稱向下。複製影格2貼至影格5，點取關鍵影格使用變形工具，將翅膀變形成對稱向下。
在影格4插入關鍵影格，點取關鍵影格使用變形工具，將翅膀變形成對稱向下。複製影格2貼至影格5，點取關鍵影格使用變形工具，將翅膀變形成對稱向下。
Step6.
複製影格1貼至影格6，點取關鍵影格使用變形工具，將翅膀變形成對稱向下。複製影格4貼至影格7，完成翅膀細部動作編輯。
複製影格1貼至影格6，點取關鍵影格使用變形工具，將翅膀變形成對稱向下。複製影格4貼至影格7，完成翅膀細部動作編輯。
回到蝴蝶影片片段，將三圖層影格至影格7插入影格。
Step7.
回到場景上，由元件庫拉入蝴蝶影片片段元件，在影格200處為蝴蝶圖層插入關鍵影格，製作蝴蝶由左下移動至右上的傳統移動補間動畫，背景圖層同樣於影格200插入影格。在蝴蝶圖層上按下滑鼠右鍵，選擇執行『增加移動導引線』即新增導引線圖層，並使用鉛筆工具繪製要控制蝴蝶移動的導引線，讓關鍵影格上的蝴蝶編輯中心貼齊導引線。
回到場景上，由元件庫拉入蝴蝶影片片段元件，在影格200處為蝴蝶圖層插入關鍵影格，製作蝴蝶由左下移動至右上的傳統移動補間動畫，背景圖層同樣於影格200插入影格。在蝴蝶圖層上按下滑鼠右鍵，選擇執行『增加移動導引線』即新增導引線圖層，並使用鉛筆工具繪製要控制蝴蝶移動的導引線，讓關鍵影格上的蝴蝶編輯中心貼齊導引線。
Step8.
移動播放磁頭至要讓蝴蝶停留的位置並於圖層上該時間影格插入關鍵影格，複製該影格並向右時間影格上貼上該影格，即是二關鍵影格上蝴蝶位置為一致，移除此二停留影格間的補間動畫來控制蝴蝶暫停移動。
移動播放磁頭至要讓蝴蝶停留的位置並於圖層上該時間影格插入關鍵影格，複製該影格並向右時間影格上貼上該影格，即是二關鍵影格上蝴蝶位置為一致，移除此二停留影格間的補間動畫來控制蝴蝶暫停移動。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
129內容數
多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用!
Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
接下來要說個跟「蝴蝶效應」以及我自己有關的故事。
大家都知道，設計系要畢業都必須通過「畢業製作」，就是做出一個作品來，讓老師評分，通過就能順利畢業。
我讀的是輔大應用美術系，大一時每個人修的課都一樣，大都著重在美術和設計的基礎上，一面鍛鍊美術底子一面培養設計的思維。
到了大二就要選組了，應美系
吳明益老師的小說《單車失竊記》故事中提到的蝶畫，在南投木生昆蟲博物館看得到！用蝴蝶翅膀所拼成的畫，可以說是一種拼貼藝術，然而，在實際看過蝶畫之後，我認為這樣的表現更貼近後印象主義藝術家秀拉「點描法」的概念，蝴蝶翅膀上的色彩經過工藝師的剪、黏、拼、湊，在觀者的腦中「融合」，增添色彩和對比色的豐富。
張開雙翅歡迎你
一般說到蝴蝶跟蛾的區分，很常聽到人說：那個停下來時翅膀合起來的，就是蝴蝶；停下時翅膀張開的就是蛾。
但是，你應該也聽過一句話叫：凡事總有例外。所以藍鵲跟大自然一樣，不喜歡跟你說“絕對”唷！
今天就要介紹幾種停下來是張開雙翅，彷彿在張開雙手歡迎你的蛺蝶科的蝴蝶給大家欣賞欣賞牠們的美麗~
習以為常的捷運車廂，居然出現一隻飛舞的蝴蝶？如果我沒抬頭看見牠，於我來說牠就相當於不曾存在過。在我們的生活中，是否也有許多共時性，就像這隻蝴蝶一樣？
這一天，叮噹在陽台上整理花草，瞥見一隻披著黃色衣裳的大蝴蝶正在花間穿來插去，優雅歡樂地飛舞。
蝴蝶是昆蟲中的美麗大使，但又容易受驚，倘觀賞者動作太大，牠們會拍翼遠飛。於是，叮噹小心翼翼走近蝴蝶，心想近距離觀賞一下就好了。怎料，小蝴蝶多番停下來休息，讓叮噹可以細心觀賞牠的美態，叫人特别興奮！
這一
這次要介紹的圖表叫做蝴蝶圖，主要用來比較兩種數據之間的差異，並且以左右兩邊的方式來呈現比較結果。
那為什麼稱之為蝴蝶圖呢?阿就真的長的很像蝴蝶阿😆，兩邊的數列就很像蝴蝶的翅膀一樣。
這次用的範例是要比較兩個年度的數據關係，想要看出2022年與2023年各項目的變化。
一般的橫
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
接下來要說個跟「蝴蝶效應」以及我自己有關的故事。
大家都知道，設計系要畢業都必須通過「畢業製作」，就是做出一個作品來，讓老師評分，通過就能順利畢業。
我讀的是輔大應用美術系，大一時每個人修的課都一樣，大都著重在美術和設計的基礎上，一面鍛鍊美術底子一面培養設計的思維。
到了大二就要選組了，應美系
吳明益老師的小說《單車失竊記》故事中提到的蝶畫，在南投木生昆蟲博物館看得到！用蝴蝶翅膀所拼成的畫，可以說是一種拼貼藝術，然而，在實際看過蝶畫之後，我認為這樣的表現更貼近後印象主義藝術家秀拉「點描法」的概念，蝴蝶翅膀上的色彩經過工藝師的剪、黏、拼、湊，在觀者的腦中「融合」，增添色彩和對比色的豐富。
張開雙翅歡迎你
一般說到蝴蝶跟蛾的區分，很常聽到人說：那個停下來時翅膀合起來的，就是蝴蝶；停下時翅膀張開的就是蛾。
但是，你應該也聽過一句話叫：凡事總有例外。所以藍鵲跟大自然一樣，不喜歡跟你說“絕對”唷！
今天就要介紹幾種停下來是張開雙翅，彷彿在張開雙手歡迎你的蛺蝶科的蝴蝶給大家欣賞欣賞牠們的美麗~
習以為常的捷運車廂，居然出現一隻飛舞的蝴蝶？如果我沒抬頭看見牠，於我來說牠就相當於不曾存在過。在我們的生活中，是否也有許多共時性，就像這隻蝴蝶一樣？
這一天，叮噹在陽台上整理花草，瞥見一隻披著黃色衣裳的大蝴蝶正在花間穿來插去，優雅歡樂地飛舞。
蝴蝶是昆蟲中的美麗大使，但又容易受驚，倘觀賞者動作太大，牠們會拍翼遠飛。於是，叮噹小心翼翼走近蝴蝶，心想近距離觀賞一下就好了。怎料，小蝴蝶多番停下來休息，讓叮噹可以細心觀賞牠的美態，叫人特别興奮！
這一
這次要介紹的圖表叫做蝴蝶圖，主要用來比較兩種數據之間的差異，並且以左右兩邊的方式來呈現比較結果。
那為什麼稱之為蝴蝶圖呢?阿就真的長的很像蝴蝶阿😆，兩邊的數列就很像蝴蝶的翅膀一樣。
這次用的範例是要比較兩個年度的數據關係，想要看出2022年與2023年各項目的變化。
一般的橫