2.4 圖形的色彩

根據設計的要求，可以應用純色編輯面板、顏色面板、樣本面板來設置所需要的純色、漸變色、顏色樣本等。

命令介紹

顏色面板：可以設定純色、漸變色及顏色的不透明度。

純色面板：可以選擇系統設置的顏色，也可根據需要自行設定顏色。

2.4.1 課堂案例——繪制卡通按鈕

【案例學習目標】使用繪圖工具繪制圖形，使用浮動面板設置圖形的顏色。

【案例知識要點】使用“基本矩形”工具、“顏色”面板、“漸變變形”工具和“變形”面板，繪制按鈕效果；使用“矩形”工具、“橢圓”工具和“鋼筆”工具，繪制汽車圖形，最終效果如圖2-250所示。

【效果所在位置】Ch02/效果/繪制卡通按鈕.fla。

1．繪制金屬框

（1）選擇“文件 > 新建”命令，彈出“新建文檔”對話框，選擇“常規”選項卡中的“Action Script 3.0”選項，單擊“確定”按鈕，進入新建文檔舞臺窗口。

掃描觀看本案例視頻

（2）將“圖層1”重新命名為“金屬框”。選擇“窗口 > 顏色”命令，彈出“顏色”面板，單擊“填充顏色”按鈕，在“類型”選項的下拉列表中選擇“線性漸變”，在色帶上設置3個控制點，分別選中色帶上兩側的控制點，并將其設置為灰色（# D5D7DC）、淺灰色（#B2B6BB），選中色帶上中間的控制點，將其設置為淡黑色（#474E4F），生成漸變色，如圖2-251所示。

（3）選擇“基本矩形”工具，在基本矩形工具“屬性”面板中將“筆觸顏色”設置為無，其他選項的設置如圖2-252所示，按住Shift鍵的同時，在舞臺窗口中繪制一個正方形，效果如圖2-253所示。

（4）選擇“漸變變形”工具，在舞臺窗口中單擊漸變色，出現控制點和控制線，如圖 2-254所示。將光標放在外側圓形的控制點上，光標變為圖標，向左上方拖曳控制點，改變漸變色的角度，效果如圖2-255所示。

（5）選擇“選擇”工具，選中圖形，按Ctrl+C組合鍵，復制圖形，按Ctrl+Shift+V組合鍵，將圖形粘貼到當前位置。選擇“窗口 > 變形”命令，彈出“變形”面板，在“變形”面板中將“縮放寬度”選項設置為90%，“縮放高度”選項也隨之變為90%，如圖2-256所示，按Enter鍵確定操作，效果如圖2-257所示。

（6）選擇“漸變變形”工具，在舞臺窗口中單擊漸變色，出現控制點和控制線，如圖 2-258所示。將光標放在外側圓形的控制點上，光標變為圖標，向右上方拖曳控制點，改變漸變色的角度，效果如圖2-259所示。

（7）調出“顏色”面板，單擊“交換顏色”按鈕，將填充顏色和筆觸顏色相互切換，效果如圖2-260所示。單擊“填充顏色”按鈕，在“顏色類型”選項的下拉列表中選擇“徑向漸變”，在色帶上設置3個控制點，分別選中色帶上兩側的控制點，并將其設置為橘黃色（# F0B048）、淡黑色（# 360F08），選中色帶上中間的控制點，將其設置為紅色（# E42920），生成漸變色，如圖2-261所示，圖形被填充漸變色，效果如圖2-262所示。

2．繪制車頭和車輪

（1）單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“車架”。選擇“矩形”工具，在工具箱下方選擇“對象繪制”按鈕，將“筆觸顏色”設置為無，“填充顏色”設置為藍黑色（#00384A），在舞臺窗口中繪制一個矩形，效果如圖2-263所示。

掃描觀看本案例視頻

（2）單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“頭部”。選擇“鋼筆”工具，繪制一個閉合路徑，如圖2-264所示。

（3）選擇“顏料桶”工具，在工具箱中將“填充顏色”設置為淺藍色（#007C8E），在邊線內部單擊鼠標左鍵，填充圖形，如圖2-265所示。選擇“選擇”工具，在邊線上雙擊鼠標選中邊線，按Delete鍵，將其刪除，效果如圖2-266所示。

（4）單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“車窗”。選擇“鋼筆”工具，繪制一個閉合路徑，如圖2-267所示。

（5）選擇“顏料桶”工具，在工具箱中將“填充顏色”設置為淡綠色（#99D2C5），在邊線內部單擊鼠標左鍵，填充圖形，如圖2-268所示。選擇“選擇”工具，在邊線上雙擊鼠標選中邊線，按Delete鍵，將其刪除，效果如圖2-269所示。

