打火機的flash教案

1、flash mx 2004打造逼真打火機生活中打火機是到處可見的，可是，在flash動畫中怎么實現(xiàn)逼真打火機的效果呢？不要著急，學習本例后，大家就知道如何制作一個效果逼真的仿真打火機了。在該效果地制作中用到了很多實用的技巧與方法，如幀的跳轉(zhuǎn)技巧，火焰、火花的制作方法；效果中還用到了一些常用的控制語句，以及如何利用對象的方法來控制影片的運動。先看看效果：源文件下載設計步驟：打開flash mx。按快捷鍵ctrl+j，然后把場景設置成450px280px，背景為黑色，12fps。一、設計元件1 制作機身快捷鍵ctrl+f8新建一個名為“image”的graphic符號。然后在“image”的場景里

2、畫出一個打火機，或按快捷鍵ctrl+r，導入一個打火機的素材，見圖1。2 制作火焰快捷鍵ctrl+f8新建一個名為“”的movie clip符號。在制作之前我們先看一下火焰（fire）影片剪輯里層的結(jié)構(gòu)，圖2。圖2 fire的層結(jié)構(gòu)圖根據(jù)圖2，我們要新建兩個層，接著分別把它們命名為：“光圈”層，“外焰”層和“內(nèi)焰”層。然后在每層的前面空出4幀來，作用是讓它在火花閃后出現(xiàn)，以求效果真實。選中第1幀，按快捷鍵f9打開actions面板，然后寫下影片剪輯停止播放的命令：stop();。第16幀的代碼是：gotoandplay(5);設計內(nèi)焰。內(nèi)焰其實就是一片藍色做大袖化的shape運動。首先，按快捷

3、鍵shift+f9打開color mixer面板，并進行如圖3的設置。圖3 color mixer面板的設置圖3中顯示的是右邊滑塊的設置，左面滑塊為黑色，alpha值為0%。點選“內(nèi)焰”層的第5幀，按f7鍵插入一個空白幀，然后畫上一個形狀如左下圖的內(nèi)焰，大小為8 px x 13.5 px，x軸的值為0；y軸的值為-7。然后用油漆桶工具澆灌顏色，并用顏色轉(zhuǎn)變按鈕點選火苗后調(diào)節(jié)顏色，最終效果如右下圖（此為400%的圖片）。圖4 藍色火苗設計接下來，分別選中第9、13、16執(zhí)f6插入關鍵幀，再點選第5、9、13幀，然后在properties面板里的tween下拉菜單中選擇shape命令。接著按快捷鍵

4、ctrl+i打開info面板，把第9幀火苗的大小設置為8.5 px x 25 px，x軸的值不變；y軸的值為-10.5 px，把第13幀火苗的大小設置為8.5 px x 15 px，x軸的仍為0 px；y軸的值為-9 px。設計外焰。打開color mixer面板進行如圖5的設置，設計出的外焰效果見圖6（此為200%的圖片）。圖5 color mixer面板的設置 圖6 外焰的最終效果外焰的設計方法同內(nèi)焰。這里要講一下的是滑塊的設置，第1個滑塊：白色，0%，第2個滑塊：白色，30%，第3個滑塊：黃色（#ffff99），100%，第4個滑塊：見圖5，第5個滑塊：白色，80%。這樣設計是為了讓外焰

5、更有層次感，效果更加的逼真。外焰大小、位置的設置同內(nèi)焰。只是info面板里的設置有所不同。第5幀和第16幀的大小一樣，為9 px x 45 px，x軸的值為0 px；y軸的值為-20 px。把第9幀外焰的大小設置為9 px x 55 px，x軸的值不變，仍為0 px；y軸的值為-20 px，把第13幀外焰的大小設置為8 px x 40 px，x軸的值不變；y軸的值為-20 px。設計光圈。打開color mixer面板進行如圖7的設置，然后用畫圓工具畫出一個橢圓來，使其正好覆蓋外焰，見圖8。圖7 color mixer面板的設置 圖8 光圈的相對位置光圈在第5幀和第16幀里的大小一樣，為60

