FLASH實(shí)例-美麗家園

美麗家園高等教育出版社本單元?jiǎng)赢?huà)效果目錄任務(wù)一、繪制一棵大樹(shù)任務(wù)二、小小院落任務(wù)三、爬動(dòng)的小瓢蟲(chóng)任務(wù)四、沿任意路徑運(yùn)動(dòng)的瓢蟲(chóng)動(dòng)畫(huà)效果動(dòng)畫(huà)效果動(dòng)畫(huà)效果動(dòng)畫(huà)效果[本任務(wù)目標(biāo)]:利用繪圖工具繪制大樹(shù)。學(xué)習(xí)圖形元件的創(chuàng)建方法。

[本任務(wù)重點(diǎn)]:掌握線條工具、顏料桶工具、填充變形工具、刷子工具等基本繪圖工具的使用，以及將舞臺(tái)上的圖形轉(zhuǎn)換為元件的方法。任務(wù)一、繪制一棵大樹(shù)

自己動(dòng)手：1．創(chuàng)建影片文檔新建Flash文檔，打開(kāi)“文檔屬性”對(duì)話框，設(shè)置寬為“650px”,高為“500px”，其它均為默認(rèn)值。

2．創(chuàng)建漸變背景層

（1）將當(dāng)前圖層改名為“背景”，按Shift+F9打開(kāi)混色器面板，設(shè)置漸變類(lèi)型為“線性”，溢出為“擴(kuò)展”。在色帶下單擊添加一個(gè)色標(biāo)。依次調(diào)整色標(biāo)顏色，分別為天藍(lán)色、白色、綠色。如圖2-2所示：（2）選擇工具箱的矩形工具，在舞臺(tái)繪制任意大小的矩形。然后打開(kāi)“屬性”面板，設(shè)該矩形寬為“650”、高為“500”，X和Y的坐標(biāo)均為“0”，這樣設(shè)置的目的是使該矩形正好充滿整個(gè)舞臺(tái)。如圖2-3所示。

（3）選擇工具箱的填充變形工具，在該矩形上單擊，周?chē)霈F(xiàn)可調(diào)節(jié)的控制手柄。拖動(dòng)旋轉(zhuǎn)手柄使該漸變順時(shí)針旋轉(zhuǎn)90度，形成藍(lán)天、白云、草地的效果。如圖2-4所示。然后鎖定該圖層，這樣可防止執(zhí)行其它操作時(shí)對(duì)它的誤操作。第二單元美麗家園圖2-2漸變背景設(shè)置圖2-4

圖2-3漸變背景（1）創(chuàng)建名為“樹(shù)”的新層。單擊工具箱的“線條工具”，打開(kāi)“屬性面板”，設(shè)置其筆觸顏色為綠色，筆觸高度為2，筆觸樣式為實(shí)線。如圖2-5所示。在舞臺(tái)上繪制一條直線，接著用“選擇工具”按住線條的中下部進(jìn)行拖動(dòng)，將它拉成曲線，如圖2-6所示。第二單元美麗家園3.繪制樹(shù)葉

圖2-5設(shè)置線條屬性

圖2-6用“選擇工具”創(chuàng)建曲線再用線條工具繪制另一條直線，這條直線要連接曲線的兩端點(diǎn)，如圖2-7（a）所示。用選擇工具將這條直線也拉成曲線，然后用選擇工具再對(duì)它的外形略微調(diào)整，一片樹(shù)葉的基本形狀就畫(huà)出來(lái)了，如圖2-7(b)所示。圖2-7(a) 圖2-7(b)（2）現(xiàn)在我們來(lái)繪制葉脈，先在兩端點(diǎn)間繪制直線，然后拉成曲線，再畫(huà)旁邊的細(xì)小葉脈，可以用直線，也可以將直線略彎曲，這樣，一片簡(jiǎn)單的樹(shù)葉就畫(huà)好了，如圖2-8所示。