（6）選擇“套索”工具，在工具箱下方選擇“多邊形模式”按鈕，在圖形上選取需要的區域，如圖2-270所示。按Ctrl+C組合鍵，將其復制，單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“高光”。

（7）按Ctrl+Shift+V組合鍵，將復制的圖形原位粘貼到“高光”圖層中，在形狀“屬性”面板中，將“填充顏色”設置為白色，“Alpha”設置為50%，效果如圖2-271所示。

（8）單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“車輪”。選擇“橢圓”工具，在工具箱下方選擇“對象繪制”按鈕，將“填充顏色”設置為藍黑色（#00384A），按住Shift鍵的同時，在舞臺窗口中繪制一個圓形，效果如圖2-272所示。

（9）選擇“選擇”工具，選中圖形，按Ctrl+C組合鍵，復制圖形，按Ctrl+Shift+V組合鍵，將圖形粘貼到當前位置。調出“變形”面板，將“縮放寬度”選項設置為50%，“縮放高度”選項也隨之變為50%，如圖2-273所示，按Enter鍵確定操作。在工具箱中將“填充顏色”設置為深藍色（#095D61），填充圖形，效果如圖2-274所示。

（10）選擇“選擇”工具，按住Shift鍵的同時，單擊第一個圓形，將其同時選中。按住Alt+Shift組合鍵的同時，水平向右拖曳圖形到適當的位置，復制圖形，效果如圖2-275所示。按Ctrl+Y組合鍵，按需要再復制一個圖形并調整其位置，效果如圖2-276所示。

3．繪制車廂

（1）單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“車廂”。選擇“矩形”工具，在矩形工具“屬性”面板中將“筆觸顏色”設置為無，“填充顏色”設置為橘黃色（#F18E27），其他選項的設置如圖2-277所示，在舞臺窗口中繪制一個矩形，效果如圖2-278所示。

（2）選擇“選擇”工具，選中圖形，按 Ctrl+C 組合鍵，復制圖形。單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“高光1”。按Ctrl+Shift+V組合鍵，將復制的圖形原位粘貼到“高光1”圖層中，按Ctrl+B組合鍵，將圖形打散，如圖2-279所示。

（3）按住Alt+Shift組合鍵的同時，垂直向下拖曳圖形到適當的位置，復制圖形。在形狀“屬性”面板中，將“填充顏色”設置為白色，填充圖形，效果如圖2-280所示。按Delete鍵，將其刪除。

（4）選擇“選擇”工具，選中需要的圖形，如圖2-281所示。在形狀“屬性”面板中，將“填充顏色”設置為淺黃色（#F6AE54），填充圖形，并調整其位置，效果如圖2-282所示。

（5）單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“車頂架”。選擇“矩形”工具，在工具箱中將“筆觸顏色”設置為無，“填充顏色”設置為淺黃色（#F6AE54），在舞臺窗口中繪制一個矩形，效果如圖2-283所示。

（6）選擇“矩形”工具，在舞臺窗口中再繪制一個矩形，效果如圖2-284所示。選擇“選擇”工具，按住Alt+Shift組合鍵的同時，水平向右拖曳圖形到適當的位置，復制圖形，效果如圖2-285所示。

（7）選擇“矩形”工具，在舞臺窗口中再繪制一個矩形，效果如圖2-286所示。選擇“選擇”工具，按住Alt+Shift組合鍵的同時，垂直向上拖曳圖形到適當的位置，復制圖形，效果如圖2-287所示。連續按Ctrl+Y組合鍵，按需要復制多個圖形，效果如圖2-288所示。

（8）單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“水滴”。選擇“鋼筆”工具，繪制一個閉合路徑，如圖2-289所示。

（9）選擇“顏料桶”工具，在工具箱中將“填充顏色”設置為藍黑色（#00384A），在邊線內部單擊鼠標左鍵，填充圖形，如圖2-290所示。選擇“選擇”工具，在邊線上雙擊鼠標選中邊線，按Delete鍵，將其刪除，效果如圖2-291所示。

（10）單擊“時間軸”面板下方的“新建圖層”按鈕，創建新圖層并將其命名為“貨物架”。選擇“矩形”工具，在工具箱中將“筆觸顏色”設置為無，“填充顏色”設置為藍黑色（#00384A），在舞臺窗口中繪制一個矩形，效果如圖 2-292 所示。卡通按鈕繪制完成，效果如圖 2-293 所示，按Ctrl+Enter組合鍵即可查看效果。

