Animate CC 遮色片場景與產品動畫效果

更新於 發佈於 閱讀時間約 3 分鐘
目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。
使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。
Step1.
範例檔元件庫中包含了所有將進行動畫的元件(直接由場景上轉換成元件而來)。
場景上也將每個元件分散至各個獨自圖層,另外為了方便練習,時間軸上預先繪製了需要的遮色片(舞台遮色片、背景漸層遮色片、相機遮色片、相機倒影遮色片,是依畫面內容繪製的填色物件,先暫時隱藏)。
暫時隱藏背景以外的圖層,新增背景遮色片圖層於背景圖層之上,繪製長條形色塊於版面中央,再至影格15處插入關鍵影格並直接變形色塊覆蓋住背景內容,回影格1設定長條色塊寬為1像素並置中於場景,建立影格1-10之間形狀補間動畫並設定起遮色片功能,二圖層於影格100處插入影格。
Step2.
顯示背景流線圖圖層並移動關鍵影格至影格15處並於影格100插入影格,新增流線遮色片圖層於上方,至影格15處插入影格,繪製長條形色塊於版面左側,再至影格40處插入關鍵影格並直接變形色塊覆蓋住流線內容,建立形狀補間動畫並設定起遮色片。
Step3.
顯示舞台與舞台遮色片圖層並移動關鍵影格至影格30處,並於影格100插入影格,再至影格50處插入關鍵影格並放大至足夠覆蓋整個舞台,建立形狀補間動畫並設定起遮色片。
顯示LOGO圖層並移動關鍵影格至影格60處,往後在影格65、70、75插入關鍵影格、至影格100插入影格,移動關鍵影格60上的LOGO至上方場景外並設定Alpha=0,向下略移動關鍵影格65上的LOGO、向上略移動關鍵影格70上的LOGO,建立傳統補間設定加/減速(依序為-100、100、-100)。
Step4.
顯示並點取上漸層遮色片,轉換為影片片段元件『左右移動漸層光』,由場景上直接按二下『左右移動漸層光』元件進入元件內,新增圖層於原圖層之下並置入漸層元件於左側場景外。
在影格15、30處插入關鍵影格,設定影格15上的漸層至場景右側,均建立傳統補間動畫與設定遮色片作用,再於影格60處插入影格。
顯示亮白內舞台與亮白外舞台圖層並移動關鍵影格至影格65處,並均設定元件Alpha=30,繼續為此二圖層於影格70、75、80、85、90處插入關鍵影格,於影格100插入影格;在亮白內舞台圖層上縮小影格65、75、85元件並設定Alpha=0,在亮白外舞台圖層上於影格65、75、85設定Alpha=0,均建立傳統補間並移動亮白外舞台圖層影格區段至影格75處。
Step5.
移動相機與二相機遮色片圖層關鍵影格至影格75處並顯示相機圖層,再新增相機倒影圖層複製貼上相機圖層的關鍵影格,移動相機倒影圖層至相機倒影遮色片之下,四圖層均於影格100處插入影格。
再於相機與相機倒影圖層影格100處插入關鍵影格,並暫時隱藏相機圖層,於相機倒影圖層的影格100處,向上移動相機元件至遮色片範圍之外,並建立傳統補間動畫,啟動相機倒影遮色片圖層的遮色片功能。
Step6.
顯示相機與相機遮色片圖層,於相機圖層的影格75處,向下移動相機元件至遮色片範圍之外,並建立傳統補間動畫,再設定相機遮色片圖層的遮色片功能,完成相機從舞台中移出動畫。
最後新增閃爍反光圖層於最上方並於影格100處插入關鍵影格,置入閃爍反光元件於閃光燈處並放大,所有圖層於影格240處插入影格,完成此範例。
為什麼會看到廣告
avatar-img
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,細膩表現車子產品動作動畫,包括反光光澤,完成亮眼產品介紹。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例練習檔元件庫中包含車子、車身、車底、遮色片、輪轉影片片段等元件。
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,表現金屬框與文字的光澤效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製,新增圖層,於圖層上原地貼上文字元件
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,細膩表現車子產品動作動畫,包括反光光澤,完成亮眼產品介紹。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例練習檔元件庫中包含車子、車身、車底、遮色片、輪轉影片片段等元件。
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,表現金屬框與文字的光澤效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製,新增圖層,於圖層上原地貼上文字元件
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
你可能也想看
Google News 追蹤
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
插畫和動畫之間有著密切的關係,但並不是說一定要先有插畫才有動畫。插畫通常是靜態的圖像,用來表達一個概念、故事或角色,而動畫則是將這些靜態圖像連續播放,創造出動態效果。 在很多情況下,動畫的製作確實會從插畫開始。插畫可以用來設計角色、場景和故事板,這些都是動畫製作的重要步驟。例如,漫畫或插畫書經
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
Ae 小技巧:Motion Tile 連續圖 / 背景 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
我們最早就是在做動畫,從一般廣告開始,慢慢去擴展不同的類型,比如說遊戲、角色動畫、電視與電影的特效……等等,但是越做越專業的情況下,我們就想再去做一些延伸,像是虛擬攝影棚跟虛擬製作,我們找到這些工作項目的共通元素去發展,甚至到後面我們還去做互動設計、沉浸式多媒體展覽與現在時下最熱門的AI生成技術。
Thumbnail
Ae 小技巧:Mask path 轉成形狀路徑 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:宣紙噪點+抽幀效果 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
  前面淺談完了角色,這邊就來說說「場景」,也可以說是「環境」。   下一篇則是場景與鏡頭的最後:「特寫」。因與場景息息相關,因此如此先後。   為避免與分鏡重疊,所以這邊不會說太多,只會分享下手方向而已:D   ※再次聲明:以下提及的「畫面」、「鏡頭」等,都是將文字想像成「眼睛可見的實際演繹
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這篇要運用自動遮罩、重繪、批次的技巧,幫同一個人物更換不同背景。 自動遮罩 自動遮罩採用Segment Anything這個節點組,載入圖片後可以依指定的提示詞自動產生遮罩圖像,這邊我要更換的是背景,所以先讓AI抓出人物後,再反轉遮罩範圍輸出,為了讓重繪圖像不要過於生硬,將遮罩進行了高斯模糊。
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
插畫和動畫之間有著密切的關係,但並不是說一定要先有插畫才有動畫。插畫通常是靜態的圖像,用來表達一個概念、故事或角色,而動畫則是將這些靜態圖像連續播放,創造出動態效果。 在很多情況下,動畫的製作確實會從插畫開始。插畫可以用來設計角色、場景和故事板,這些都是動畫製作的重要步驟。例如,漫畫或插畫書經
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
Ae 小技巧:Motion Tile 連續圖 / 背景 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
我們最早就是在做動畫,從一般廣告開始,慢慢去擴展不同的類型,比如說遊戲、角色動畫、電視與電影的特效……等等,但是越做越專業的情況下,我們就想再去做一些延伸,像是虛擬攝影棚跟虛擬製作,我們找到這些工作項目的共通元素去發展,甚至到後面我們還去做互動設計、沉浸式多媒體展覽與現在時下最熱門的AI生成技術。
Thumbnail
Ae 小技巧:Mask path 轉成形狀路徑 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:宣紙噪點+抽幀效果 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
  前面淺談完了角色,這邊就來說說「場景」,也可以說是「環境」。   下一篇則是場景與鏡頭的最後:「特寫」。因與場景息息相關,因此如此先後。   為避免與分鏡重疊,所以這邊不會說太多,只會分享下手方向而已:D   ※再次聲明:以下提及的「畫面」、「鏡頭」等,都是將文字想像成「眼睛可見的實際演繹
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這篇要運用自動遮罩、重繪、批次的技巧,幫同一個人物更換不同背景。 自動遮罩 自動遮罩採用Segment Anything這個節點組,載入圖片後可以依指定的提示詞自動產生遮罩圖像,這邊我要更換的是背景,所以先讓AI抓出人物後,再反轉遮罩範圍輸出,為了讓重繪圖像不要過於生硬,將遮罩進行了高斯模糊。