6、px x 90 px，x軸的值為0 px；y軸的值為-25 px。同樣，我們只要把第9幀里的光圈大小設置為65 px x 110 px，x軸的值不變，仍為0 px；y軸的值為-27 px，把第13幀的光圈大小設置為60 px x 100 px，x軸的值不變；y軸的值為-25 px就可以了。光圈的設計是為了實現(xiàn)火焰周圍的熱氣流動效果，使火焰地跳動更有真實感。3 制作火花ctrl+vf8鍵，新建一個名為“spark”的movie clip符號。movie clip符號“spark”的場景中只有1層4幀，第1幀中火花的大小為1 px x 1 px。也就是說這時的火花可以是任意形狀。第1幀中的代碼是：

7、stop();。第2幀、第3幀中的火花位置與大小如見圖10、圖11。圖中白色的“”為場景的中心點。第4幀為空白幀，幀里的代碼是：gotoandstop(1);。 圖9 spark的層結(jié)構(gòu)圖 圖10 第2幀的火花 圖11 第3幀的火花其實，第2幀和第3幀中的火花設置也很簡單，是由一些白色和黃色的小線段組成的。所以，我們可以先用線條工具畫出一個個小線段，然后用油漆桶工具上色。當然，你也可以用一點青色和紅色來點綴一下。在flash中，播放1幀需要的時間是0.1秒，那么，這段火星動畫只需要0.3秒就播放完了，這樣，利用人的視覺停留原理就可以輕松實現(xiàn)火星的迸濺效果了。4 制作齒輪ctrl+f8鍵，新建一

8、個名為“gear”的movie clip符號。在“gear”的場景里先畫出一個灰色的圓環(huán)，然后在圓環(huán)上畫一些交錯的黑白色小線條，如圖12。齒輪的大小為16 px x 16 px。（此為400%的圖片）圖12 齒輪設計圖選中做好的齒輪，按快捷鍵ctrl+g把它變成組圖，接著點選第3幀，按f6鍵插入一個關鍵幀。右鍵單擊第1幀，選擇create motion tween命令。按ctrl+t鍵打開transform面板，把第3幀中齒輪的角度改為20度，即向右旋轉(zhuǎn)20度。最后，點選第3幀，按f9鍵，然后輸入代碼：stop();。這樣，齒輪在播放一次，也就是旋轉(zhuǎn)20度后便停止了，不會不停地旋轉(zhuǎn)。5 制作液

9、氣新建一個名為“fluid”的movie clip符號。點選“fluid”場景中的第1幀，輸入代碼：stop();。接著點選第5幀，按f7鍵插入一個空白幀，然后畫一個圖片。圖片的顏色為#ecfff3，alpha值為20%。圖片的大小為36 px x 70 px。形狀如圖13。圖13 打火機液體點選這個圖片，按快捷鍵ctrl+g把它變成組圖，接著點第200幀，按f6鍵插入一個關鍵幀。右鍵單擊第5幀，選擇create motion tween命令。接著，點選第200幀中的圖片，打開info面板，把圖片的大小設置為36 px x 1 px。點選第201幀，按f9鍵，然后輸入代碼：setpropert

10、y(_root.fire, visible, 0);/設置movie clip符號fire的visible屬性為0，即fire影片剪輯不可見gotoandstop(1);這段代碼的主要作用是為了讓打火機的液氣在用完以后，火焰可以自動地熄滅。6 導入聲音俗話說，鮮花還須綠葉扶持。一個flash動畫如果沒有音樂，那么這個動畫便沒有了生氣，但哪怕只有一點點音樂，說不定就能起到畫龍點睛的效果。所以本著這個設計理念，我們?yōu)閯赢媽胍粋€齒輪和火石摩擦的聲音。7 制作按鈕設計這個按鈕是為了以后把它拖拽到場景中，再給這個按鈕加上一段代碼，用它來實現(xiàn)對以上所有影片的控制。這個按鈕本身的效果是實現(xiàn)打火機的按鈕被按

