[AS程式設計教學]天氣效果動畫之鵝毛大雪?

雪花效果可能是很多初學者必學必做的一個效果,該效果在實際的作品中還是比較常用的。的確有些時候就是需要場景中下雪,假如你用時間軸動畫來做,那會是很麻煩的一件事情,隨機性難以掌握而且永遠是一個樣子。但是用程式來實現就會好很多。

如下圖所示,本教程就是要教會大家如何編碼實現AS天氣效果立的下雪效果

本示例效果瀏覽地址:

[AS程式設計教學]天氣效果動畫之鵝毛大雪

工具/原料

FlashCS3(及其以上版本),一張背景圖

步驟/方法

首先我們新建一個空白的文件,幀頻選擇為30fps.

[AS程式設計教學]天氣效果動畫之鵝毛大雪

接下來我們匯入一張背景圖,為了襯托白色的雪花,一般選擇和白色對比明顯的神色為佳。快過年了嘛,我們選擇一張紅色喜慶的圖。

[AS程式設計教學]天氣效果動畫之鵝毛大雪

接下來我們要自己先手動繪製一片雪花影片剪輯,屆時程式碼會根據這片雪花複製生成很多片雪花在舞臺上,大小形態各異。繪製的方法主要是利用徑向漸變,從白色到透明的白色,這樣會出現邊緣模糊的效果。

要注意雪花在我們視覺上不一定是絕對的圓形,因此我們這裡做成橢圓,做好如下圖所示:

[AS程式設計教學]天氣效果動畫之鵝毛大雪

[AS程式設計教學]天氣效果動畫之鵝毛大雪

給我們剛繪製的雪花一個SnowItem的連結類名。

[AS程式設計教學]天氣效果動畫之鵝毛大雪

再主時間軸新建一層,命名為AS,然後寫入以下程式碼:

var total:int = 100;//雪花總數

var max:int = 1;//最大尺寸

var min:int = 0.18;//最小尺寸

var snowList:Array = [];//雪花陣列

var w = stage.stageWidth;

var h = stage.stageHeight;

//-----------------------------

createSnow();

startMoveSnow()

//建立雪花

function createSnow():void

{

for (var i:int = 0; i < total; i++)

{

var snow_mc:SnowItem = new SnowItem();

snow_mc.x = Math.floor(Math.random() * w);

snow_mc.y = Math.floor(Math.random() * h);

snow_mc.scaleX = snow_mc.scaleY = Math.random() * (max - min ) + min;

snow_mc.alpha = Math.random() * .8 + .2;

snow_mc["yspeed"] = Math.floor(Math.random() * 2 + 6);

snow_mc["xspeed"] = -0.036 + Math.random() * 0.06;

snow_mc["radian"] = 0;

snow_mc.rotation = Math.random()*360;

this.addChild(snow_mc);

snowList.push(snow_mc);

}

}

//控制雪花降落

function startMoveSnow():void

{

this.addEventListener(Event.ENTER_FRAME,moveSonw);

}

function moveSonw(e:Event):void

{

for (var i:int = 0; i < total; i++)

{

var mSnow:SnowItem= snowList[i] as SnowItem;

mSnow["radian"]+=mSnow["xspeed"]*2;

mSnow.x += Math.sin(mSnow["radian"]) * 2;

mSnow.y += mSnow["yspeed"];

if (mSnow.y >= h mSnow.x >= w mSnow.x <= 0)

{

//this.removeMovieClip();

mSnow.y = -10;

mSnow.x = -10 + Math.floor(Math.random() * w + 10);

mSnow.rotation = Math.random()*360;

}

}

}

[AS程式設計教學]天氣效果動畫之鵝毛大雪

測試,“鵝毛大雪”的感覺就出來了。

[AS程式設計教學]天氣效果動畫之鵝毛大雪

注意事項

第3步中雪花自己要反覆測試後調整大小和形狀虛實等等,一步很難畫到位。

相關問題答案