使用 Animate 繪製及建立物件

  1. Adobe Animate 使用手冊
  2. Animate 簡介
    1. Animate 的新功能
    2. 視覺詞彙
    3. Animate 系統需求
    4. Animate 鍵盤快速鍵
    5. 在 Animate 中使用多個檔案類型
  3. 動畫
    1. Animate 中的動畫基本概念
    2. 如何在 Animate 中使用影格及關鍵影格
    3. Animate 中的逐格動畫
    4. 如何在 Animate 中使用傳統補間動畫
    5. 筆刷工具
    6. 移動導引線
    7. 移動補間動畫與 ActionScript 3.0
    8. 關於移動補間動畫
    9. 移動補間動畫
    10. 建立移動補間動畫
    11. 使用屬性關鍵影格
    12. 使用補間動畫將位置製成動畫
    13. 如何使用移動編輯器編輯移動補間動畫
    14. 編輯補間動畫的移動路徑
    15. 操作移動補間動畫
    16. 新增自訂加/減速
    17. 建立和套用移動預設效果
    18. 設定動畫補間動畫範圍
    19. 使用儲存為 XML 檔案的移動補間動畫
    20. 移動補間動畫與傳統補間動畫
    21. 形狀補間動畫
    22. 在 Animate 中使用骨塊工具動畫
    23. 在 Animate 進行角色製作
    24. 如何在 Adobe Animate 中使用遮色片圖層
    25. 如何在 Animate 中使用場景
  4. 互動
    1. 如何使用 Animate 建立按鈕
    2. 將 Animate 專案轉換成其他文件類型格式
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 在 Animate 中使用程式碼片段增加互動功能
    5. 建立自訂 HTML5 組件
    6. 在 HTML5 Canvas 中使用組件
    7. 建立自訂組件:範例
    8. 自訂組件的程式碼片段
    9. 最佳作法 - 使用 Animate 做廣告
    10. 虛擬實境編寫和發佈
  5. 工作區和工作流程
    1. 建立和管理繪圖筆刷
    2. 在 HTML5 Canvas 文件中使用 Google 字體
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作區
    6. 在 HTML5 Canvas 文件中使用網頁字體
    7. 時間軸與 ActionScript
    8. 使用多重時間軸
    9. 設定偏好設定
    10. 使用 Animate 編寫面板
    11. 使用 Animate 建立時間軸圖層
    12. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    13. 移動和複製物件
    14. 範本
    15. Animate 中的尋找和取代
    16. 還原、重做和操作記錄面板
    17. 鍵盤快速鍵
    18. 如何在 Animate 中使用時間軸
    19. 建立 HTML 擴充功能
    20. 影像和 GIF 動畫的最佳化選項
    21. 匯出影像和 GIF 的設定
    22. Animate 中的資源面板
  6. 多媒體和視訊
    1. 在 Animate 中變形及結合圖像物件
    2. 在 Animate 中建立並使用元件實體
    3. 影像描圖
    4. 如何在 Adobe Animate 中使用聲音
    5. 匯出 SVG 檔案
    6. 建立要在 Animate 中使用的視訊檔案
    7. 如何在 Animate 增加視訊
    8. 使用視訊提示點
    9. 使用 Animate 繪製及建立物件
    10. 調整線條和形狀
    11. 使用 Animate CC 中的筆畫、填色和漸層
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的色彩面板
    14. 使用 Animate 開啟 Flash CS6 檔案
    15. 在 Animate 中使用傳統文字
    16. 將圖案放入 Animate 中
    17. Animate 中匯入的點陣圖
    18. 3D 圖像
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 繪製線條和形狀
    21. 使用 Animate 中的元件庫
    22. 匯出聲音
    23. 在 Animate CC 中選取物件
    24. 在 Animate 中使用 Illustrator AI 檔案
    25. 使用噴刷工具套用圖樣
    26. 套用混合模式
    27. 排列物件
    28. 使用命令選單自動執行工作
    29. 多國語言文字
    30. 使用 Animate 中的攝影機
    31. 搭配使用 Animate 與 Adobe Scout
    32. 使用 Fireworks 檔案
    33. 圖像濾鏡
    34. 聲音和 ActionScript
    35. 繪圖偏好設定
    36. 使用鋼筆工具繪圖
  7. 平台
    1. 將 Animate 專案轉換成其他文件類型格式
    2. 自訂平台支援
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 建立並發佈 WebGL 文件
    5. 如何封裝 AIR for iOS 的應用程式
    6. 發佈 AIR for Android 應用程式
    7. Adobe AIR for Desktop 的發佈功能
    8. ActionScript 發佈設定
    9. 最佳作法 - 在應用程式中組織 ActionScript
    10. 如何搭配使用 ActionScript 與 Animate
    11. 最佳作法 - 輔助功能原則
    12. Animate 工作區中的輔助功能
    13. 撰寫和管理指令碼
    14. 啟用自訂平台的支援
    15. 自訂平台支援概觀
    16. 建立輔助功能內容
    17. 使用自訂平台支援外掛程式
    18. ActionScript 3.0 的除錯
    19. 啟用自訂平台的支援
  8. 匯出與發佈
    1. 如何從 Animate CC 匯出檔案
    2. OAM 發佈
    3. 匯出 SVG 檔案
    4. 使用 Animate 匯出圖像和視訊
    5. 發佈 AS3 文件
    6. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    7. 匯出聲音
    8. 匯出 QuickTime 視訊檔
    9. 使用 ActionScript 控制外部視訊播放
    10. 最佳作法 - 建立行動裝置內容的秘訣
    11. 最佳作法 - 視訊慣例
    12. 最佳作法 - SWF 應用程式編寫原則
    13. 最佳作法 - 建構 FLA 檔
    14. 最佳化 Animate 的 FLA 檔案的最佳作法
    15. ActionScript 發佈設定
    16. 指定 Animate 的發佈設定
    17. 匯出放映檔
    18. 匯出影像和 GIF 動畫
    19. HTML 發佈範本
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和發佈您的動畫

關於繪圖

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

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

向量和點陣圖像

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

向量圖像

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

向量圖中的線段.

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

點陣圖像

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

點陣圖中的像素.

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

路徑

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

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

路徑的元件

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

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

路徑上的點

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

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

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

註解:

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

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

方向線和方向點

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

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

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

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

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

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

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

繪圖模式和圖像物件

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

註解:

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

合併繪圖模式

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

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

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

進入合併繪圖模式

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

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

註解:

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

物件繪圖模式

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

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

註解:

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

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

進入物件繪圖模式

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

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

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

  3. 在舞台上繪圖。

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

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

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

註解:

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

基本物件

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

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

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

  2. 在舞台上繪圖。

重疊形狀

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

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

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

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

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

更多類似項目

Adobe 標誌

登入您的帳戶