Animate CC 遮色片細膩繪圖動畫
更新於 發佈於 閱讀時間約 5 分鐘
目標動畫效果:應用影片片段元件與傳統補間動畫，以及應用逐格動畫的遮色片動畫技巧，細膩表現繪圖內容的動態呈現。
使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。
使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。
Step1.
範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件（直接由場景上轉換成元件而來），場景上也將每個元件分散至各個獨自圖層。首先進入到『花旋轉』元件內，點取花元件轉換為影片片段元件『花』，於影格15、30插入關鍵影格，建立傳統補間動畫，設定影格1-15間加減速：-100、順時針旋轉，影格15-30間加減速：100、逆時針旋轉。
範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件（直接由場景上轉換成元件而來），場景上也將每個元件分散至各個獨自圖層。首先進入到『花旋轉』元件內，點取花元件轉換為影片片段元件『花』，於影格15、30插入關鍵影格，建立傳統補間動畫，設定影格1-15間加減速：-100、順時針旋轉，影格15-30間加減速：100、逆時針旋轉。
Step2.
進入『枝葉』元件內，新增遮色片圖層，使用筆刷工具繪製覆蓋草的局部填色區域，依序往後遮色片圖層插入關鍵影格、原圖層插入影格，繼續銜接前面的繪製覆蓋草的局部填色，相同的方式依序插入關鍵影格繪製覆蓋草的局部填色至全部覆蓋草（共15個影格）。
進入『枝葉』元件內，新增遮色片圖層，使用筆刷工具繪製覆蓋草的局部填色區域，依序往後遮色片圖層插入關鍵影格、原圖層插入影格，繼續銜接前面的繪製覆蓋草的局部填色，相同的方式依序插入關鍵影格繪製覆蓋草的局部填色至全部覆蓋草（共15個影格）。
啟動遮色片圖層的遮色片功能，完成遮色片繪製的動畫效果。移動撥放磁頭至影格15，由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】，讓影片片段內動畫至此停止。
Step3.
進入『綠藤』元件內，新增遮色片1圖層、暫時隱藏藤2圖層，使用筆刷工具在遮色片圖層上繪製覆蓋草的局部填色區域，依序往後遮色片圖層插入關鍵影格、藤1圖層插入影格，繼續銜接前面的繪製覆蓋藤的局部填色，相同的方式依序插入關鍵影格繪製覆蓋草的局部填色至全部覆蓋藤（共15個影格）。
進入『綠藤』元件內，新增遮色片1圖層、暫時隱藏藤2圖層，使用筆刷工具在遮色片圖層上繪製覆蓋草的局部填色區域，依序往後遮色片圖層插入關鍵影格、藤1圖層插入影格，繼續銜接前面的繪製覆蓋藤的局部填色，相同的方式依序插入關鍵影格繪製覆蓋草的局部填色至全部覆蓋藤（共15個影格）。
顯示藤2圖層並移動關鍵影格至影格15處，新增遮色片2圖層、暫時隱藏藤1圖層，使用筆刷工具在遮色片2圖層上繪製覆蓋草的局部填色區域，依序往後遮色片2圖層插入關鍵影格、藤2圖層插入影格，繼續銜接前面的繪製覆蓋草的局部填色，相同的方式依序插入關鍵影格繪製覆蓋藤的局部填色至全部覆蓋藤（至影格35）。
顯示所有圖層並為藤1與遮色片1圖層補滿影格至影格35處，啟動遮色片圖層的遮色片功能，完成遮色片繪製的動畫效果。移動撥放磁頭至影格35，由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】，讓影片片段內動畫至此停止。
Step4.
進入『灰藤』元件內，同綠藤的製作方式，依序新增遮色片並在遮色片上繪製填色筆畫，依序插入關鍵影格繪製覆蓋藤的局部填色至全部覆蓋藤為止，注意三組遮色片圖層的影格安排，最後總長度為35。
進入『灰藤』元件內，同綠藤的製作方式，依序新增遮色片並在遮色片上繪製填色筆畫，依序插入關鍵影格繪製覆蓋藤的局部填色至全部覆蓋藤為止，注意三組遮色片圖層的影格安排，最後總長度為35。
顯示所有圖層並為藤與遮色片圖層補滿影格至影格35處，啟動遮色片圖層的遮色片功能，完成遮色片繪製的動畫效果。移動撥放磁頭至影格35，由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】，讓影片片段內動畫至此停止。
Step5.
進入『綠草』元件內，同灰藤的製作方式，依序新增遮色片並在遮色片上繪製填色筆畫，依序插入關鍵影格繪製覆蓋藤的局部填色至全部覆蓋藤為止，注意三組遮色片圖層的影格安排，最後總長度為35。
進入『綠草』元件內，同灰藤的製作方式，依序新增遮色片並在遮色片上繪製填色筆畫，依序插入關鍵影格繪製覆蓋藤的局部填色至全部覆蓋藤為止，注意三組遮色片圖層的影格安排，最後總長度為35。
顯示所有圖層並為藤與遮色片圖層補滿影格至影格35處，啟動遮色片圖層的遮色片功能，完成遮色片繪製的動畫效果。移動撥放磁頭至影格35，由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】，讓影片片段內動畫至此停止。
Step6.
進入『蝶字動畫』元件內，點取蝶字轉換為影片片段元件，新增遮色片圖層並繪製小圓形填色物件於蝶字右下角，使用自由變形工具更改蝶字變形中心至圓形中央；二圖層於影格30處插入關鍵影格，按住Alt+Shift放大圓形填色至可覆蓋蝶字的大小，回到影格1等比例縮小蝶字至圓形填色物件內，並設定蝶字顏色效果Alpha:0%。
進入『蝶字動畫』元件內，點取蝶字轉換為影片片段元件，新增遮色片圖層並繪製小圓形填色物件於蝶字右下角，使用自由變形工具更改蝶字變形中心至圓形中央；二圖層於影格30處插入關鍵影格，按住Alt+Shift放大圓形填色至可覆蓋蝶字的大小，回到影格1等比例縮小蝶字至圓形填色物件內，並設定蝶字顏色效果Alpha:0%。
複製遮色片圖層關鍵影格1，並至影格15貼上，遮色片圖層影格15-30建立『形狀補間動畫』、蝶字圖層建立『傳統補間動畫』，啟動遮色片圖層的遮色片功能；移動撥放磁頭至影格30，由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】，讓影片片段內動畫至此停止。
Step7.
進入『蝴蝶拍翅』元件內，點取蝴蝶轉換為影片片段元件，於影格2、3、4、5插入關鍵影格，略縮小影格2上蝴蝶元件的寬；再縮小影格3上蝴蝶元件的寬（比影格2的寬度窄）。複製影格2的關鍵影格至影格4上，完成此元件。
進入『蝴蝶拍翅』元件內，點取蝴蝶轉換為影片片段元件，於影格2、3、4、5插入關鍵影格，略縮小影格2上蝴蝶元件的寬；再縮小影格3上蝴蝶元件的寬（比影格2的寬度窄）。複製影格2的關鍵影格至影格4上，完成此元件。
Step8.
回到場景上，依序安排每個影片片段元件的該使時間，移動綠草關鍵影格至影格10、枝葉關鍵影格至影格35、蝶字關鍵影格至影格20、灰藤關鍵影格至影格50、綠藤關鍵影格至影格65，並為所有圖層與影格180處插入影格。
回到場景上，依序安排每個影片片段元件的該使時間，移動綠草關鍵影格至影格10、枝葉關鍵影格至影格35、蝶字關鍵影格至影格20、灰藤關鍵影格至影格50、綠藤關鍵影格至影格65，並為所有圖層與影格180處插入影格。
新增蝴蝶圖層於最上方，由元件庫拉入『蝴蝶拍翅』影片片段元件於右側場景外，縮小蝴蝶元件，於影格180處插入關鍵影格，移動蝴蝶元件至畫面左側位置，建立『傳統補間動畫』。
Step9.
在蝴蝶圖層上按下滑鼠右鍵，選擇執行『增加移動導引線』即新增導引線圖層，並使用鉛筆工具繪製要控制蝴蝶移動的導引線。讓關鍵影格上的蝴蝶編輯中心貼齊導引線，滑鼠點取蝴蝶移動補間動畫左側關鍵影格，由屬性控制版上勾取設定『沿向路徑』，調整蝴蝶移動補間動畫左側與右側關鍵影格上的蝴蝶方向，需符合導引線的方向，完成導引線動畫。
在蝴蝶圖層上按下滑鼠右鍵，選擇執行『增加移動導引線』即新增導引線圖層，並使用鉛筆工具繪製要控制蝴蝶移動的導引線。讓關鍵影格上的蝴蝶編輯中心貼齊導引線，滑鼠點取蝴蝶移動補間動畫左側關鍵影格，由屬性控制版上勾取設定『沿向路徑』，調整蝴蝶移動補間動畫左側與右側關鍵影格上的蝴蝶方向，需符合導引線的方向，完成導引線動畫。
相關課程 : 優勢多媒體 - 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棟展出。
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理，逐步解說了創建過程。通過這些建議，你將能夠創建一個既細緻又富有動畫效果的手繪風格場景，為你的動畫作品增添獨特的魅力和視覺吸引力。
Ae 小技巧：Motion Tile 連續圖 / 背景
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：CC Bend It 彎曲
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
這圖漂亮嗎? 製作過程剪剪貼貼, 詳細順序如何取得已經忘了!!
過程中曾用PowerPoint 中背景移除的功能
不過複製圖片時背景會是白色的....而其實我只是要那單獨的一團花
因為想把手中的那團花序貼到這片心葉上
後來用了Clip studio 取花後這才如願
如戰場一般剪片
老實說剪輯一部動畫其實很費時，需要繪畫很多圖、挑選音樂、理順情節、上效果和字母、出片。更不用說如果要放yt前做好SEO和文案，然後趕上片。
這次我為了參加比賽頂硬上，把以前寫好的歌曲和素材，但沒有腳本下，邊剪邊上邊補畫圖。最終還是趕上了…現在差寫報名表，接著明天就要面對現實去
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理，逐步解說了創建過程。通過這些建議，你將能夠創建一個既細緻又富有動畫效果的手繪風格場景，為你的動畫作品增添獨特的魅力和視覺吸引力。
Ae 小技巧：Motion Tile 連續圖 / 背景
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
Ae 小技巧：CC Bend It 彎曲
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
這圖漂亮嗎? 製作過程剪剪貼貼, 詳細順序如何取得已經忘了!!
過程中曾用PowerPoint 中背景移除的功能
不過複製圖片時背景會是白色的....而其實我只是要那單獨的一團花
因為想把手中的那團花序貼到這片心葉上
後來用了Clip studio 取花後這才如願
如戰場一般剪片
老實說剪輯一部動畫其實很費時，需要繪畫很多圖、挑選音樂、理順情節、上效果和字母、出片。更不用說如果要放yt前做好SEO和文案，然後趕上片。
這次我為了參加比賽頂硬上，把以前寫好的歌曲和素材，但沒有腳本下，邊剪邊上邊補畫圖。最終還是趕上了…現在差寫報名表，接著明天就要面對現實去