Animate CC繪製漸層球與光動畫素材

閱讀時間約 2 分鐘
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。
STEP1.
為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍,建立群組完成3D球。
STEP2.
選擇填色為黑白放射狀漸層,繪製正圓形(勿繪製橢圓)無邊框黑白漸層,點取要成為影子的圓至顏色控制版上設定左側顏色為黑色、右側顏色為黑色Alpha:0%。使用變形工具壓扁成扁圓影子狀,建立群組完成影子,移至漸層球下方並更改排列順序至最下方,完成球與影子。
STEP3.
執行『檢視 > 尺規』顯示尺規並建立二參考線做為圓形平台寬度參考,使用一般橢圓工具繪製一扁長型黑色無邊框橢圓(勿使用物件繪製模式與群組),並垂直向下複製出第二個橢圓,再於二橢圓間繪製同寬度的一般黑色無邊框長方形。向上移動下方橢圓型至與長方形銜接,注意左右下角接合,滑鼠按一下空白處完成二填色物件重疊接合。
STEP4.
點取下方接合後物件,選擇填色為黑白線性漸層,並至顏色控制版上新增第三個顏色點,設定顏色依序為灰白灰,建立群組完成圓形平台下半部。點取上方橢圓設定填色為黑白線性漸層。
STEP5.
使用漸層變形工具調整上方橢圓物件漸層為左上灰、右下淺灰的線性漸層,建立上方橢圓群組,向下移動組裝完成圓形平台。選取球與影子更改排列順序至最上方,並移動至平台上,將球與平台一起移動至場景右下角,再複製影子並放大後置於平台之下。
STEP6.
使用鋼筆工具設定邊框為紅色繪製做為聚光的三角形線框,再使用油漆桶工具設定填色為黑至白線性漸層,在線框中到入漸層,使用選取工具按二下全選三角形外框並刪除外框。
STEP7.
選取三角形黑白線性漸層物件,由顏色控制版上設定右側顏色點為白色、Alpha:0之透明,再使用漸層變形工具調整三角形內漸層成左上至右下透明,建立群組完成聚光。
STEP8.
選取聚光群組物件使用變形工具調整尺寸,並複製出另一個聚光於右側,以及再複製平台與陰影排列場景。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
avatar-img
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
使用鉛筆、鋼筆工具繪製線稿後,藉由完善的修整筆畫功能整理好所有需要的線稿,最後使用油漆桶、墨水瓶填色,搭配物件管理與編輯,完成漸層背景、石頭、水中魚與海草。 STEP1. 使用鋼筆工具與直接選取工具繪製調整出基本構成筆畫,使用『轉換錨點工具』轉換轉折角成平滑曲線,再使用鉛筆工具繪製其他黑線稿(選擇
在變形操作時若需要固定變形數值,就需要在變形浮動視窗上才能輸入固定變形數值,且可以搭配『重製選取範圍並變形』按鈕,進行多次的重複變形。 1.重複縮放 繪製矩形框(一般矩形工具繪製請群組),選取並至【變形】控制板上(視窗>變形)按下限制鎖定按鈕(等寬高),再輸入欲放大的寬度值,並直接按下變形控制版右下
無群組或是非基本矩形、非基本橢圓等繪圖物件,在物件重疊時隨即自動進行圖案間編輯處理,包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加 當繪製彼此重疊且無筆畫的填色相同形狀時,重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下 當您繪製彼此重疊無筆畫的不同填色形狀時,最上層的形狀會截掉一
選取工具最主要是提供選取物件的方式,包括『選取工具』、『選取細部工具』、『套索工具』,均主要針對尚未群組或非基本工具所繪製圖案進行細部編輯,並有完整的局部編輯功能。若是基本矩形、基本橢圓、群組物件則均需打散才可進行局部編輯。 1. 選取工具-選取填色 (1)使用選取工具直接點取填色內容即可選取到填色
1.繪製線段 若要一次繪製一條直線線段,請使用「線段」工具,接著請設定呈現線段顏色的筆畫顏色,在場景上直接按下滑鼠左鍵拖曳後放開,即可完成線段繪製。 ★操作技巧: (1)在拖曳繪製線段的同時(未放開滑鼠前),若按住【Shift】鍵,即可繪製出水平、垂直或45 度角的直線線段。 (2)使用選取工具選
使用鉛筆、鋼筆工具繪製線稿後,藉由完善的修整筆畫功能整理好所有需要的線稿,最後使用油漆桶、墨水瓶填色,搭配物件管理與編輯,完成漸層背景、石頭、水中魚與海草。 STEP1. 使用鋼筆工具與直接選取工具繪製調整出基本構成筆畫,使用『轉換錨點工具』轉換轉折角成平滑曲線,再使用鉛筆工具繪製其他黑線稿(選擇
在變形操作時若需要固定變形數值,就需要在變形浮動視窗上才能輸入固定變形數值,且可以搭配『重製選取範圍並變形』按鈕,進行多次的重複變形。 1.重複縮放 繪製矩形框(一般矩形工具繪製請群組),選取並至【變形】控制板上(視窗>變形)按下限制鎖定按鈕(等寬高),再輸入欲放大的寬度值,並直接按下變形控制版右下
無群組或是非基本矩形、非基本橢圓等繪圖物件,在物件重疊時隨即自動進行圖案間編輯處理,包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加 當繪製彼此重疊且無筆畫的填色相同形狀時,重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下 當您繪製彼此重疊無筆畫的不同填色形狀時,最上層的形狀會截掉一
選取工具最主要是提供選取物件的方式,包括『選取工具』、『選取細部工具』、『套索工具』,均主要針對尚未群組或非基本工具所繪製圖案進行細部編輯,並有完整的局部編輯功能。若是基本矩形、基本橢圓、群組物件則均需打散才可進行局部編輯。 1. 選取工具-選取填色 (1)使用選取工具直接點取填色內容即可選取到填色
1.繪製線段 若要一次繪製一條直線線段,請使用「線段」工具,接著請設定呈現線段顏色的筆畫顏色,在場景上直接按下滑鼠左鍵拖曳後放開,即可完成線段繪製。 ★操作技巧: (1)在拖曳繪製線段的同時(未放開滑鼠前),若按住【Shift】鍵,即可繪製出水平、垂直或45 度角的直線線段。 (2)使用選取工具選
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。