Animate CC 遮色片光澤效果動畫

更新於 發佈於 閱讀時間約 2 分鐘
raw-image

檢視範例】【下載範例

目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,表現金屬框與文字的光澤效果。
使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。

Step1.
範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製,新增圖層,於圖層上原地貼上文字元件,整理為亮文字、暗文字。暫時隱藏亮文字,點取暗文字圖層上的文字物件,設定顏色效果『亮度:-30 %』。

raw-image

Step2.
顯示亮文字圖層、新增文字遮色片圖層於亮文字圖層上,在文字遮色片圖層上置入圓元件於文字左側,於影格30、60處插入關鍵影格,移動影格30上的圓元件至文字右側,建立傳統補間,其餘圖層於影格60處插入影格;啟動文字遮色片圖層的遮色片功能,完成暗文字上的光澤。

raw-image

Step3.
新增漸層光圖層於金屬框之上,置入漸層光元件於金屬框右側,於影格20、40、60插入關鍵影格,移動影格20上的漸層光元件至中央、移動影格40上的漸層光元件至金屬框左側,建立傳統補間動畫,設定影格1-20順時針旋轉、影格21-40間逆時針旋轉。

raw-image

Step4.
顯示框遮色片圖層,由於圖層上的一般矩型線框無法成為遮色片,請選取整個矩型線框,執行『修改 > 形狀 > 將線段轉換成填色』;啟動框遮色片圖層的遮色片功能,完成框上的光澤效果。

raw-image

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果

留言
avatar-img
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/12
動畫裡最常需要的自然現象即是下雨,為了讓雨滴更寫實,因此使用雨滴元件而非一般的線段,搭配水面水紋漣漪與倒影的波動,來讓整個下雨場景更逼真! 目標動畫效果:利用影片片段元件安排大量的雨滴落下,加上以圓圈製作的水紋漣漪,以及以形狀補間動畫內容的遮色片表現倒影波動,完成逼真的
Thumbnail
2020/02/12
動畫裡最常需要的自然現象即是下雨,為了讓雨滴更寫實,因此使用雨滴元件而非一般的線段,搭配水面水紋漣漪與倒影的波動,來讓整個下雨場景更逼真! 目標動畫效果:利用影片片段元件安排大量的雨滴落下,加上以圓圈製作的水紋漣漪,以及以形狀補間動畫內容的遮色片表現倒影波動,完成逼真的
Thumbnail
2020/02/07
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
2020/02/07
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
2020/02/07
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
Thumbnail
2020/02/07
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,表現金屬框與文字的光澤效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製,新增圖層,於圖層上原地貼上文字元件
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,表現金屬框與文字的光澤效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製,新增圖層,於圖層上原地貼上文字元件
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
Thumbnail
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
Thumbnail
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News