關於繪圖

Adobe Animate CC 中的繪圖工具可讓您建立和修改文件中的圖案線條和形狀。您在 Animate 中建立的線條和形狀皆為小型向量圖像,可幫助降低 FLA 檔案大小。

開始使用 Animate 繪圖之前,您必須先了解 Animate 建立圖案的方式,以及繪圖、繪製和修改形狀會對同一個圖層上的其他形狀有什麼影響。

向量和點陣圖像

電腦顯示的圖像分成向量格式和點陣圖格式兩種。瞭解這兩種格式之間的差異,將有助於您提高工作效率。使用 Animate,您就可以建立壓縮的向量圖像,並將壓縮向量圖像製作成動畫。Animate 也可以匯入及處理以其他應用程式建立的向量和點陣圖像。

向量圖像

向量圖像使用同樣包含顏色及位置屬性的線段和曲線來描述影像,這些線段和曲線稱為「向量」。例如,葉片的影像是用線段通過的點描繪,建立出葉片的外框。葉片的顏色是以外框的顏色和外框所封閉的區域顏色所決定。

dr_02leafVectorComp
向量圖中的線段.

當編輯向量圖像時,其實就是修改用來描述向量圖像形狀的線段屬性和曲線屬性。移動向量圖像、調整其大小形狀並更改其顏色,而不更改向量圖像的外觀品質。向量圖像與解析度無關;也就是說,向量圖像在不同解析度的輸出裝置上顯示時,品質不會受到任何影響。

點陣圖像

點陣圖像使用排列在格線中,稱為「像素」的彩色點來描述影像。例如,葉片的影像是由格線內每個像素的特定位置和顏色值所描述,建立影像的原理和馬賽克非常類似。

dr_02leafBitComp
點陣圖中的像素.

編輯點陣圖像時,您修改的是像素內容,而不是線段和曲線。點陣圖像與解析度有關,因為描述影像的資料是被固定在特定大小的格線中。編輯點陣圖像可能會改變點陣圖像的外觀品質。調整點陣圖像的大小尤其可能造成影像的邊緣變成鋸齒狀,因為格線內的像素會重新分散。將點陣圖像顯示在解析度比點陣圖像本身來得低的輸出裝置上,也會降低外觀品質。

路徑

每次當您使用 Animate 來繪製線段或形狀時,會建立一個稱為「路徑」的線段。路徑是由一個或數個直線或曲線「線段」所構成。每個區段的起始和結束,是由「錨點」標示,而錨點的作用就像固定纜繩的繩拴。路徑可以是「封閉」的 (例如圓形),也可以是「開放」的,也就是有明確的「端點」(例如波浪線)。

您可以拖曳路徑的錨點 (出現在錨點之「方向線」結尾的「方向點」),或是路徑區段本身來更改路徑的形狀。

dr_06
路徑的元件

A. 選取的 (純色) 端點 B. 選取的錨點 C. 未選取的錨點 D. 曲線路徑區段 E. 方向點 F. 方向線. 

路徑可能具有兩種錨點:轉折點與平滑點。在「轉角控制點」上,路徑會突然地改變方向。在「平滑控制點」上,路徑區段會連接為一條連續曲線。您可使用轉角控制點和平滑控制點的任意組合,繪製一條路徑。若您繪製的點類型錯誤,隨時都可以更改。

dr_07
路徑上的點

A. 四個轉折點 B. 四個平滑點 C. 轉角控制點與平滑控制點之組合. 

一轉角控制點可連接任兩個直線或曲線區段,平滑控制點則永遠只能連接兩個曲線區段。

dr_08
一個轉角控制點可連接直線區段或曲線區段。

註解:

別把轉折、平滑點與直線、曲線線段混淆了。

路徑外框又稱為「筆畫」。套用至開放或封閉式路徑內部區域的顏色或漸層,則稱為「填色」。筆畫會有重量 (粗細)、顏色與虛線等圖樣。一旦您建立了路徑或形狀,就可以更改其筆畫與填色的特徵。

方向線和方向點

當您選取錨點以便連接曲線線段時 (或是選取線段本身),則連接的線段錨點會顯示「方向控制點」,其中包含「方向線」 (會於方向點上結束延伸)。方向控制把手的角度和長度,決定曲線區段的形狀和大小,移動方向點會改變曲線的形狀。方向線不會出現在最後的輸出結果中。

一個平滑點永遠會有兩個方向點,會像同一條直線般地同時移動。當您在平滑點上移動方向線時,平滑點兩端的曲線線段會同時進行調整,以維持該錨點上的連續曲線狀態。

相較之下,一個轉角控制點可以有兩個、一個或完全沒有方向控制把手,視其是否個別合併了兩個、一個或無任何曲線區段。轉折點的方向控制把手,會使用不同的角度來維持該轉角。當您移動轉折點上的方向線時,會在方向線進行調整時,調整位於轉折點同一側的曲線。

dr_10
選取一個錨點 (左) 後,方向線會出現在該錨點所連接之任一曲線線段上 (右)。

dr_11
在一個平滑點 (左) 和一個轉折點 (右) 上調整方向線。

方向線永遠都是在錨點上與曲線成正切 (與其半徑成直角)。每條方向線的角度決定了曲線的斜率,而其長度則是決定曲線的高度或深度。

dr_12
移動和調整方向線的尺寸會改變曲線的斜率。

