Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯課件

1、Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯第3章 Flash圖形繪制與編輯內(nèi)容概述內(nèi)容概述v本章詳細(xì)介紹了圖形的繪制與編輯,圖形的調(diào)整,對(duì)象的選擇與操作,顏色配置和圖象填充以及如何添加文本等內(nèi)容，通過(guò)這些內(nèi)容的學(xué)習(xí)，我們就可以在舞臺(tái)區(qū)域中按自己的想象自由創(chuàng)作各種基本圖形和文字對(duì)象，為后續(xù)章節(jié)的內(nèi)容學(xué)習(xí)奠定基礎(chǔ)。Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯教學(xué)目標(biāo)v1.熟練應(yīng)用圖形繪制工具來(lái)自由繪圖。v2.掌握各種圖形調(diào)整的方法。v3.熟練掌握各種對(duì)象的選擇操作。v4.熟練掌握對(duì)象的操作。v5.熟練應(yīng)用顏色配置和圖像填充。v6.掌握如何添加文本。Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪

2、制與編輯3.1 使用圖形繪制工具 繪圖工具集中放置在【繪圖工具欄】中，可分為圖形繪制工具，圖形編輯工具和文字編輯工具3類 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.1 使用圖形繪制工具v 3.1.1 線條工具v 3.1.2 鉛筆工具v 3.1.3 鋼筆工具v 3.1.4 刷子工具v 3.1.5 橡皮擦工具 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.1.1 線條工具斜線工具主要用于繪制線段。【線條工具的屬性】：線條的屬性主要有筆觸顏色，筆觸高度和筆觸樣式3種，可以在“屬性”面板中進(jìn)行設(shè)置 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.1.2 鉛筆工具 鉛筆工具在導(dǎo)引線中

3、使用最多。調(diào)整鉛筆工具同樣在舞臺(tái)區(qū)域下邊的“屬性”面板里進(jìn)行該工具的屬性調(diào)整。同我們上邊講到的線條工具一樣可以更換類型及顏色。當(dāng)鉛筆工具被選取時(shí)，其附屬選項(xiàng) 按鈕會(huì)出現(xiàn)在工具箱下部的“選項(xiàng)”欄中，也可以通過(guò)這個(gè)來(lái)更改鉛筆工具的設(shè)置。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.1.3 鋼筆工具 鋼筆工具可以繪制直線、曲線等而且能夠調(diào)整路徑上的節(jié)點(diǎn)。它可以自由地創(chuàng)建和編輯矢量圖形。單擊鼠標(biāo)左鍵確定點(diǎn)的位置，在舞臺(tái)區(qū)域中連續(xù)單擊，則各個(gè)單擊點(diǎn)就形成直線組成的折線圖。當(dāng)按左鍵不松手，就可以調(diào)整當(dāng)前線的造型，一般用于繪制曲線情況。在繪制一個(gè)圖形的前，可以先在“屬性” 面板里設(shè)置鋼筆屬性和填充屬

4、性，如圖所示。也可以在鋼筆工具的參數(shù)進(jìn)行設(shè)置，通過(guò)執(zhí)行“編輯”/“首選參數(shù)”，然后選擇“繪畫”， 即可對(duì)鋼筆工具進(jìn)行設(shè)置。 鋼筆工具（1） 鋼筆工具選項(xiàng)（2） Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.1.4 刷子工具 刷子工具用于繪制密閉的填充色構(gòu)成的圖形，該工具提供了5種模式 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.1.5 橡皮擦工具“橡皮擦”工具，用于擦除整個(gè)圖形或圖形中不需要的部分，它只能應(yīng)用于“打散”后的圖形。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.2 圖形調(diào)整v3.2.1 調(diào)整線段和圖形v3.2.2 線條的伸直和平滑v3.2.3 優(yōu)化曲線Flas

5、h基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.2.1 調(diào)整線段和圖形 調(diào)整線段用“箭頭”工具。當(dāng)箭頭工具靠近線段中間的時(shí)候，在箭頭下會(huì)出現(xiàn)一個(gè)弧形這時(shí)就可以改變線段的形狀，如圖（1）、（2）所示。當(dāng)箭頭工具靠近線段的一端時(shí)，就可以延長(zhǎng)線段。如圖（3）所示。 選取元件與改變線段的形狀及長(zhǎng)度拖動(dòng)節(jié)點(diǎn)就能對(duì)圖形進(jìn)行任意編輯，如圖所示。（1）（2）（3） Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.2.2 線條的伸直和平滑v使用“箭頭”工具的“伸直”修改器或執(zhí)行“修改”/“形狀”/“伸直”菜單命令，可對(duì)畫出的線條做小幅度的拉直處理。v平滑操作可減少曲線的節(jié)點(diǎn)和其他變化，使曲線平順，它還可以使曲線