圖2-8畫(huà)葉脈

圖2-9給樹(shù)葉填充顏色（3）接下來(lái)我們要給這片樹(shù)葉填上顏色。在工具箱的顏色選項(xiàng)欄設(shè)置填充色為淺綠色，然后單擊工具箱中的顏料桶工具，在畫(huà)好的葉子上單擊一下，效果如圖2-9所示。顏料桶工具默認(rèn)能在一個(gè)封閉的區(qū)域中填色。依次單擊為該樹(shù)葉填上顏色。至此，一片樹(shù)葉就繪制好了。(4)現(xiàn)在我們要把剛才畫(huà)好的這片樹(shù)葉轉(zhuǎn)換為元件備用。選擇該樹(shù)葉，單擊右鍵，在彈出的快捷菜單中選擇“轉(zhuǎn)換為元件”命令，彈出“轉(zhuǎn)換為元件”對(duì)話框。輸入元件名稱(chēng)為“樹(shù)葉”，選擇元件類(lèi)型為“圖形”，如圖2-11所示：圖2-11“轉(zhuǎn)換為元件”對(duì)話框執(zhí)行“窗口”→“庫(kù)”命令（快捷鍵是F11），打開(kāi)庫(kù)面板，庫(kù)面板用來(lái)存儲(chǔ)元件和我們導(dǎo)入的各種外部素材。你將發(fā)現(xiàn)庫(kù)面板中出現(xiàn)一個(gè)名稱(chēng)為“樹(shù)葉”的圖形元件，如圖2-12所示。圖2-12“庫(kù)”面板（5）用單片樹(shù)葉來(lái)武裝大樹(shù)，有些單調(diào)，所以我們?cè)趩纹瑯?shù)葉的基礎(chǔ)之上再做一個(gè)組合樹(shù)葉元件。從元件庫(kù)中再拖兩片“樹(shù)葉”到舞臺(tái)上，用任意變形工具將三片樹(shù)葉調(diào)整成如圖2-14所示的形狀。圖2-14組合樹(shù)葉形狀用我們上面剛剛學(xué)習(xí)的方法，將這三片樹(shù)葉全部選中，也轉(zhuǎn)換為圖形元件，元件名為“組合樹(shù)葉”。這樣就形成了元件的嵌套,也就是在“組合樹(shù)葉”元件內(nèi)嵌套了“樹(shù)葉”元件。4．繪制樹(shù)干和樹(shù)枝單擊刷子工具，在“顏色”欄內(nèi)設(shè)置填充色為褐色。在“選項(xiàng)”欄內(nèi)設(shè)置刷子形狀為橢圓形，刷子大小自定。刷子模式為標(biāo)準(zhǔn)繪畫(huà)。如圖2-15所示。移動(dòng)鼠標(biāo)到場(chǎng)景中，畫(huà)出樹(shù)干和樹(shù)枝的形狀，如圖2-16所示。刷子大小刷子形狀刷子模式

圖2-15刷子工具選項(xiàng)設(shè)置圖2-16繪制樹(shù)干和樹(shù)枝5．組合大樹(shù)（1）按F11打開(kāi)庫(kù)面板，你可以看到，庫(kù)面板中有兩個(gè)剛制作完的圖形元件，分別為“樹(shù)葉”和“組合樹(shù)葉”，單擊“樹(shù)葉”和“組合樹(shù)葉”圖形元件，分別將其拖放到舞臺(tái)的樹(shù)枝圖形上，用任意變形工具進(jìn)行調(diào)整。元件庫(kù)中的元件可以重復(fù)使用，只要改變它的大小和方向，就能制作出紛繁復(fù)雜的效果來(lái)，如圖2-18所示。按快捷鍵Ctrl+A將組合好的大樹(shù)全選，按F8將其轉(zhuǎn)換為圖形元件，名為“大樹(shù)”。圖2-18繪制好的大樹(shù)執(zhí)行Ctrl+Enter測(cè)試影片，可以在預(yù)覽窗口中看到一棵大樹(shù)。執(zhí)行“文件”→“保存”命令，將文件保存。6.測(cè)試存盤(pán)舉一反三1.嘗試?yán)L制各種花朵的形狀，并為其填充不同漸變顏色。2．仔細(xì)觀察你所喜歡的一種樹(shù)木，并在Flash中將它畫(huà)出來(lái)。3．繪制夜晚的星空。動(dòng)畫(huà)效果動(dòng)畫(huà)效果[本任務(wù)目標(biāo)]:靈活運(yùn)用繪圖工具的使用方法。[本任務(wù)重點(diǎn)]:靈活運(yùn)用繪圖工具欄的工具，繪制所需圖形。任務(wù)二、小小院落

