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 追蹤
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
接下來要說個跟「蝴蝶效應」以及我自己有關的故事。
大家都知道，設計系要畢業都必須通過「畢業製作」，就是做出一個作品來，讓老師評分，通過就能順利畢業。
我讀的是輔大應用美術系，大一時每個人修的課都一樣，大都著重在美術和設計的基礎上，一面鍛鍊美術底子一面培養設計的思維。
到了大二就要選組了，應美系
吳明益老師的小說《單車失竊記》故事中提到的蝶畫，在南投木生昆蟲博物館看得到！用蝴蝶翅膀所拼成的畫，可以說是一種拼貼藝術，然而，在實際看過蝶畫之後，我認為這樣的表現更貼近後印象主義藝術家秀拉「點描法」的概念，蝴蝶翅膀上的色彩經過工藝師的剪、黏、拼、湊，在觀者的腦中「融合」，增添色彩和對比色的豐富。
張開雙翅歡迎你
一般說到蝴蝶跟蛾的區分，很常聽到人說：那個停下來時翅膀合起來的，就是蝴蝶；停下時翅膀張開的就是蛾。
但是，你應該也聽過一句話叫：凡事總有例外。所以藍鵲跟大自然一樣，不喜歡跟你說“絕對”唷！
今天就要介紹幾種停下來是張開雙翅，彷彿在張開雙手歡迎你的蛺蝶科的蝴蝶給大家欣賞欣賞牠們的美麗~
習以為常的捷運車廂，居然出現一隻飛舞的蝴蝶？如果我沒抬頭看見牠，於我來說牠就相當於不曾存在過。在我們的生活中，是否也有許多共時性，就像這隻蝴蝶一樣？
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
接下來要說個跟「蝴蝶效應」以及我自己有關的故事。
大家都知道，設計系要畢業都必須通過「畢業製作」，就是做出一個作品來，讓老師評分，通過就能順利畢業。
我讀的是輔大應用美術系，大一時每個人修的課都一樣，大都著重在美術和設計的基礎上，一面鍛鍊美術底子一面培養設計的思維。
到了大二就要選組了，應美系
吳明益老師的小說《單車失竊記》故事中提到的蝶畫，在南投木生昆蟲博物館看得到！用蝴蝶翅膀所拼成的畫，可以說是一種拼貼藝術，然而，在實際看過蝶畫之後，我認為這樣的表現更貼近後印象主義藝術家秀拉「點描法」的概念，蝴蝶翅膀上的色彩經過工藝師的剪、黏、拼、湊，在觀者的腦中「融合」，增添色彩和對比色的豐富。
張開雙翅歡迎你
一般說到蝴蝶跟蛾的區分，很常聽到人說：那個停下來時翅膀合起來的，就是蝴蝶；停下時翅膀張開的就是蛾。
但是，你應該也聽過一句話叫：凡事總有例外。所以藍鵲跟大自然一樣，不喜歡跟你說“絕對”唷！
今天就要介紹幾種停下來是張開雙翅，彷彿在張開雙手歡迎你的蛺蝶科的蝴蝶給大家欣賞欣賞牠們的美麗~
習以為常的捷運車廂，居然出現一隻飛舞的蝴蝶？如果我沒抬頭看見牠，於我來說牠就相當於不曾存在過。在我們的生活中，是否也有許多共時性，就像這隻蝴蝶一樣？