Animate CC 繪製線段與形狀

閱讀時間約 6 分鐘

1.繪製線段

若要一次繪製一條直線線段,請使用「線段」工具,接著請設定呈現線段顏色的筆畫顏色,在場景上直接按下滑鼠左鍵拖曳後放開,即可完成線段繪製。
★操作技巧:
(1)在拖曳繪製線段的同時(未放開滑鼠前),若按住【Shift】鍵,即可繪製出水平、垂直或45 度角的直線線段。
(2)使用選取工具選取所繪製的線段,可以由屬性控制版上設定線段屬性,包括筆畫顏色、筆畫尺寸、樣式、縮放、端點、接合等。
(a)筆畫顏色:同工具箱下方的筆畫顏色設定。
(b)筆畫(尺寸粗細):直接拖曳設定拉把或設定值。
(c)樣式:選擇線條樣式(預設為實線),並可按下右側『編輯筆畫樣式』按鈕,進行個別樣式設定。
按下『編輯筆畫樣式』按鈕,進行個別樣式設定,請切換選擇所要設定的類型與其設定值,按下確定完成設定。

2.繪製基本矩形

若要選取「基本矩形」工具,請在「矩形」工具上按住滑鼠鈕,然後從彈出式選單中選取「基本矩形」工具。可先設定筆畫顏色與填色,並請在「舞台」上拖曳「基本矩形」工具即可繪製。
★操作技巧:
(1)在拖曳繪製基本矩型的同時(未放開滑鼠前),若按住【Shift】鍵,即可繪製出正方形。
(2)筆畫顏色與填色顏色設定:設定填色且未設定筆畫顏色時,即繪製出矩型色塊,設定筆畫顏色且未設定填色時,即繪製出矩型框。填色與筆畫二者不可都未設定顏色,否則將無法建立矩型。
(3) 繪製圓角矩型:若要為基本矩型工具指定圓角大小,請在選擇使用矩型工具的同時(繪製矩型之前),由屬性控制版上的『矩型選項』內,輸入圓角半徑的數值(預設值為零為產生直角)後,再繪製矩型即為圓角矩型。
若要為每一個角指定不同的圓角半徑,請取消選取「屬性」檢測器之「矩形選項」區域中的「鎖定」圖示,您可以在每一個文字方塊中輸入一個內半徑數值。輸入負值會建立反轉的半徑。若要重設圓角半徑,請按一下「屬性」檢測器中的「重設」按鈕。基本矩型工具繪製後的內容,可直接選取並再次更改設定。

3.繪製基本橢圓

若要基本橢圓,請先使用「橢圓」工具,接著請設定呈現橢圓型顏色的『填色顏色』(或筆畫顏色),在場景上直接按下滑鼠左鍵拖曳後放開,即可完成橢圓型繪製。
★操作技巧:
(1)在使用基本橢圓工具,按住【Shift】鍵,即可繪製出正圓形。
(2)筆畫顏色與填色顏色設定:設定填色且未設定筆畫顏色時,即繪製出橢圓型色塊,設定筆畫顏色且未設定填色時,即繪製出橢圓型框。
(3)設定框線筆畫樣式:使用選取工具框選整個橢圓型框,即可由屬性控制版上設定顏色、筆畫尺寸、樣式。
(4)繪製角度橢圓:若要為基本橢圓工具指定角度橢圓,請在選擇使用橢圓或基本橢圓型工具的同時(繪製之前),由屬性控制版上的『橢圓型選項』內,輸入開始角度/結束角度的數值(預設值為零為產生完整橢圓, 右:0、下:90、左:180、上:270)後,再繪製橢圓型即為角度橢圓型,可以輕鬆地依設定繪製成圓形切片、半圓及其它創意形狀。基本橢圓工具繪製後的內容,可直接選取並再次更改設定。
(5) 繪製空心橢圓:若要為基本橢圓工具指定空心橢圓,請在選擇使用橢圓或基本橢圓型工具的同時(繪製之前),由屬性控制版上的『橢圓型選項』內設定『內半徑』(請先歸零開始/結束角度),您可以在方塊中輸入內半徑的數值,或者按一下滑動軸,然後以互動方式調整內半徑的大小,您可以輸入介於 0 和 99 之間的值,這些值代表所移除之填色的百分比, 設定完之後即可繪製空心橢圓。基本橢圓工具繪製後的內容,可直接選取並再次更改設定。

4.繪製一般矩形與一般橢圓

一般矩型工具與基本矩型工具,最大的不同在於基本矩型所繪製後的矩型,可以重複由屬性控制版上設定圓角尺寸,也可以直接使用選取工具在繪製的形狀物件上直接拖曳修改圓角尺寸。
以選取工具點取使用基本矩型工具繪製後的矩型,可以由屬性控制版上再次修改設定圓角尺寸,也可以直接在矩型物件上以選取工具拖曳編輯點,編輯修改圓角尺寸。
一般矩型工具繪製的圓角矩型則無法繪製後修改。
以選取工具點取使用基本矩型工具繪製後的矩型會出現編輯選取框,選取一般矩型工具則是出
選取網點。
一般橢圓工具與基本橢圓工具,最大的不同在於基本橢圓所繪製後的橢圓,可以重複由屬性控制版上設定,也可以直接使用選取工具在繪製的形狀物件上直接拖曳修改。
以選取工具點取使用基本橢圓工具繪製後的橢圓型,可以由屬性控制版上再次修改設定開始結束角度、內半徑,也可以直接在橢圓物件上以選取工具拖曳編輯點,編輯修改。一般橢圓工具繪製的橢圓型則無法繪製後修改。
以選取工具點取使用橢圓矩型工具繪製後的橢圓會出現編輯選取框,選取一般橢圓工具則是出現選取網點。

5.繪製多邊星形

多邊星形工具可以讓您建立基本的幾何多邊型與星形形狀,以及套用筆畫、填色和指定邊數與星形角數。請使用「多邊星型」工具,接著請設定呈現多邊型顏色的『填色顏色』(或筆畫顏色),在場景上直接按下滑鼠左鍵拖曳後放開,即可完成多邊型繪製。
★操作技巧:
(1)筆畫顏色與填色顏色設定:設定填色且未設定筆畫顏色時,即繪製出多邊型色塊,設定筆畫顏色且未設定填色時,即繪製出多邊型框。
(2)設定框線筆畫樣式:使用選取工具框選整個多邊型框,即可由屬性控制版上設定顏色、筆畫尺寸、樣式、端點與接合。
(3)設定多邊型邊數:在選取使用多邊星形工具時,在屬性控制版上的工具設定內按一下「選項」,在「邊數」選項中,輸入介於 3 和 32 之間的數值,即可繪製特地邊數的多邊型。
(4)繪製星形:在選取使用多邊星形工具時,在屬性控制版上的工具設定內按一下「選項」,在「樣式」選項中,選取「星形」、設定星形邊數,即可繪製特地邊數的星形型。在「星形控制點的大小」選項中,輸入介於 0 及 1 之間的數值(預設值為 0.5),指定星形控制點的深度。越接近 0 的數值,建立的控制點越深 (越像指針也越尖)。如果是要繪製多邊形,不用變更這項設定 (這項設定對多邊形形狀並無影響)。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161Content count
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。