Flash02繪制矢量圖形.ppt

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