2.4.2 純色編輯面板

在工具箱的下方單擊“填充顏色”按鈕，彈出“純色”面板，如圖2-294所示。在該面板中可以選擇系統設置好的顏色，如果想自行設定顏色，單擊面板右上方的顏色選擇按鈕，彈出“顏色”面板，在面板右側的顏色選擇區中選擇要自定義的顏色，如圖2-295所示。滑動面板右側的滑動條來設定顏色的亮度，如圖2-296所示。

設定顏色后，可在“顏色|純色”選項框中預覽設定結果，如圖2-297所示。單擊面板右下方的“添加到自定義顏色”按鈕，將定義好的顏色添加到面板左下方的“自定義顏色”區域中，如圖2-298所示，單擊“確定”按鈕，自定義顏色完成。

2.4.3 顏色面板

選擇“窗口>顏色”命令，彈出“顏色”面板。

1．自定義純色

在“顏色”面板的“類型”選項中，選擇“純色”選項，面板效果如圖2-299所示。

“筆觸顏色”按鈕：可以設定矢量線條的顏色。

“填充顏色”按鈕：可以設定填充色的顏色。

“黑白”按鈕：單擊此按鈕，線條與填充色恢復為系統默認的狀態。

“沒有顏色”按鈕：用于取消矢量線條或填充色塊。當選擇“橢圓”工具或“矩形”工具時，此按鈕為可用狀態。

“交換顏色”按鈕：單擊此按鈕，可以將線條顏色和填充色相互切換。

“H”“S”“B”和“R”“G”“B”選項：可以用精確數值來設定顏色。

“A”選項：用于設定顏色的不透明度，數值選取范圍為0~100。

在面板左側中間的顏色選擇區域內，可以根據需要選擇相應的顏色。

2．自定義線性漸變色

在“顏色”面板的“顏色類型”選項中選擇“線性漸變”選項，面板如圖2-300所示。將光標放置在滑動色帶上，光標變為，如圖2-301所示，在色帶上單擊鼠標增加顏色控制點，并在面板下方為新增加的控制點設定顏色及明度，如圖2-302所示。當要刪除控制點時，只需將控制點向色帶下方拖曳。

3．自定義徑向漸變色

在“顏色”面板的“顏色類型”選項中選擇“徑向漸變”選項，面板效果如圖2-303所示。用與定義線性漸變色相同的方法在色帶上定義徑向漸變色，定義完成后，在面板的左下方顯示出定義的漸變色，如圖2-304所示。

4．自定義位圖填充

在“顏色”面板的“顏色類型”選項中，選擇“位圖填充”選項，如圖2-305所示。彈出“導入到庫”對話框，在該對話框中選擇要導入的圖片，如圖2-306所示。

單擊“打開”按鈕，圖片被導入“顏色”面板中。選擇“橢圓”工具，在場景中繪制出一個橢圓形，橢圓形被剛才導入的位圖所填充，如圖2-307所示。

選擇“漸變變形”工具，在填充位圖上單擊，出現控制點。向外拖曳左下方的方形控制點，如圖2-308所示。松開鼠標后效果如圖2-309所示。

向上拖曳右上方的圓形控制點，改變填充位圖的角度，如圖2-310所示。松開鼠標后的效果如圖2-311所示。

2.4.4 樣本面板

在樣本面板中可以選擇系統提供的純色或漸變色。選擇“窗口 > 樣本”命令，彈出“樣本”面板，如圖2-312所示。在控制面板中部的純色樣本區中，系統提供了216種純色。控制面板下方是漸變色樣本區。單擊控制面板右上方的按鈕，彈出下拉菜單，如圖2-313所示。

“直接復制樣本”命令：可以將選中的顏色直接復制出一個副本。

“刪除樣本”命令：可以將選中的顏色刪除。

“添加顏色”命令：可以將系統中保存的顏色文件添加到面板中。

“替換顏色”命令：可以將選中的顏色替換成系統中保存的顏色文件。

“加載默認顏色”命令：可以將面板中的顏色恢復到系統默認的顏色狀態中。

“保存顏色”命令：可以將編輯好的顏色保存到系統中，方便再次調用。

“保存為默認值”命令：可以將編輯好的顏色替換系統默認的顏色文件，在創建新文檔時自動替換。

“清除顏色”命令：可以清除當前面板中的所有顏色，只保留黑色與白色。

“Web216色”命令：可以調出系統自帶的符合Internet標準的色彩。

“按顏色排序”命令：可以將色標按色相進行排列。

“幫助”命令：選擇此命令，將彈出幫助文件。