繪圖模式和圖像物件

在 Animate 中,您可以使用不同的繪圖模式和繪圖工具,建立不同類型的圖像物件。其中每一項都有其優缺點。只要了解這些不同圖像物件類型的功能,您就可以正確判斷所要使用的物件類型。

註解:

在 Animate 中,圖像物件就是舞台上的項目。Animate 可以讓您對圖像物件進行移動、複製、刪除、變形、堆疊、對齊和組成群組等動作。Animate 中的「圖像物件」和「ActionScript 物件」不同,後者是 ActionScript® 程式語言的一部分。請不要將兩種不同用途的「物件」搞混了。如需程式設計語言相關物件的詳細資訊,請參閱學習 Adobe Animate 中的 ActionScript 2.0 中的「關於資料類型」,或「ActionScript 3.0 開發人員指南」中的資料類型

合併繪圖模式

預設繪圖模式會在您重疊所繪製的形狀時自動合併這些形狀。當您在同一個圖層中繪製彼此重疊的形狀時,最上層的形狀會截掉一部分底下所重疊的形狀。如果是這種情況,則繪製的形狀將依循破壞性繪圖模式。舉例來說,如果您繪製一個圓形,並且在它上面覆蓋一個較小的圓形,然後選取較小的圓形並且移動它,那麼第二個圓形覆蓋在第一個圓形上的部分就會被移除。

當形狀同時包含筆畫與填色時,就會被視為不同的圖像元素,讓使用者個別選取與移動。

dr_biteTakenOut
使用「合併繪圖」模式建立的形狀,會在重疊時合併成一體。選取形狀然後移動它,就會改變所覆蓋的形狀。

進入合併繪圖模式

  1. 選取「工具」面板中的「合併繪圖」選項。

  2. 從「工具」面板中選取一種繪圖工具,並在「舞台」上開始繪圖。

註解:

根據預設,Animate 會使用「合併繪圖」模式。

物件繪圖模式

建立一種稱為「繪圖物件」的形狀。繪圖物件是不同的圖像物件,重疊時不會自動合併。當您移開或重新安排這些重疊的形狀,並不會改變它們的外觀。Animate 會將每個形狀建立成可以個別處理的單獨物件。

當繪圖工具處於「物件繪圖」模式時,利用繪圖工具所建立的形狀就是獨立的形狀。形狀的筆畫與填色不是個別的元素,而且互相重疊的形狀也不會對彼此造成影響。當您選取使用「物件繪圖」模式所建立的形狀時,Animate 會使用矩形範圍框圍住這個形狀作為識別。

註解:

當您選取使用「物件繪圖」模式所建立的形狀時,請設定接觸感應的偏好設定。

dr_ObjectDrModel
使用「物件繪圖」模式所建立的形狀,會一直保持為可以個別處理的獨立物件。

進入物件繪圖模式

若要使用「物件繪圖」模式來繪製形狀,您必須明確將它啟用。

  1. 選取支援「物件繪圖」模式的繪圖工具 (「鉛筆」、「線條」、「鋼筆」、「筆刷」、「橢圓形」、「矩形」及「多邊形」工具)。

  2. 從「工具」面板的「選項」類別中選取「物件繪圖」按鈕 ,或按 J 鍵,在「合併繪圖」和「物件繪圖」模式間切換。「物件繪圖」按鈕會在「合併繪圖」與「物件繪圖」模式間切換。當您選取使用「物件繪圖」模式建立的形狀時,可以設定接觸感應的偏好設定。

  3. 在舞台上繪圖。

將合併繪圖模式所建立的形狀轉換成物件繪圖模式形狀

  1. 在「舞台」上選取某個形狀。

  2. 若要將形狀轉換成「物件繪圖」模式的形狀,請選取「修改 > 組合物件 > 聯集」。轉換之後,此形狀會被視為向量繪圖物件,與其他形狀互動時不會改變其外觀。

註解:

若要將兩個以上的形狀組合成單一的物件式形狀,請使用「聯集」命令。

基本物件

基本物件可讓您透過「屬性」檢測器來調整其特性。您可以在建立形狀之後,隨時以這個方式精確的控制形狀的大小、圓角半徑與其他屬性,省去重新繪製的麻煩。

所提供的基本形狀有兩種,分別是基本矩形與基本橢圓形。

  1. 從「工具」面板中選取「基本矩形工具」 或是「基本橢圓形工具」

  2. 在舞台上繪圖。

重疊形狀

在「合併繪圖」模式中,當您繪製穿過另一條線段或繪製形狀的線段時,重疊的線段會在交會點斷成數截。若要個別選取、移動及調整每一線段,請使用「選取」工具。

dr_03fill_segment
一塊填色; 填色被一條線段貫穿; 和截斷後產生的三截線段.

在形狀和線段上面繪圖時,上面的部分會取代下面的部分。相同顏色的繪圖會合併在一起,不同顏色的繪圖則仍會彼此分隔。若要建立遮色片、挖剪圖案和其他負片影像,請使用這些功能。以下面的挖剪圖案為例,其作法如下:先將未群組的風箏影像移到綠色形狀上、取消選取風箏,然後將風箏的填色部分從綠色的形狀上移開。

dr_03fill_cutout
使用風箏影像繪製挖剪圖案。

若要避免因為重疊而不慎造成形狀和線段改變,可以將形狀群組起來,或是使用圖層將形狀分開。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策