Animate CC 遮色片細膩繪圖動畫

更新於 發佈於 閱讀時間約 5 分鐘
目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。
使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。
Step1.
範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(直接由場景上轉換成元件而來),場景上也將每個元件分散至各個獨自圖層。首先進入到『花旋轉』元件內,點取花元件轉換為影片片段元件『花』,於影格15、30插入關鍵影格,建立傳統補間動畫,設定影格1-15間加減速:-100、順時針旋轉,影格15-30間加減速:100、逆時針旋轉。
Step2.
進入『枝葉』元件內,新增遮色片圖層,使用筆刷工具繪製覆蓋草的局部填色區域,依序往後遮色片圖層插入關鍵影格、原圖層插入影格,繼續銜接前面的繪製覆蓋草的局部填色,相同的方式依序插入關鍵影格繪製覆蓋草的局部填色至全部覆蓋草(共15個影格)。
啟動遮色片圖層的遮色片功能,完成遮色片繪製的動畫效果。移動撥放磁頭至影格15,由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】,讓影片片段內動畫至此停止。
Step3.
進入『綠藤』元件內,新增遮色片1圖層、暫時隱藏藤2圖層,使用筆刷工具在遮色片圖層上繪製覆蓋草的局部填色區域,依序往後遮色片圖層插入關鍵影格、藤1圖層插入影格,繼續銜接前面的繪製覆蓋藤的局部填色,相同的方式依序插入關鍵影格繪製覆蓋草的局部填色至全部覆蓋藤(共15個影格)。
顯示藤2圖層並移動關鍵影格至影格15處,新增遮色片2圖層、暫時隱藏藤1圖層,使用筆刷工具在遮色片2圖層上繪製覆蓋草的局部填色區域,依序往後遮色片2圖層插入關鍵影格、藤2圖層插入影格,繼續銜接前面的繪製覆蓋草的局部填色,相同的方式依序插入關鍵影格繪製覆蓋藤的局部填色至全部覆蓋藤(至影格35)。
顯示所有圖層並為藤1與遮色片1圖層補滿影格至影格35處,啟動遮色片圖層的遮色片功能,完成遮色片繪製的動畫效果。移動撥放磁頭至影格35,由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】,讓影片片段內動畫至此停止。
Step4.
進入『灰藤』元件內,同綠藤的製作方式,依序新增遮色片並在遮色片上繪製填色筆畫,依序插入關鍵影格繪製覆蓋藤的局部填色至全部覆蓋藤為止,注意三組遮色片圖層的影格安排,最後總長度為35。
顯示所有圖層並為藤與遮色片圖層補滿影格至影格35處,啟動遮色片圖層的遮色片功能,完成遮色片繪製的動畫效果。移動撥放磁頭至影格35,由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】,讓影片片段內動畫至此停止。
Step5.
進入『綠草』元件內,同灰藤的製作方式,依序新增遮色片並在遮色片上繪製填色筆畫,依序插入關鍵影格繪製覆蓋藤的局部填色至全部覆蓋藤為止,注意三組遮色片圖層的影格安排,最後總長度為35。
顯示所有圖層並為藤與遮色片圖層補滿影格至影格35處,啟動遮色片圖層的遮色片功能,完成遮色片繪製的動畫效果。移動撥放磁頭至影格35,由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】,讓影片片段內動畫至此停止。
Step6.
進入『蝶字動畫』元件內,點取蝶字轉換為影片片段元件,新增遮色片圖層並繪製小圓形填色物件於蝶字右下角,使用自由變形工具更改蝶字變形中心至圓形中央;二圖層於影格30處插入關鍵影格,按住Alt+Shift放大圓形填色至可覆蓋蝶字的大小,回到影格1等比例縮小蝶字至圓形填色物件內,並設定蝶字顏色效果Alpha:0%。
複製遮色片圖層關鍵影格1,並至影格15貼上,遮色片圖層影格15-30建立『形狀補間動畫』、蝶字圖層建立『傳統補間動畫』,啟動遮色片圖層的遮色片功能;移動撥放磁頭至影格30,由程式碼片段面板上(視窗>程式碼片段)按下HTML5 Canvas>時間軸瀏覽內【在此影格停止】,讓影片片段內動畫至此停止。
Step7.
進入『蝴蝶拍翅』元件內,點取蝴蝶轉換為影片片段元件,於影格2、3、4、5插入關鍵影格,略縮小影格2上蝴蝶元件的寬;再縮小影格3上蝴蝶元件的寬(比影格2的寬度窄)。複製影格2的關鍵影格至影格4上,完成此元件。
Step8.
回到場景上,依序安排每個影片片段元件的該使時間,移動綠草關鍵影格至影格10、枝葉關鍵影格至影格35、蝶字關鍵影格至影格20、灰藤關鍵影格至影格50、綠藤關鍵影格至影格65,並為所有圖層與影格180處插入影格。
新增蝴蝶圖層於最上方,由元件庫拉入『蝴蝶拍翅』影片片段元件於右側場景外,縮小蝴蝶元件,於影格180處插入關鍵影格,移動蝴蝶元件至畫面左側位置,建立『傳統補間動畫』。
Step9.
在蝴蝶圖層上按下滑鼠右鍵,選擇執行『增加移動導引線』即新增導引線圖層,並使用鉛筆工具繪製要控制蝴蝶移動的導引線。讓關鍵影格上的蝴蝶編輯中心貼齊導引線,滑鼠點取蝴蝶移動補間動畫左側關鍵影格,由屬性控制版上勾取設定『沿向路徑』,調整蝴蝶移動補間動畫左側與右側關鍵影格上的蝴蝶方向,需符合導引線的方向,完成導引線動畫。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
avatar-img
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,細膩表現車子產品動作動畫,包括反光光澤,完成亮眼產品介紹。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例練習檔元件庫中包含車子、車身、車底、遮色片、輪轉影片片段等元件。
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,表現金屬框與文字的光澤效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製,新增圖層,於圖層上原地貼上文字元件
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,細膩表現車子產品動作動畫,包括反光光澤,完成亮眼產品介紹。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例練習檔元件庫中包含車子、車身、車底、遮色片、輪轉影片片段等元件。
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,表現金屬框與文字的光澤效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製,新增圖層,於圖層上原地貼上文字元件
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
你可能也想看
Google News 追蹤
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
Ae 小技巧:Motion Tile 連續圖 / 背景 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這圖漂亮嗎? 製作過程剪剪貼貼, 詳細順序如何取得已經忘了!!    過程中曾用PowerPoint 中背景移除的功能 不過複製圖片時背景會是白色的....而其實我只是要那單獨的一團花 因為想把手中的那團花序貼到這片心葉上 後來用了Clip studio 取花後這才如願
Thumbnail
如戰場一般剪片 老實說剪輯一部動畫其實很費時,需要繪畫很多圖、挑選音樂、理順情節、上效果和字母、出片。更不用說如果要放yt前做好SEO和文案,然後趕上片。 這次我為了參加比賽頂硬上,把以前寫好的歌曲和素材,但沒有腳本下,邊剪邊上邊補畫圖。最終還是趕上了…現在差寫報名表,接著明天就要面對現實去
Thumbnail
本課程特別為影片剪輯初學者而製作,剪映是一套功能強大的影片剪輯軟體,它的超做簡單且融入很多AI功能喔 進入剪映電腦版之後,就會出現以下的畫面,這就是剪映的首頁,對新手來說,剪映最常用的有兩項功能 第一個是-直接建立一個新創作,只要滑鼠點按 開始創作 即可 第二個是-從草稿區直接點選一個你想編輯
Thumbnail
Ae 小技巧:宣紙噪點+抽幀效果 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Trim Paths 的應用 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這個影片是上一篇插畫的後半部,延續草圖的後續,進入到了對我而言的完稿階段。 通常這個階段也是比較瑣碎的,比較不會有突然大破大立的階段,相對來說也是比較花時間,卻可能從影片中看不出變化的階段,畫圖的時候總是苦惱快樂參雜在一起,選項一和選項二、三、四的選擇,從中選取適合的搭配。 最後呈現的有部分是進
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
Ae 小技巧:Motion Tile 連續圖 / 背景 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這圖漂亮嗎? 製作過程剪剪貼貼, 詳細順序如何取得已經忘了!!    過程中曾用PowerPoint 中背景移除的功能 不過複製圖片時背景會是白色的....而其實我只是要那單獨的一團花 因為想把手中的那團花序貼到這片心葉上 後來用了Clip studio 取花後這才如願
Thumbnail
如戰場一般剪片 老實說剪輯一部動畫其實很費時,需要繪畫很多圖、挑選音樂、理順情節、上效果和字母、出片。更不用說如果要放yt前做好SEO和文案,然後趕上片。 這次我為了參加比賽頂硬上,把以前寫好的歌曲和素材,但沒有腳本下,邊剪邊上邊補畫圖。最終還是趕上了…現在差寫報名表,接著明天就要面對現實去
Thumbnail
本課程特別為影片剪輯初學者而製作,剪映是一套功能強大的影片剪輯軟體,它的超做簡單且融入很多AI功能喔 進入剪映電腦版之後,就會出現以下的畫面,這就是剪映的首頁,對新手來說,剪映最常用的有兩項功能 第一個是-直接建立一個新創作,只要滑鼠點按 開始創作 即可 第二個是-從草稿區直接點選一個你想編輯
Thumbnail
Ae 小技巧:宣紙噪點+抽幀效果 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Trim Paths 的應用 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這個影片是上一篇插畫的後半部,延續草圖的後續,進入到了對我而言的完稿階段。 通常這個階段也是比較瑣碎的,比較不會有突然大破大立的階段,相對來說也是比較花時間,卻可能從影片中看不出變化的階段,畫圖的時候總是苦惱快樂參雜在一起,選項一和選項二、三、四的選擇,從中選取適合的搭配。 最後呈現的有部分是進