第2章 矢量圖形,本章主要內容,在Flash動畫的制作過程中，會大量用到矢量圖形，而Flash自身的矢量繪圖功能很強大，故可以方便、快捷地繪制出各種各樣的圖形。,2.1 與圖形圖像相關的幾個基本概念,圖形和圖像是日常生活中經常說起的詞匯，但是要真正成為一名圖形圖像的設計師，還需要更深入地理解和掌握相關的一些知識。,2.1.1 圖形與圖像,圖像對應于英文中的“Image”，它類似于照片，它由許許多多排成行和列的點組成，當每個點都足夠小的時候，宏觀看起來，一幅圖像就非常清晰了。 而圖形對應于英文中的“Graphics”，它更類似于邏輯概念，比如一個三角形、一個圓形或者一條曲線，它們都被稱為“圖形”，而不是圖像。,為什么有時候可以混用這兩個詞呢？因為圖形存在于邏輯中，最終要能夠被人眼看到，它必須存在于某種顯示媒體上，比如通過計算機顯示器顯示，或者印刷在紙上，而一旦圖形被“顯示”在顯示器上，它就成為圖像了。 因此，讀者只要知道二者是不同的就可以了。,2.1.2 分辨率,這里說的分辨率是指一個圖像在水平和豎直方向分別包含的像素數。例如在購買數碼相機的時候，會關注一款相機的分辨率是300萬像素還是500萬像素，300萬像素指的是它拍攝出來的照片包含300萬個點，這里的300萬是個近似的數值，精確來說是水平方向有2 048個像素，豎直方向有1 536個像素，二者構成的矩形區域包含2 0481 536 = 3 145 728個像素，近似以后就是300萬像素了。,2.1.3 位圖圖像,位圖圖像由排列成網格的點組成，每個點稱為一個“像素”。 計算機的屏幕就是一個大的像素網格。 在一幅位圖中，圖像是由網格中每個像素的位置和顏色值決定的。 每個點被指定一種顏色，這些點像馬賽克中的貼磚那樣拼合在一起形成圖像。,位圖圖像的優點是可以保證圖像的細節，因此照片都是典型的位圖圖像。 位圖的一個特征是當它被放大以后，就會變模糊。,圖2.1 位圖圖像放大后變模糊,編輯位圖圖像時，修改的是像素，而不是線條和曲線。 位圖圖像與分辨率有關，這意味著描述圖像的數據被固定到一個特定大小的網格中。 正如前面說到的，放大位圖圖像將使這些像素在網格中重新進行分布，這通常會使圖像的邊緣呈鋸齒狀。 此外，在一個分辨率比圖像自身分辨率低的輸出設備上顯示位圖圖像也會降低圖像的品質。,2.1.4 矢量圖形,矢量圖形是使用稱為“矢量”的線條和曲線（包含顏色和位置信息）顯示圖形。它使用一系列曲線描述圓形輪廓，以及漢字的筆畫輪廓。圖形的顏色由它的輪廓顏色和該輪廓所包圍的區域顏色決定。,圖2.2 矢量圖形放大后仍保持清晰,編輯矢量圖形時，修改的是描述其形狀的線條和曲線的屬性。 矢量圖形與分辨率無關，這意味著除了可以在分辨率不同的輸出設備上顯示它以外，還可以對其執行移動、調整大小、更改形狀、更改顏色等操作，而不會改變其外觀品質。,矢量圖形的缺點是它無法表達細節，例如一幅照片上的各個點無法構成一個用數學方程可以描述的曲線。 矢量圖形與位圖圖像在實際應用中都是不可缺少的，所以在這里使用“將”和“帥”來比喻，表示它們并沒有優劣之分。,2.1.5 路徑、筆觸與填充,一個矢量圖形有3個要素：路徑、筆觸和填充。,圖2.3 矢量圖形的構成要素,“路徑”負責描述一個矢量圖的形狀和位置，而與顏色信息無關?？梢酝ㄟ^修改一個矢量圖的路徑來調整它的形狀和位置。 “筆觸”有時候也稱為“描邊”，它負責確定矢量圖的輪廓的顏色和樣式。 “填充”負責確定矢量圖形被路徑包圍著部分的顏色和樣式。,“筆觸”是用某種繪圖工具“繪制”出來的封閉或者不封閉的“線條”，而“填充”是在某個由“筆觸”包圍的區域中，進行“上色”操作的結果。,通常把繪圖操作完成后的結果稱為“筆觸”，包括直線和曲線；把完成填充后的結果稱為“填充區域”或“形”，即一個區域。 而線和形統稱為“圖形”。,2.2 “鉛筆”工具與“線條”工具,首先介紹兩種簡單工具的使用：“鉛筆”工具和“線條”工具。,圖2.6 選擇“鉛筆”工具,1“鉛筆”工具的使用和“筆觸顏色”的設置,圖2.7 設置筆觸顏色,2自定義筆觸顏色,圖2.10 自定義顏色按鈕,圖2.11 設置自定義顏色,圖2.12 “筆觸顏色”面板的功能,圖2.8 選擇繪圖模式,伸直：對徒手繪制的曲線進行伸直處理，將接近三角形、橢圓、圓形、矩形和正方形形狀的圖形轉換為這些規則的幾何形狀圖形。 平滑：可以將手繪出的曲線修改得比較平滑。 墨水：保持手繪時的曲線狀態，不做平滑處理。,圖2.13 以“伸直”、“平滑”和“墨水”模式繪制線條,4設置筆觸樣式,圖2.14 筆觸樣式列表,圖2.15 不同筆觸樣式繪制的曲線,圖2.16 自定義樣式,2.2.2 “線條”工具,“線條”工具與“鉛筆”工具相同的一點是，它們都是筆觸工具：不同之處在于“線條”工具用來繪制直線。 “線條”工具在工具欄中的位置如圖2.17所示。,圖2.17 選中“線條”工具,2.2.3 實踐與練習：繪制包裝盒（1）,圖2.19 包裝盒,2.3 “橢圓”工具與“矩形”工具,前面介紹的兩種工具有一個共性，就是繪制出來的都是筆觸，而沒有填充。 “橢圓”工具與“矩形”工具可以繪制橢圓和矩形等形狀，而且繪制出來的圖形既有筆觸，又有填充。,要繪制橢圓，應先在工具欄中選中“橢圓”工具，如圖2.38所示。 然后將鼠標指針移動到舞臺中，按下鼠標并進行拖動，即可繪制出橢圓形狀。,圖2.38 “橢圓”工具,2.3.1 “橢圓”工具,圖2.40 打開“填充色”面板,圖2.41 選擇填充色,在“填充色”面板的頂部有4個功能選項，從左往右依次是：顯示當前所選顏色的參數值、設置填充顏色的不透明度、將填充顏色設置為無、自定義填充顏色。,圖2.43 繪制漸變橢圓,圖2.44 放射狀漸變,圖2.45 彩色線性漸變,圖2.42 選擇漸變顏色,1設置漸變顏色,填充色面板最下面的一排漸變顏色，通過這些預置的漸變顏色，可以使繪制出來的橢圓呈線性漸變或者放射狀漸變等效果。,2設置橢圓的屬性,在工具欄中選中“橢圓”工具，然后在“屬性”面板中觀察“橢圓”工具的屬性選項，除增加“填充色”選項外，其他選項與“線條”工具的屬性一致，功能和用法都是相同的。,2.3.2 “矩形”工具,用“矩形”工具繪制圖形的方法與“橢圓”工具類似。要繪制矩形，首先要在工具欄中選擇“矩形”工具，然后在“顏色”區域中設置矩形的筆觸顏色和填充顏色，完成后即可在舞臺中繪制矩形。如果同時按住鍵盤上的“Shift”鍵，就能繪制出正方形。,圖2.47 選擇“矩形”工具,圖2.48 繪制正方形,1繪制圓角矩形,“邊角半徑”的大小決定了所要繪制圓角矩形的圓角的彎曲度，數值越大，圓角越大，數值越小，圓角越小。,圖2.50 “矩形設置”對話框,圖2.51 繪制圓角矩形,圖2.49 “邊角半徑設置”按鈕,圖2.53 未使用“筆觸提示”前,圖2.54 使用“筆觸提示”后,2筆觸提示,“筆觸提示”可在全像素下調整直線，防止出現模糊的垂直或水平線。,圖2.52 筆觸提示,2.3.3 多邊形和星形的繪制,要繪制多邊形，首先要選擇“多角星形”工具，該工具與“矩形”工具同在一個工具組中。將鼠標指針移動至“矩形”工具上，然后單擊該工具并持續兩秒鐘，會彈出一個工具組，在“矩形”工具下方就是“多角星形”工具。,圖2.55 選擇“多角星形”工具,圖2.59 多邊形和星形的效果,2.4 認識Flash的“繪制模式”,在進行深入講解之前，先來做一個試驗。,這樣有時會給設計帶來不便，因此Flash 8中提供了一個叫做“繪制模式”的選項，用來解決這個問題。,圖2.60 繪制矩形,圖2.61 移動橢圓,在工具欄中，選中“鉛筆”、“線條”、“橢圓”和“矩形”工具以后，在“選項”區域都會出現“繪制模式”圖標。,圖2.62 選擇“對象繪制”模式,在默認狀態下，這個選項處于抬起狀態，這時繪制的各個圖形對象會互相影響，自動合并，因此這種模式稱為“合并模式”；如果選中這個選項，就會進入“對象模式”，這時每次使用這些繪圖工具繪制的圖形都會成為一個獨立的對象，這樣對象之間就不會互相影響了。,圖2.63 對象不會互相影響,2.5 貼緊至對象,如何使直線的兩端正好在矩形的左右兩條邊上？可以使用Flash的“貼緊至對象”功能了。其作用是使正在繪制的圖形自動吸附到離它最近圖像邊緣。通過它可以對圖像做很好的閉合處理，保證閉合區域內顏色的正常填充。,如何使繪制的圖形更精確？,圖2.64 加入一條直線,圖2.65 打開“貼緊至對象”功能,圖2.66 使用“貼緊至對象”功能,圖2.67 應用“貼緊至對象”功能繪制的圖形,2.6 “刷子”工具,刷子是繪圖工具之一，它的繪制方式與“鉛筆”工具相似，也是在拖動鼠標時，沿鼠標指針經過的路徑產生形狀，而它與“鉛筆”工具不同的是，“刷子”工具產生的是填充，而不是筆觸。,使用“刷子”工具繪制形狀的操作方法是，首先在工具欄中選擇“刷子”工具，然后在“屬性”面板中選擇填充顏色，接著像使用“鉛筆”工具那樣在舞臺上拖動鼠標，就會產生圖形了。,圖2.69 “刷子”工具的工作效果,圖2.68選擇“刷子”工具,2.6.1 涂色模式,“涂色模式”的作用是確定使用“刷子”工具繪制的圖形與原有圖形的關系。 因此，它只有在“合并模式”下才能產生作用，也就是說，如果以“對象模式”繪制，這個選項就沒有作用。, “標準繪畫”：可對同一層的線條和填充涂色 “顏料填充”：只對填充區域和空白區域涂色，筆觸不受任何影響。 “后面繪畫”：對同一層的空白區域涂色，繪制出來的圖形始終位于已有圖形的下方，不影響當前圖形的線條和填充。,“顏料選擇”：只對選中區域內的圖形產生作用，不會影響選區之外的圖形。 “內部繪畫”：將繪制的區域限制在落筆時所在位置的填充區域中，但不對線條涂色。,2.6.2 鎖定填充,圖2.76 鎖定填充,圖2.77 相互獨立的顏色,圖2.78 鎖定填充的效果,默認情況下，如果舞臺上用”刷子“工具繪制兩個使用漸變顏色的圖形，那么二者的漸變顏色是相互獨立的。按下”鎖定填充“按鈕，進入鎖定填充模式，然后在此繪制兩個圖形，可以看到，漸變顏色好像擴展到整個舞臺，也就是兩個對象的漸變顏色是連續的。,2.6.3 其他選項,圖2.79 選擇刷子大小,圖2.80 選擇刷子形狀,2.7 導 入 插 圖,如果在Flash中，所有的圖形都需要親自繪制，那么制作效率和效果必定會受到很大的影響。 因此，Flash提供了導入插圖的功能，也就是可以把各種格式的文件作為素材，導入到文檔中，這樣就可以直接利用這些素材了。,這里說的插圖包含3種類型：矢量圖、位圖和位圖序列。 矢量圖：在專門的矢量圖繪制工具軟件（如Freehand、Illustrator）中繪制的矢量圖形，導入到Flash中時，仍然可以保留矢量特性。 位圖：這里說的位圖就是常見的JPG、BMP等格式的文件。 位圖序列：如果是文件名以數字結尾的一系列文件，可以自動導入到Flash中，并自動產生動畫效果。,2.7.1 把文件導入到Flash中,要將文件導入到Flash中，首先選擇菜單欄中的“文件導入導入到舞臺”命令，然后在“導入”對話框中，從“文件類型”下拉列表框中選擇一