雪花效果可能是很多初學者必學必做的一個效果,該效果在實際的作品中還是比較常用的。的確有些時候就是需要場景中下雪,假如你用時間軸動畫來做,那會是很麻煩的一件事情,隨機性難以掌握而且永遠是一個樣子。但是用程式來實現就會好很多。
如下圖所示,本教程就是要教會大家如何編碼實現AS天氣效果立的下雪效果
本示例效果瀏覽地址:
工具/原料
FlashCS3(及其以上版本),一張背景圖
步驟/方法
首先我們新建一個空白的文件,幀頻選擇為30fps.
接下來我們匯入一張背景圖,為了襯托白色的雪花,一般選擇和白色對比明顯的神色為佳。快過年了嘛,我們選擇一張紅色喜慶的圖。
接下來我們要自己先手動繪製一片雪花影片剪輯,屆時程式碼會根據這片雪花複製生成很多片雪花在舞臺上,大小形態各異。繪製的方法主要是利用徑向漸變,從白色到透明的白色,這樣會出現邊緣模糊的效果。
要注意雪花在我們視覺上不一定是絕對的圓形,因此我們這裡做成橢圓,做好如下圖所示:
給我們剛繪製的雪花一個SnowItem的連結類名。
再主時間軸新建一層,命名為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;
}
}
}
測試,“鵝毛大雪”的感覺就出來了。
注意事項
第3步中雪花自己要反覆測試後調整大小和形狀虛實等等,一步很難畫到位。