6、所含段數(shù)減少，但對(duì)直線不起作用。這個(gè)操作在改變?cè)S多短線段組成的線條的外形時(shí)尤為重要。Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.2.3 優(yōu)化曲線v 優(yōu)化曲線的作用是減少定義對(duì)象的曲線數(shù)量來(lái)進(jìn)行曲線和填充輪廓，以達(dá)到減少Flash文件大小的目的。v v設(shè)置優(yōu)化曲線 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.3 對(duì)象選擇v3.3.1 選擇工具和部分選取工具v3.3.2 套索工具v3.3.3 選擇的修改Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.3.1 “箭頭”工具v 箭頭工具用來(lái)專門選取各個(gè)元件，在Flash里面“輪廓線”和里面的“填充色”是分開(kāi)的，所以想要選中的話就要先

7、對(duì)象，然后進(jìn)行移動(dòng)。v“部分選取”工具v 部分選取工具可以顯示圖形的所有頂點(diǎn)，拖動(dòng)節(jié)點(diǎn)就能對(duì)圖形進(jìn)行任意編輯。 箭頭工具框選 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.3.2 套索工具v 套索工具被選取時(shí)，其附屬選項(xiàng)按鈕會(huì)出現(xiàn)在選項(xiàng)條中（如圖所示）。套索工具可以用不規(guī)則的形狀任意圈選對(duì)象，它可以配合箭頭工具。如果按住 Shift 鍵不放，就能夠同時(shí)選擇多個(gè)對(duì)象。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.3.3 選擇的修改v使用選擇工具對(duì)矩形范圍內(nèi)的對(duì)象選擇。v【步驟1】單擊工具箱中的選擇工具。v【步驟2】將鼠標(biāo)移動(dòng)到要選擇的對(duì)象上單擊左鍵。v【步驟3】單擊工具箱中的選擇工

8、具。v【步驟4】在目標(biāo)對(duì)象的左上角按住鼠標(biāo)左鍵拖動(dòng)鼠標(biāo)到對(duì)象的右下角，將目標(biāo)對(duì)象的所有內(nèi)容框選在矩形中。這樣松開(kāi)鼠標(biāo)后，當(dāng)前圖層的矩形的對(duì)象就被選中了。Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.4 對(duì)象操作v3.4.1 組合對(duì)象v3.4.2 移動(dòng)、復(fù)制和刪除對(duì)象v3.4.3 疊放和對(duì)齊對(duì)象v3.4.4 變形對(duì)象v3.4.5 翻轉(zhuǎn)對(duì)象v3.4.6 復(fù)原變形對(duì)象v3.4.7 分離對(duì)象Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.4.1 組合對(duì)象v具體操作如下：v【步驟1】新建一個(gè)Flash文檔，選擇“文件”/“導(dǎo)入”/“導(dǎo)入到舞臺(tái)”命令，在打開(kāi)的【導(dǎo)入】對(duì)話框中選擇圖片所在位置，并

9、選中要導(dǎo)入的圖片，最后單擊 確定按鈕。v【步驟2】將所有圖片縮小到適當(dāng)大小，并放置到舞臺(tái)位置，選中要組合的多個(gè)對(duì)象，如選中右邊兩幅圖像。選擇“修改”/“組合”命令（或按【Ctrl+G】鍵）將對(duì)象組合成一個(gè)整體。v【步驟3】選中組合后的對(duì)象，選擇“編輯”/“編輯所選項(xiàng)目”命令或雙擊組合對(duì)象，將進(jìn)入該組的編輯狀態(tài)，可對(duì)該組合中的各個(gè)對(duì)象進(jìn)行編輯。Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.4.2 移動(dòng)、復(fù)制和刪除對(duì)象v利用選擇工具移動(dòng)對(duì)象的方法:v【步驟1】選擇要移動(dòng)的對(duì)象。v【步驟2】單擊工具箱中的選擇工具，將鼠標(biāo)移動(dòng)到要選擇的對(duì)象上，按住左鍵拖動(dòng)對(duì)象到目標(biāo)位置。v利用選擇工具復(fù)制對(duì)象的

