FLASH制作花瓣隨風(fēng)舞動(dòng)
若水221147由 分享
時(shí)間：
知識(shí)點(diǎn)：
a、漸變色,形變動(dòng)畫(huà)的應(yīng)用。
b、元件的as標(biāo)識(shí)符。
c、attachMovie的應(yīng)用。
d、movieClip的各項(xiàng)屬性的使用。
e、濾鏡的應(yīng)用。
應(yīng)用分析：
本題最初是幫助朋友做一個(gè)視覺(jué)效果,做一朵花開(kāi)放的效果出來(lái)。分析一下，花是由一片片花瓣組成，做完每一片花瓣的伸展動(dòng)畫(huà)，然后復(fù)制若干個(gè)這個(gè)動(dòng)畫(huà)，讓其環(huán)繞一圈播放，那么就可以形成一層花瓣綻放的效果，然后做多層這種效果，最終就可以形成一朵花的效果。注意必須使用flash8.0以上的播放器。 那么問(wèn)題很簡(jiǎn)單，首先要做花瓣。 建立一個(gè)空MC，命名為"huanban01"，用鋼筆工具畫(huà)一個(gè)花瓣，注意花瓣的輪廓要使用綠線，而花瓣內(nèi)要使用中心漸變色填充。花瓣的大小控制在長(zhǎng)度100象素左右。注意該花瓣元件的定義點(diǎn)中心應(yīng)該在花瓣的根部。（這是為了將來(lái)復(fù)制的時(shí)候，花瓣可以根部為中心進(jìn)行環(huán)繞）參見(jiàn)圖pic01.jpg：
在1-30幀之間，做一個(gè)花瓣伸展的動(dòng)畫(huà)，其實(shí)就是在第1幀把花瓣縮小，然后用形變動(dòng)畫(huà)讓其放大。參見(jiàn)圖pic02.jpg：
在30-160幀之間，做一個(gè)花瓣輕微舞動(dòng)的效果，也很簡(jiǎn)單，只是讓花瓣的外形稍微有一點(diǎn)變化即可。你也可以做的長(zhǎng)一些，比如30-400幀之間，多做幾個(gè)關(guān)鍵幀。在最后一幀上加上as： gotoAndPlay(30); 這樣，花瓣在輕微舞動(dòng)之后會(huì)跳回到30幀繼續(xù)舞動(dòng)，這樣一個(gè)花瓣便完成了，你可以把這個(gè)元件拖到場(chǎng)景中，觀看一下播放效果。
每個(gè)花瓣的形狀不可能一樣，因此，我們有必要多做幾個(gè)花瓣，你可以重復(fù)上述步驟，做出"huanban02"，"huanban03"，讓它們的外形和"huanban01"有所區(qū)別，輕微舞動(dòng)的頻率也有所區(qū)別。 接下來(lái)一步，我們需要把元件庫(kù)里的這幾個(gè)花瓣加上標(biāo)識(shí)符，以便將來(lái)調(diào)用。元件庫(kù)里鼠標(biāo)右鍵點(diǎn)元件"huanban01"，在菜單里選擇"鏈接...”，彈出對(duì)話框，勾選“為actionscript導(dǎo)出”，“在第一幀導(dǎo)出”，然后在標(biāo)識(shí)符一欄里寫(xiě)上"huanban01"，點(diǎn)確定。參見(jiàn)圖pic03.jpg：
"huanban02"，"huanban03"一樣加上標(biāo)識(shí)符。注意元件的標(biāo)識(shí)符是唯一的，不可重復(fù)，每一個(gè)元件加上標(biāo)識(shí)符之后，運(yùn)行時(shí)就可以將他們隨時(shí)調(diào)用出來(lái)使用了。 下面需要做一層花瓣，新建一個(gè)MC，命名為“花瓣層1”，幀上大概參見(jiàn)圖pic05.jpg：
在第1幀里寫(xiě)上： quan=random(3)+10; n=1; quan這個(gè)變量是用來(lái)計(jì)算該層花瓣一共有多少個(gè)，如果寫(xiě)quan=10，那么該層花瓣就一共有10片，random(3)是一個(gè)隨機(jī)函數(shù)，它的作用是隨機(jī)生成0-2的隨機(jī)整數(shù)，那么quan的實(shí)際值應(yīng)該為10-12的隨機(jī)整數(shù)。n=1，是計(jì)數(shù)器，不贅述。在第2幀里寫(xiě)上： for (i=1;i<=quan;i++) { temp=random(3)+1; this.attachMovie("huaban0"+temp,"huaban"+n,n) lik=this["huaban"+n] lik._rotation=360/quan*i+random(10)-5; lik._alpha=random(10)+60; lik._xscale=random(20)+100; lik._yscale=random(20)+100; temp=random(2); if (temp==0) { lik._yscale=-lik._yscale; } n++ } this.attachMovie("huaban0"+temp,"huaban"+n,n) 的作用就是隨機(jī)從庫(kù)里抽出"huaban01","huaban02","huaban03"元件，命名為,"huaban"+n的實(shí)例，復(fù)制到本元件內(nèi) lik=this["huaban"+n]是用lik變量鎖定該復(fù)制的實(shí)例，方便后面操作。 lik._rotation=360/quan*i+random(10)-5; 的作用就是把花瓣環(huán)繞分布，+random(10)-5的目的是為了讓花瓣的旋轉(zhuǎn)角度有一定偏差，不至于太平均。 lik._alpha=random(10)+60;的作用是讓花瓣的透明度在60-70之間取隨機(jī)值。 lik._xscale=random(20)+100;的作用是讓花瓣的長(zhǎng)度在100%到120%之間取取隨機(jī)值。 lik._yscale=random(20)+100;的作用是讓花瓣的寬度在100%到120%之間取取隨機(jī)值。 temp=random(2); if (temp==0) { lik._yscale=-lik._yscale; } 以上語(yǔ)句的作用是隨機(jī)讓花瓣以中軸進(jìn)行翻轉(zhuǎn)。n++;計(jì)數(shù)器+1。在第90幀寫(xiě)上： stop(); 如此，該層花瓣已經(jīng)完成，可以把該MC拖入場(chǎng)景，觀察效果
花是由多層花瓣組成的，因此，有必要多做幾個(gè)，可以把上面“花瓣層1”元件復(fù)制若干個(gè)，修改其中的參數(shù)，讓其生成花瓣的數(shù)目，長(zhǎng)短，透明等等有一定區(qū)別。分別拉入場(chǎng)景 此時(shí)，基本已經(jīng)完工。下面需要做的是組裝花朵。新建一個(gè)MC，命名為“花”，按下圖所示，分別將幾個(gè)花瓣層組件分配到不同的層中，將他們疊放在一起。最后在最上層放一個(gè)中心點(diǎn)。（你也可以放一個(gè)花蕊什么的）參見(jiàn)圖pic04.jpg：
將本元件拖入場(chǎng)景總，播放，效果大致如test06.swf所示： 這時(shí)的花看起來(lái)還比較平面化，缺少細(xì)節(jié)，因此，我們需要給花增加效果，讓其看起來(lái)更豐富。首先進(jìn)入“花”組件中，給每一層花瓣都增加兩種濾鏡，分別是投影和發(fā)光。大致的設(shè)置如下。參見(jiàn)圖pic06.jpg，pic07.jpg：
然后：進(jìn)入場(chǎng)景中，給“花”組件也增加一種濾鏡“調(diào)整”顏色，大致設(shè)置如下。參見(jiàn)圖pic08.jpg：
經(jīng)過(guò)這樣一改，花朵的效果就豐富很多了，大致效果如test07.swf所示：
教程后思考題：
1、為什么非要在每一個(gè)“花瓣層”上增加投影和發(fā)光，如果只在“花“組件上增加這兩種濾鏡，效果會(huì)如何？
2、有沒(méi)可能再做一花瓣凋零的效果？
3、如果想做花蕊，可不可以用類(lèi)似的方法來(lái)做？
a、漸變色,形變動(dòng)畫(huà)的應(yīng)用。
b、元件的as標(biāo)識(shí)符。
c、attachMovie的應(yīng)用。
d、movieClip的各項(xiàng)屬性的使用。
e、濾鏡的應(yīng)用。
應(yīng)用分析：
本題最初是幫助朋友做一個(gè)視覺(jué)效果,做一朵花開(kāi)放的效果出來(lái)。分析一下，花是由一片片花瓣組成，做完每一片花瓣的伸展動(dòng)畫(huà)，然后復(fù)制若干個(gè)這個(gè)動(dòng)畫(huà)，讓其環(huán)繞一圈播放，那么就可以形成一層花瓣綻放的效果，然后做多層這種效果，最終就可以形成一朵花的效果。注意必須使用flash8.0以上的播放器。 那么問(wèn)題很簡(jiǎn)單，首先要做花瓣。 建立一個(gè)空MC，命名為"huanban01"，用鋼筆工具畫(huà)一個(gè)花瓣，注意花瓣的輪廓要使用綠線，而花瓣內(nèi)要使用中心漸變色填充。花瓣的大小控制在長(zhǎng)度100象素左右。注意該花瓣元件的定義點(diǎn)中心應(yīng)該在花瓣的根部。（這是為了將來(lái)復(fù)制的時(shí)候，花瓣可以根部為中心進(jìn)行環(huán)繞）參見(jiàn)圖pic01.jpg：
在1-30幀之間，做一個(gè)花瓣伸展的動(dòng)畫(huà)，其實(shí)就是在第1幀把花瓣縮小，然后用形變動(dòng)畫(huà)讓其放大。參見(jiàn)圖pic02.jpg：
在30-160幀之間，做一個(gè)花瓣輕微舞動(dòng)的效果，也很簡(jiǎn)單，只是讓花瓣的外形稍微有一點(diǎn)變化即可。你也可以做的長(zhǎng)一些，比如30-400幀之間，多做幾個(gè)關(guān)鍵幀。在最后一幀上加上as： gotoAndPlay(30); 這樣，花瓣在輕微舞動(dòng)之后會(huì)跳回到30幀繼續(xù)舞動(dòng)，這樣一個(gè)花瓣便完成了，你可以把這個(gè)元件拖到場(chǎng)景中，觀看一下播放效果。
每個(gè)花瓣的形狀不可能一樣，因此，我們有必要多做幾個(gè)花瓣，你可以重復(fù)上述步驟，做出"huanban02"，"huanban03"，讓它們的外形和"huanban01"有所區(qū)別，輕微舞動(dòng)的頻率也有所區(qū)別。 接下來(lái)一步，我們需要把元件庫(kù)里的這幾個(gè)花瓣加上標(biāo)識(shí)符，以便將來(lái)調(diào)用。元件庫(kù)里鼠標(biāo)右鍵點(diǎn)元件"huanban01"，在菜單里選擇"鏈接...”，彈出對(duì)話框，勾選“為actionscript導(dǎo)出”，“在第一幀導(dǎo)出”，然后在標(biāo)識(shí)符一欄里寫(xiě)上"huanban01"，點(diǎn)確定。參見(jiàn)圖pic03.jpg：
"huanban02"，"huanban03"一樣加上標(biāo)識(shí)符。注意元件的標(biāo)識(shí)符是唯一的，不可重復(fù)，每一個(gè)元件加上標(biāo)識(shí)符之后，運(yùn)行時(shí)就可以將他們隨時(shí)調(diào)用出來(lái)使用了。 下面需要做一層花瓣，新建一個(gè)MC，命名為“花瓣層1”，幀上大概參見(jiàn)圖pic05.jpg：
在第1幀里寫(xiě)上： quan=random(3)+10; n=1; quan這個(gè)變量是用來(lái)計(jì)算該層花瓣一共有多少個(gè)，如果寫(xiě)quan=10，那么該層花瓣就一共有10片，random(3)是一個(gè)隨機(jī)函數(shù)，它的作用是隨機(jī)生成0-2的隨機(jī)整數(shù)，那么quan的實(shí)際值應(yīng)該為10-12的隨機(jī)整數(shù)。n=1，是計(jì)數(shù)器，不贅述。在第2幀里寫(xiě)上： for (i=1;i<=quan;i++) { temp=random(3)+1; this.attachMovie("huaban0"+temp,"huaban"+n,n) lik=this["huaban"+n] lik._rotation=360/quan*i+random(10)-5; lik._alpha=random(10)+60; lik._xscale=random(20)+100; lik._yscale=random(20)+100; temp=random(2); if (temp==0) { lik._yscale=-lik._yscale; } n++ } this.attachMovie("huaban0"+temp,"huaban"+n,n) 的作用就是隨機(jī)從庫(kù)里抽出"huaban01","huaban02","huaban03"元件，命名為,"huaban"+n的實(shí)例，復(fù)制到本元件內(nèi) lik=this["huaban"+n]是用lik變量鎖定該復(fù)制的實(shí)例，方便后面操作。 lik._rotation=360/quan*i+random(10)-5; 的作用就是把花瓣環(huán)繞分布，+random(10)-5的目的是為了讓花瓣的旋轉(zhuǎn)角度有一定偏差，不至于太平均。 lik._alpha=random(10)+60;的作用是讓花瓣的透明度在60-70之間取隨機(jī)值。 lik._xscale=random(20)+100;的作用是讓花瓣的長(zhǎng)度在100%到120%之間取取隨機(jī)值。 lik._yscale=random(20)+100;的作用是讓花瓣的寬度在100%到120%之間取取隨機(jī)值。 temp=random(2); if (temp==0) { lik._yscale=-lik._yscale; } 以上語(yǔ)句的作用是隨機(jī)讓花瓣以中軸進(jìn)行翻轉(zhuǎn)。n++;計(jì)數(shù)器+1。在第90幀寫(xiě)上： stop(); 如此，該層花瓣已經(jīng)完成，可以把該MC拖入場(chǎng)景，觀察效果
花是由多層花瓣組成的，因此，有必要多做幾個(gè)，可以把上面“花瓣層1”元件復(fù)制若干個(gè)，修改其中的參數(shù)，讓其生成花瓣的數(shù)目，長(zhǎng)短，透明等等有一定區(qū)別。分別拉入場(chǎng)景 此時(shí)，基本已經(jīng)完工。下面需要做的是組裝花朵。新建一個(gè)MC，命名為“花”，按下圖所示，分別將幾個(gè)花瓣層組件分配到不同的層中，將他們疊放在一起。最后在最上層放一個(gè)中心點(diǎn)。（你也可以放一個(gè)花蕊什么的）參見(jiàn)圖pic04.jpg：
將本元件拖入場(chǎng)景總，播放，效果大致如test06.swf所示： 這時(shí)的花看起來(lái)還比較平面化，缺少細(xì)節(jié)，因此，我們需要給花增加效果，讓其看起來(lái)更豐富。首先進(jìn)入“花”組件中，給每一層花瓣都增加兩種濾鏡，分別是投影和發(fā)光。大致的設(shè)置如下。參見(jiàn)圖pic06.jpg，pic07.jpg：
然后：進(jìn)入場(chǎng)景中，給“花”組件也增加一種濾鏡“調(diào)整”顏色，大致設(shè)置如下。參見(jiàn)圖pic08.jpg：
經(jīng)過(guò)這樣一改，花朵的效果就豐富很多了，大致效果如test07.swf所示：
教程后思考題：
1、為什么非要在每一個(gè)“花瓣層”上增加投影和發(fā)光，如果只在“花“組件上增加這兩種濾鏡，效果會(huì)如何？
2、有沒(méi)可能再做一花瓣凋零的效果？
3、如果想做花蕊，可不可以用類(lèi)似的方法來(lái)做？