實(shí)例說明

　　開始的背景是一幅沒有著色的圖畫，可以使用右下角的顏色選擇器選擇合適的顏色對圖畫進(jìn)行填充。

　　有關(guān)知識

　　telltarget命令，movie clip和隱形按鈕的靈活應(yīng)用。

　　制作過程

　　步驟1：在Flash 5中新建文件， 按組合鍵Ctrl+M打開電影屬性對話框，設(shè)置影幀速度12fps， 場景大?。?00px*300px，背景顏色為白色(color=#ffffff)，如圖1所示：

圖1設(shè)置電影屬性

　　步驟2：在場景中用鉛筆工具（Pencil Tool），鋼筆工具(Pen Tool)和線段工具(Line Tool)畫一幅圖畫，或者用freehand，illustrator或coreldraw等工具做好后用AI文件格式導(dǎo)入Flash中使用，具體的繪畫過程就不再詳細(xì)說明，圖2是已做好的風(fēng)景畫。

圖2繪制圖畫
　　步驟3：此圖是由太陽、花、天空、遠(yuǎn)處的山、近處的山和樹組成。而樹又由樹冠和樹干組成。所以我們分別將其轉(zhuǎn)換為電影片段mv-sun， mv-flower， mv-sky， mv-after， mv-front， mv-treetop和 mv-tree。按下Ctrl+Alt+M，即可打開電影向?qū)В∕ovie Explorer）分類進(jìn)行查看，如圖3所示。

圖3分類查看組件
　　提示：因?yàn)橐粋€(gè)Flash作品完成以后，可能會(huì)有很多物件，F(xiàn)lash提供一個(gè)分類查看功能，可以按照不同的分類進(jìn)行查看。當(dāng)然，如果已經(jīng)養(yǎng)成了在物件名稱前加一個(gè)屬性說明也是一個(gè)好習(xí)慣。如將電影片段存為mv-*形式，將按鈕存為bu-*形式等。