自己動(dòng)手：1．創(chuàng)建房子層為了防止對(duì)其它圖層的誤操作，我們單擊時(shí)間軸上方的鎖定圖層按鈕，將剛才的所有圖層鎖定。然后單擊插入圖層按鈕，創(chuàng)建名為“房子”的新圖層。其時(shí)間軸如圖2-22所示：圖2-22創(chuàng)建名為“房子”的新圖層選擇矩形工具，在顏色選項(xiàng)欄內(nèi)設(shè)置筆觸顏色為黑色，填充色為無(wú)。在舞臺(tái)上繪制出兩個(gè)矩形，上面的矩形作房頂，下面的矩形作房身，如圖2-23所示。2．繪制房子基本輪廓圖2-23繪制兩個(gè)矩形用選擇工具雙擊上面矩形的任一條邊，將整個(gè)矩形全部選中，單擊任意變形工具，將鼠標(biāo)移動(dòng)到所選矩形的上邊線附近，當(dāng)鼠標(biāo)變成形狀，拖動(dòng)鼠標(biāo)，如圖2-24（a）。將矩形斜切成平行四邊形,如圖2-24（b）。

(a)(b)圖2-24用任意變形工具變形選擇線條工具，將兩圖形連接起來(lái)，如圖2-25所示。接著用線條工具繪制屋頂?shù)膫?cè)面。得到如圖2-26所示的房屋輪廓。

圖2-25用線條工具連接兩個(gè)矩形圖2-26繪制房屋輪廓3.畫(huà)門(mén)和窗戶畫(huà)出門(mén)的形狀。再來(lái)繪制窗戶。使用橢圓工具畫(huà)一個(gè)沒(méi)有填充色的橢圓，用選擇工具框選靠下的大半個(gè)橢圓，按鍵盤(pán)的Delete鍵，刪除所選部分，剩下上面的弧線。緊挨著弧線再畫(huà)一長(zhǎng)方形，如果不容易對(duì)準(zhǔn)，可以使用工具箱的縮放工具將畫(huà)面放大。畫(huà)好以后，雙擊縮放工具就可以恢復(fù)原狀了。增加直線，形成窗格。選中窗戶，在屬性面板中將顏色改為淺藍(lán)色，并增粗。如圖2-27所示。圖2-27畫(huà)門(mén)和窗4.填充顏色將畫(huà)好的房子填充上你喜歡的顏色，然后用選擇工具分別選中輪廓線，將它們一一刪除，得到如圖2-28所示形狀。

圖2-28為小屋填充顏色選擇工具箱的刷子工具，設(shè)置填充色為粉色，在選項(xiàng)欄單擊刷子模式按鈕，選擇繪畫(huà)模式為后面繪畫(huà)，如圖2-29所示。在窗戶內(nèi)畫(huà)出窗簾的形狀。如圖2-30。