11、動事件與齒輪轉(zhuǎn)動事件同時發(fā)生。下面我們就來看看這個按鈕的制作方法。ctrl+f8鍵新建一個名為“l(fā)ighter button”的button符號。雙擊layer 1層，把它改名為“button”層，然后新建一層并命名為“gear”層。在“graphic符號“image”里把打火機的按鈕截取下來，然后粘貼在button符號“l(fā)ighter button”場景的up幀里，接著在down幀里按下f6鍵插入關鍵幀，按ctrl+t鍵打開transform面板把打火機按鈕向右旋轉(zhuǎn)10度，使按鈕有被按下的效果。點選down幀，按快捷鍵ctrl+l打開庫，把剛才導入的聲音拖拽到down幀里。點選hit幀，用矩

12、形工具畫一個矩形（不要邊線）。這個矩形正好覆蓋打火機的按鈕與齒輪。在庫中把movie clip符號“gear”拖拽到“gear”層的up幀里，接著點選down幀，并按f6鍵插入關鍵幀，然后點選up幀場景里的齒輪，按ctrl+b把它打散。up幀場景里的齒輪影片被打散后就變成了圖片，這樣，鼠標移到按鈕上，齒輪就不會轉(zhuǎn)動了，而是要等到鼠標在按鈕上按下時，down幀里的“gear”影片剪輯才會被調(diào)用，齒輪才會轉(zhuǎn)動。二、設計場景1 建立各層先如圖14建立各層，層的上下次序不可顛倒，然后把對應的電影剪輯拖拽到層第1幀的場景里。如把影片剪輯“fire”拖入到“fire”層中。這樣做主要是為了設計的方便，因為

13、我們在以上很多影片剪輯的第1幀都用了空白幀，所以當這些影片剪輯被拖到場景中的時候?qū)且粋€白色的小圈，選取和編輯很麻煩，把它們放在各自的層里，那么就可以通過隱藏有鎖定其它層來選揉輯它。圖14 主場景中的各層結(jié)構(gòu)2 設計lighter層lighter層放置的是打火機的機身，我們要做的就是把原來打火機圖片中的按鈕和齒輪部分去處。3 設計fluid層影片剪輯“fluid”拖拽到該層的場景中后即鎖定其它的層。選取這個影片剪輯（場景為白色小圓圈），然后進行如圖15的設置。圖15 properties面板這個層的設計有兩個重要點，一是給影片剪輯“fluid”起個實體名“fluid”，二是把影片剪輯的alp

14、ha值設為44%，增加其透明度，借以實現(xiàn)液氣的透明狀態(tài)。4 設計fire、spark層給fire層和spark層里的影片剪輯加上實體名fire和spark。至于它們相對打火機機身的位置不用我說大家都應該知道吧，什么，你不知道，我倒。5 設計button層lighter button按鈕的用處我們前面已經(jīng)提過。現(xiàn)在我們把這個按鈕拖拽到場景中，然后點選它，按f9鍵打開actions面板，輸入如下代碼：on (press) /當鼠標左鍵被按下時，執(zhí)行以下代碼 telltarget (fluid) /調(diào)用影片實體fluid gotoandplay(5);/跳轉(zhuǎn)到影片實體的第5幀，并開始播放 tellt

15、arget (spark) gotoandplay(1); setproperty(fire, _visible, 1);/使火焰影片可見 telltarget (fire) gotoandplay(5); on (release, rollout) /當鼠標左鍵被松開時，執(zhí)行以下代碼 setproperty(fire, _visible, 0);/使火焰影片不可見 fluid.stop();/停止火焰影片的播放以上代碼實現(xiàn)了對火焰、火花、液氣的控制，從而實現(xiàn)影片的逼真效果。整個效果到這里就全部設計好了。如果大家還有什么不明白的話可以下載源件。三、本例技巧總結(jié)在文章的最后我把該例中用到但文章沒有講到的一些設計技巧告訴大家。讓大家在設計的時候可以做到事半功倍。1當影片剪輯為白色小圓圈時，它在場景中的位置就不好判斷，那么我們就把場景中其它的層鎖定，選中它后雙