10、方法:v【步驟1】選中目標(biāo)對(duì)象。v【步驟2】單擊工具箱中的選擇工具。v【步驟3】單擊鼠標(biāo)指向目標(biāo)對(duì)象，然后按住【Alt】鍵和鼠標(biāo)左鍵拖動(dòng)對(duì)象到目標(biāo)位置即可復(fù)制對(duì)象到目標(biāo)位置。v利用選擇工具刪除對(duì)象的方法:v【步驟1】選中目標(biāo)對(duì)象。v【步驟2】按下【Delete】將其刪除。v或者選擇“編輯”/“清除”菜單項(xiàng)將其刪除。v也可以選擇“編輯”/“剪切”菜單將其刪除。Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.4.3 疊放和對(duì)齊對(duì)象介紹一個(gè)疊放的例子步驟如下： 【步驟1】先用前面所學(xué)的圖形繪制工具繪制三個(gè)綠、紅、黃橢圓圖像。其疊放次序是先導(dǎo)入的在最下層。然后一次疊起。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)

11、例第3章圖形繪制與編輯【步驟2】若要修改其次序，先選中其中的一個(gè)對(duì)象，然后單擊“修改”/“排序”菜單彈出如下子菜單，在彈出的自菜單中選擇相應(yīng)的菜單即可， Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.4.4 變形對(duì)象v選中目標(biāo)對(duì)象單擊菜單欄中的“修改”/“變形”有任意變形、扭曲變形、封套、縮放、旋轉(zhuǎn)與傾斜、縮放和旋轉(zhuǎn)等變形。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.4.5 翻轉(zhuǎn)對(duì)象v 選中目標(biāo)對(duì)象，然后單擊菜單欄中的“修改”/“變形”有兩種翻轉(zhuǎn)方式：水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.4.6 復(fù)原變形對(duì)象v 選中目標(biāo)對(duì)象，單擊菜單欄的“修

12、改”/“變形”/“取消變形”。即可取消剛剛所作的變形操作。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.4.7 分離對(duì)象v 分離圖形是指將位圖、文字或群組后的圖形打散成一個(gè)個(gè)的像素點(diǎn)，以便對(duì)其中的一部分進(jìn)行編輯。用“選擇”工具框選位圖時(shí)，會(huì)發(fā)現(xiàn)不能選中其中的一部分，只能用鼠標(biāo)單擊選中整個(gè)位圖，位圖四周會(huì)出現(xiàn)灰色邊框，這時(shí)選擇“修改”/“分離”命令（或按【Ctrl+B】鍵）打散位圖，再用選擇工具框選位圖的一部分,會(huì)發(fā)現(xiàn)這部分出現(xiàn)許多像素點(diǎn)，這時(shí)就可以對(duì)這部分進(jìn)行編輯了。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.5 顏色設(shè)置和圖形填充v3.5.1 設(shè)置筆觸和填充屬性v3.5.2

13、 修改調(diào)色板v3.5.3 圖形填充Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯 3.5.1 設(shè)置筆觸和填充屬性 設(shè)置筆觸 設(shè)置填充顏色Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.5.2 修改調(diào)色板v 單擊菜單欄中的窗口顏色樣本打開(kāi)顏色樣本面板。v【步驟1】單擊顏色面板上的按鈕，從彈出的菜單中選擇添加顏色命令。v【步驟2】彈出“導(dǎo)入色樣”對(duì)話框，設(shè)置文件類型為“所有文件”選擇一個(gè)jpg圖像文件。v【步驟3】單擊“打開(kāi)”按鈕就可以將 .jpg格式文件的所有顏色,作為新的顏色導(dǎo)入flash調(diào)色板中。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.5.3 圖形填充v 在舞臺(tái)上繪制一個(gè)

14、橢圓，再單擊工具箱中的填充工具，選擇合適的顏色，然后在要填充的橢圓上單擊 繪制一個(gè)橢圓 填充橢圓Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.6 添加文本 3.6.1 創(chuàng)建靜態(tài)文本 3.6.2 設(shè)置文本屬性3.6.3 創(chuàng)建動(dòng)態(tài)文本 3.6.4 編輯文本 3.6.5 文本變形處理 3.6.6 創(chuàng)建字體元件 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.6 添加文本v3.6.1 創(chuàng)建靜態(tài)文本【步驟1】選擇工具欄中的文本工具 ，將鼠標(biāo)光標(biāo)移至舞臺(tái)中，鼠標(biāo)光標(biāo)變?yōu)?形狀，按住鼠標(biāo)左鍵拖動(dòng)將出現(xiàn)一個(gè)虛線框。v【步驟2】將虛線框拖至適當(dāng)大小后，釋放鼠標(biāo)左鍵將出現(xiàn)一個(gè)右上角有小方框的文本框。v【