5．畫(huà)窗簾圖2-29選擇后面繪畫(huà)模式圖2-30畫(huà)窗簾6．畫(huà)煙囪和碎石路結(jié)合矩形工具和橢圓工具，在房頂繪制煙囪和炊煙。然后在屋前用橢圓工具畫(huà)一些大小不一的小圓，作為門(mén)前的碎石路。用選擇工具框選房子層的所有圖形，執(zhí)行菜單“修改”→“組合”命令或按快捷鍵Ctrl+G，將其組合。如圖2-31所示。圖2-31組合后的小房子7.復(fù)制、排列大樹(shù)選擇場(chǎng)景1舞臺(tái)上的那棵大樹(shù)，按住alt鍵直接拖動(dòng)，可產(chǎn)生多個(gè)大樹(shù)的復(fù)本，按由遠(yuǎn)及近，由小到大的順序依次排列在舞臺(tái)的左側(cè)。如圖2-32所示。圖2-32復(fù)制、排列大樹(shù)8．進(jìn)一步美化修飾小院使用刷子工具再給小院加上一些小草和籬笆墻。至此我們的美麗家園的場(chǎng)景圖就大功告成。其效果如圖2-33所示。

圖2-33美麗家園9．保存文件執(zhí)行Ctrl+Enter，觀察動(dòng)畫(huà)效果，如果滿意，執(zhí)行“文件”→“保存”命令，將文件保存。舉一反三1．繪制簡(jiǎn)單藍(lán)天、湖面場(chǎng)景。如圖2-34所示。制作說(shuō)明：注意使用填充變形工具對(duì)湖面的漸變填充色和小山的漸變填充色進(jìn)行調(diào)整。圖2-34藍(lán)天、湖面效果圖2．嘗試?yán)L制小鴨形狀，如圖2-35所示。制作說(shuō)明：你也可以充分發(fā)揮想像力，根據(jù)自己的觀察來(lái)畫(huà)。然后將畫(huà)好的小鴨子轉(zhuǎn)換為圖形元件。圖2-35小鴨子任務(wù)三爬動(dòng)的小瓢蟲(chóng)[本任務(wù)目標(biāo)]:利用橢圓工具、填充變形工具以及部分選取工具來(lái)繪制一個(gè)小小的瓢蟲(chóng)。并讓它沿著樹(shù)干慢慢地向上爬。[本任務(wù)重點(diǎn)]:本任務(wù)的一個(gè)重要知識(shí)點(diǎn)是利用補(bǔ)間動(dòng)畫(huà)實(shí)現(xiàn)瓢蟲(chóng)爬動(dòng)的效果。

自己動(dòng)手：1．創(chuàng)建瓢蟲(chóng)圖形元件（1）執(zhí)行菜單“插入”→“新建元件”命令，或按快捷鍵Ctrl+F8彈出創(chuàng)建新元件對(duì)話框，輸入名稱(chēng)為“瓢蟲(chóng)”，類(lèi)型為“圖形”，如圖2-36所示。圖2-36創(chuàng)建新元件對(duì)話框（2）單擊確定，即進(jìn)入該元件的編輯狀態(tài)。選擇當(dāng)前圖層，將其改名為“背部”，使用工具箱的橢圓工具

，選擇筆觸顏色為無(wú)，填充色為紅到黑的放射狀漸變，繪制一個(gè)橢圓。如圖2-37所示。

圖2-37繪制橢圓（3）選擇工具箱的填充變形工具，在橢圓上單擊，可以看到在它周?chē)霈F(xiàn)多個(gè)控制手柄，用來(lái)調(diào)整漸變的位置、大小、方向和焦點(diǎn)等。首先向外拖動(dòng)右側(cè)第二個(gè)手柄，使它的漸變區(qū)域增大。再向下拖動(dòng)漸變中心點(diǎn)，使?jié)u變中心點(diǎn)向下移動(dòng)。如圖2-38所示。

圖2-38調(diào)整漸變填充第二單元美麗家園（4）創(chuàng)建名為“頭部”的新層，使用工具箱的橢圓工具，繪制一個(gè)筆觸顏色為無(wú)，填充色為黑色的小圓。單擊箭頭工具，選中該圓，按Ctrl+D鍵，直接復(fù)制該圓，然后把它往旁邊水平拖動(dòng)一段位置。如圖2-39所示。