　　步驟4：現(xiàn)在來編輯mv-sun，在庫中雙擊電電影段mv-sun，進(jìn)入編輯環(huán)境，按F6建立7個(gè)關(guān)鍵影幀，增加一個(gè)action層，將每幀的action設(shè)置為stop。 在第一個(gè)關(guān)鍵影幀，用墨水瓶工具 將color設(shè)為黑色(#000000)，在Stroke面板將線條寬度選為hairline。填充物件邊緣。如圖4所示。

圖4設(shè)置”墨水瓶”屬性

使用油漆桶工具 。將color設(shè)為白色(#ffffff)，對物件進(jìn)行填充。第一個(gè)關(guān)鍵幀就做好了，如圖5所示。

圖5已完成的第1幀太陽

　　按上述的方法，用不同的顏色分別對其余6個(gè)關(guān)鍵影幀進(jìn)行填充。另外，我們不希望在圖畫中出現(xiàn)邊框，所以要注意每個(gè)物件邊緣顏色和物件整體顏色一致。

　　步驟5：將剩余的六個(gè)電電影段mv-flower， mv-sky， mv-after， mv-front， mv-treetop和 mv-tree按步驟4的方法增加6個(gè)關(guān)鍵幀并編輯，過程就不再講述。

　　步驟6：回到場景1，在Instance面板中，將7個(gè)電影片段分別命名為sun， flower， sky， after， front， treetop， tree。如圖6所示。

圖6在場景1中命名電電影段

　　步驟7：為了方便管理，可建立sun、flower、sky&after、front、treen層中，然后將7個(gè)電影片段按類別移動(dòng)到相應(yīng)的層中，如圖7所示。

圖7在不同層中的電影片段

　　提示：要將一層中的元素移動(dòng)到另一層，可先Cut該元素，再選中另一層，執(zhí)行Edit>Pashe in Place），就可將元素粘帖到同一位置。

　　步驟8：制作7個(gè)隱形按鈕，分別命名為：bu-sun、bu-flower、bu-sky、bu-after、bu-front、 bu-treetop和bu-tree。，觸發(fā)范圍和電影片段mv-sun， mv-flower， mv-sky， mv-after， mv-front， mv-treetop， mv-tree的大小范圍一致。如圖8所示。

圖8將電影片段bu-flower拖入制作隱形按鈕

　　步驟9：在場景1中新建bu-sun， bu- flower&treetop，bu-tree， bu-sky&after，bu-front層，將7個(gè)隱形按鈕分別放置在對應(yīng)的層中，位置和對應(yīng)的電影片段重合。這樣才可以在按下按鈕后觸發(fā)電影片段動(dòng)作。如圖9所示。

圖9對齊按鈕和電影片段

　　步驟10：新建按鈕bu-reset，這個(gè)按鈕的主要用途就是起到復(fù)位的作用。如圖10所示。

圖10制作按鈕
　　步驟11：新建6個(gè)按鈕color1， color2， ……， color6。 大小為20px*20px即可。顏色分別和步驟4制作的電影片段2-7關(guān)鍵影幀的顏色一致，按鈕的作用是起到顏色選擇器的目的。如圖11所示。

圖11顏色按鈕

　　步驟12：現(xiàn)在，我們再來做一個(gè)顏色井，要求是：當(dāng)初始狀態(tài)時(shí)，顏色井是白色，當(dāng)選取了相應(yīng)的填充色時(shí)，顏色井會(huì)變成和所選顏色一致，這樣我們就知道選取了什么顏色了。

　　新建電影片段mv-color，使用矩形工具畫制20px*20px的正方形。建立7個(gè)關(guān)鍵影幀，Action設(shè)置為stop。 使用油漆桶工具填充顏色，第一個(gè)關(guān)鍵影幀填充為白色或透明。2-7個(gè)關(guān)鍵影幀與步驟4制作的電影片段2-7關(guān)鍵影幀的顏色一致。如圖12所示。

圖12設(shè)置關(guān)鍵影幀

　　步驟13：回到場景1，新建color層，放在場景最下層，將電影片段mv-color放入此層，在Instance面板中把它命名為color。將按鈕mv-reset和color1~color6放入圖層，在場景中將它們擺放整齊。如圖13所示：

圖13擺放物件

　　步驟14：在場景中，將所有影幀長度都延長至60幀。新建層Action， 分別將幀1，10，20，30，40，50，60選中后按F6，將它們設(shè)為關(guān)鍵幀，每個(gè)關(guān)鍵幀的Actions設(shè)置為stop。幀標(biāo)簽(Frame Label)分別為：a，b，c，d，e，f，g。

　　分別將bu-sun， bu- flower&treetop，bu-tree， bu-sky&after，bu-front層的1，10，20，30，40，50，60幀設(shè)置為關(guān)鍵幀。如圖14所示。

圖14設(shè)置Actions、標(biāo)簽及關(guān)鍵幀

　　步驟15：在關(guān)鍵影幀b處，設(shè)置

　　按鈕bu-sun的Actions：

on (release) { tellTarget ("/sun") { gotoAndStop (2); } }

鼠標(biāo)放開{ 告知目標(biāo)(“/sun”){ 跳至并停止(2); } }

　　按鈕bu-flower的Actions：

on (release) { tellTarget ("/flower") { gotoAndStop (2); } }

鼠標(biāo)放開{ 告知目標(biāo)(“/flower”){ 跳至并停止(2); } }

　　用同樣方法設(shè)置按鈕bu-sky， bu-after， bu-front， bu-treetop和bu-tree的Actions。

　　步驟16：在關(guān)鍵幀c， d， e ， f， g處分別設(shè)定按鈕bu-sun， bu-flower， bu-sky， bu-after， bu-front， bu-treetop， bu-tree的Actions?？刂齐娪捌畏謩e跳向第3、4、5、6、7幀。

　　步驟17：設(shè)置選擇顏色按鈕的行為

　　按鈕color1的Actions：

on (release) { tellTarget ("/color") { gotoAndStop (2); } gotoAndStop ("b"); }

鼠標(biāo)放開{ 告知目標(biāo)(“/color”){ 跳至并停止(2); } 跳至并停止(“b”); }

　　按鈕color2的Actions：

on (release) { tellTarget ("/color") { gotoAndStop (3); } gotoAndStop ("c"); }

鼠標(biāo)放開{ 告知目標(biāo)(“/color”){ 跳至并停止(3); } 跳至并停止(“c”); }

　　同樣，設(shè)置按鈕color3—color6的Actions。

　　提示：電影開始停止在第一影幀，當(dāng)鼠標(biāo)按下顏色選擇器：color1~color6時(shí)，顏色井跳至并停止至相應(yīng)的幀，指示當(dāng)前選擇的顏色。同時(shí)電影也跳至并停止至相應(yīng)的關(guān)鍵幀。這時(shí)按下圖畫中的隱形按鈕，按鈕下的電影片段就跳至并停止在相應(yīng)的影幀，通過這樣一連串的動(dòng)作，就產(chǎn)生了用鼠標(biāo)選擇顏色并填色的效果。

　　步驟18：最后，來設(shè)置一下reset按鈕的Actions：

on (release) { tellTarget ("/flower") { gotoAndStop (1); } tellTarget ("/treetop") { gotoAndStop (1); } tellTarget ("/tree") { gotoAndStop (1); } tellTarget ("/front") { gotoAndStop (1); } tellTarget ("/sun") { gotoAndStop (1); } tellTarget ("/sky") { gotoAndStop (1); } tellTarget ("/after") { gotoAndStop (1); } tellTarget ("/color") { gotoAndStop (1); } gotoAndStop ("a"); }

鼠標(biāo)放開{ 告知目標(biāo)(“/flower”){ 跳至并停止(1); } 告知目標(biāo)(“/treetop”){ 跳至并停止(1); } 告知目標(biāo)(“/tree”){ 跳至并停止(1); } 告知目標(biāo)(“/front”){ 跳至并停止(1); } 告知目標(biāo)(“/sun”){ 跳至并停止(1); } 告知目標(biāo)(“/sky”){ 跳至并停止(1); } 告知目標(biāo)(“/after”){ 跳至并停止(1); } 告知目標(biāo)(“/color”){ 跳至并停止(1); } 跳至并停止(“a”); }

　　這樣當(dāng)按下按鈕reset后，所有的物件都回到電影初始狀態(tài)。

　　到這里，填色游戲的整個(gè)制作過程就講完了，按Ctrl+Enter就可在生成的文件中測試填色效果。