15、步驟3】在文本框中輸入需要的文字，這里輸入“我的地盤聽(tīng)我的”。如果要換行直接按【Enter】鍵，如果不按【Enter】鍵，當(dāng)文字達(dá)到文本框右邊緣時(shí)會(huì)自動(dòng)換行。v【步驟4】輸入完成后，單擊文本框外的任意空白處即可，此時(shí)文本框?qū)⑾Аlash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.6.2 設(shè)置文本屬性Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.6.3 創(chuàng)建動(dòng)態(tài)文本v “動(dòng)態(tài)文本”的內(nèi)容可以在動(dòng)畫播放時(shí)由動(dòng)作腳本控制其顯示，“輸入文本”不但具有了“動(dòng)態(tài)文本”的功能，還可以在動(dòng)畫播放時(shí)手動(dòng)輸入其內(nèi)容。步驟如下：v【步驟1】單擊工具欄中的.v【步驟2】設(shè)置【屬性】面板中的【文本類型】設(shè)置為動(dòng)

16、態(tài)文本。v【步驟3】在舞臺(tái)中托出一個(gè)文本框。v【步驟4】單擊可選按鈕，在變量框中輸入變量名，這里輸入 “dhy”，v【步驟5】單擊時(shí)間軸第一幀。v【步驟6】單擊“窗口”/“開(kāi)發(fā)面板”/“動(dòng)作”菜單選項(xiàng)v【步驟7】單擊“全局函數(shù)”/“瀏覽器/網(wǎng)絡(luò)”菜單，在函數(shù)中雙擊【LoadVariablesNum】選項(xiàng)。v【步驟8】在命令行的括號(hào)中輸入【“F:/新建公文包/shl.txt”,0】, v【步驟9】單擊文件保存菜單，彈出另存為對(duì)話框。v【步驟10】單擊文件發(fā)布設(shè)置菜單，在彈出的發(fā)布設(shè)置對(duì)話框中進(jìn)行如圖3-6-11所示的設(shè)置。并發(fā)布到所保存的文件夾中。v【步驟11】在所保存的文件夾中新建一個(gè)文本文檔

17、并命名為“shl”。v【步驟12】雙擊“shl”文檔，在文本的編輯界面中輸入文本，如圖3-6-12所示。Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.6.4 編輯文本v 在Flash 8中，用戶可以直接使用剪切、復(fù)制和粘貼菜單來(lái)對(duì)文本進(jìn)行移動(dòng)、剪切和粘貼文本塊操作。Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.6.5 文本變形處理v【步驟1】文本變形處理的方法v【步驟2】單擊工具欄中的選擇工具。v【步驟3】右擊舞臺(tái)中的文本塊，在下拉菜單中選擇【任意變形】菜單 選項(xiàng)。v【步驟4】此時(shí)文本中心和邊角出現(xiàn)了控制點(diǎn)。v【步驟5】用鼠標(biāo)拖動(dòng)這些控制點(diǎn)即可對(duì)文本塊進(jìn)行變形。 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯3.6.6 創(chuàng)建字體元件v【步驟1】單擊“窗口”/“庫(kù)”出現(xiàn)庫(kù)面版 v【步驟2】單擊庫(kù)面版按鈕.v【步驟3】選擇新建字型菜單，即彈出字型元件屬性對(duì)話框。Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯v【步驟4】在庫(kù)面版中選擇已經(jīng)存在的字體元件 Flash基礎(chǔ)教程與創(chuàng)作實(shí)例第3章圖形繪制與編輯v【步驟5】單擊有上角的，在彈出的選擇【鏈接】菜單項(xiàng)彈出【鏈接屬性】對(duì)話框。如圖3-6-17所示。v【步驟6】在標(biāo)識(shí)符文本框中輸入一個(gè)字符串標(biāo)識(shí)字體元件。v【步驟7】在URL文本框中輸入含有該字體的