圖2-39

圖2-40取消選擇，兩個(gè)圓成為一個(gè)對(duì)象。選擇部分選取工具，在該對(duì)象邊緣上單擊，將出現(xiàn)多個(gè)錨點(diǎn)。如圖2-40所示。第二單元美麗家園在本例中我們先將圖形下面中心位置的錨點(diǎn)直接向下拖動(dòng)，得到如圖2-41所示圖形。

圖2-41圖2-42單擊圖2-41中兩個(gè)圓圈所圈錨點(diǎn)，直接按鍵盤(pán)的Delete鍵，將這兩個(gè)錨點(diǎn)刪除，得到如圖2-42所示圖形。單擊圖2-42所示心形底部的錨點(diǎn)，出現(xiàn)控制手柄，按下Alt鍵，向左上方拖動(dòng)右側(cè)手柄，如圖2-43（a）。這樣做的目的是使右側(cè)輪廓線有個(gè)向里的弧度。得到2-43(b)所示形狀。同樣按下Alt鍵，向右上方拖動(dòng)左側(cè)手柄，使兩側(cè)形成同樣的弧度線。最終調(diào)整成如圖2-43（c）所示形狀。

圖2-43用部分選取工具調(diào)整圖形形狀（b）（a）（c）接著用任意變形工具將該圖壓扁，執(zhí)行Ctrl+D直接復(fù)制，將復(fù)制的圖形拖到一邊，執(zhí)行菜單“修改”→“變形”→“垂直翻轉(zhuǎn)”命令，將復(fù)制的圖形垂直翻轉(zhuǎn)180度。再用任意變形工具將它縮小一定比例，放在剛才的圖形之上。如圖2-44（a）所示。接著用選擇工具將兩側(cè)略微向里調(diào)整。這樣一個(gè)簡(jiǎn)單的瓢蟲(chóng)頭部就完成了。如圖2-44（b）。

圖2-44飄蟲(chóng)頭部(a)(b)（5）分別創(chuàng)建名為“眼睛”和“斑點(diǎn)”的新層，選擇工具箱的刷子工具，使用不同的刷子形狀和大小，畫(huà)上瓢蟲(chóng)的眼睛和斑點(diǎn)。其時(shí)間軸和舞臺(tái)效果如圖2-45所示：

圖2-45瓢蟲(chóng)的圖層結(jié)構(gòu)（6）創(chuàng)建名為“足部”的新層，單擊圖層名選中該層，將其拖動(dòng)到最底層。這樣做的目的是將瓢蟲(chóng)的足部放在最下面。使用刷子工具繪制如圖2-46（a）所示的形狀。將它再?gòu)?fù)制五個(gè)，使用任意變形工具改變其位置和大小，放到合適的位置。接著用刷子工具繪制兩個(gè)小小的觸角。至此，一個(gè)可愛(ài)的小瓢蟲(chóng)就畫(huà)好了。如圖2-46（b）。

2-46繪制飄蟲(chóng)的足部(a)(b)（2）新建名為“瓢蟲(chóng)”的圖層，按F11打開(kāi)元件庫(kù)，將元件庫(kù)里的瓢蟲(chóng)拖到大樹(shù)的根部，作為它爬動(dòng)的起始位置。用任意變形工具將它調(diào)整到合適大小。然后選擇時(shí)間軸的第126幀，按F6插入關(guān)鍵幀。選中第126幀上的瓢蟲(chóng)，將它拖到樹(shù)上，作為它爬動(dòng)的結(jié)束位置。選擇任意變形工具，再將它縮小一些。2．創(chuàng)建瓢蟲(chóng)爬動(dòng)的運(yùn)動(dòng)動(dòng)畫(huà)（1）單擊時(shí)間軸上方的“場(chǎng)景1”按鈕，切換回場(chǎng)景1?，F(xiàn)在我們來(lái)做瓢蟲(chóng)向樹(shù)上爬動(dòng)的效果。用我們前面所學(xué)的逐幀動(dòng)畫(huà)當(dāng)然也可以做成瓢蟲(chóng)向上爬動(dòng)的效果，但是制作過(guò)程過(guò)于繁瑣?，F(xiàn)在來(lái)學(xué)習(xí)一種更簡(jiǎn)單的方法，補(bǔ)間動(dòng)畫(huà)。（3）然后在第1幀和第126幀之間任意幀上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間動(dòng)畫(huà)”。即可產(chǎn)生瓢蟲(chóng)向上爬動(dòng)的效果，而且會(huì)越來(lái)越小。如圖2-47所示：圖2-47創(chuàng)建補(bǔ)間動(dòng)畫(huà)（4）創(chuàng)建補(bǔ)間動(dòng)畫(huà)還有另外一種方法，以上例創(chuàng)建1-126幀之間的補(bǔ)間動(dòng)畫(huà)為例。在第1幀和第126幀之間任意幀上單擊，然后打開(kāi)屬性面板，在屬性面板的補(bǔ)間選項(xiàng)中選擇“動(dòng)畫(huà)”項(xiàng)。如圖2-48所示。單擊下拉三角箭頭，在展開(kāi)的下拉選項(xiàng)中選擇補(bǔ)間動(dòng)畫(huà)圖2-48創(chuàng)建補(bǔ)間動(dòng)畫(huà)的另一種方法第二單元美麗家園3．瓢蟲(chóng)以加速度向樹(shù)上爬行瓢蟲(chóng)剛開(kāi)始向樹(shù)上爬時(shí)，速度比較慢，后來(lái)速度逐漸加快。若想實(shí)現(xiàn)此效果需要在補(bǔ)間動(dòng)畫(huà)的屬性面板中設(shè)置“緩動(dòng)”項(xiàng)。選擇1-126幀之間任意一幀，打開(kāi)屬性面板，在“緩動(dòng)”項(xiàng)后，直接拖動(dòng)滑桿，設(shè)置其值為-100。其屬性面板如圖2-49所示。負(fù)值表示為加速度，對(duì)象運(yùn)動(dòng)會(huì)越來(lái)越快。圖2-49補(bǔ)間動(dòng)畫(huà)屬性面板第二單元美麗家園4.保存文件執(zhí)行“文件”→“保存”命令，將文件保存。舉一反三1．結(jié)合本單元前兩個(gè)任務(wù)中舉一反三的例子，完成小鴨在水面游過(guò)的動(dòng)畫(huà)。2．利用補(bǔ)間動(dòng)畫(huà)制作皮球的下落、彈起過(guò)程。動(dòng)畫(huà)效果動(dòng)畫(huà)效果制作說(shuō)明：小球落下后的變形，也是利用補(bǔ)間動(dòng)畫(huà)來(lái)完成的。只需略微改變它的外形即可。任務(wù)四沿任意路徑運(yùn)動(dòng)的瓢蟲(chóng)[本任務(wù)重點(diǎn)]:創(chuàng)建引導(dǎo)層，使對(duì)象沿指定的路線運(yùn)動(dòng)。[本任務(wù)目標(biāo)]:讓瓢蟲(chóng)沿曲線向上運(yùn)動(dòng)。自己動(dòng)手：1．創(chuàng)建運(yùn)動(dòng)引導(dǎo)層選擇“瓢蟲(chóng)”層，單擊時(shí)間軸下方的添加運(yùn)動(dòng)引導(dǎo)層按鈕，或者右鍵單擊瓢蟲(chóng)層，在彈出的快捷菜單中選擇“添加引導(dǎo)層”?？梢钥吹皆谠搶由厦娑喑鲆粋€(gè)名為“引導(dǎo)層”的圖層