Apr
19

Flash snowflakes with ActionScript 2.0

19 Apr 2009 by tonie in Flash

Last year I made a few flash demos to show-off a portfolio for my old blog (which was entirely flash based) and this is one of them. Here is how you can create dynamically some random size snowflakes for your next Christmas Flash Project :)

Graphics

First, go ahead and click on the Oval Tool and create a small white circle (5x5 px) with no borders anywhere on the stage. For fill color, I used Radial Gradient (white -> transparent white). Then select it and hit F8 to convert it into a movie clip symbol. Name it whatever you want, but once you convert it, select the snowflake and give it an instance name of snow. Change the background color as you want. In my example I gave it a blue-gray-black gradient, as if it were Christmas Eve :D

Actions

Create a new layer, lock it and name it to actions. Then select the first keyframe and put down the following code:

stop();
for (i=0; i<200; i++) {
	duplicateMovieClip(snow,"snow"+i,i);
}

The first line tells the time line to stop. Next we create a for loop, which we use to duplicate the movie clip with an instance name of snow 200 times. Now hit Ctrl+Enter to test your movie. Not quite what you expected? You see a single small white spot somewhere on the screen. That is because we haven't told it to move. To do so, select your snowflake then hit F9 and paste the following script, to give it some life :)

onClipEvent (load) { // when the clip loads
	this._xscale = this._yscale = 100+Math.random()*100; // give each snowflake a random size
	this._alpha = 40+Math.random()*60; // and make each between 40 and 100 percent visible
	this._x = Math.random()*Stage.width; // now put every snowflake in a different position on the stage
	this._y = Math.random()*Stage.height;
	xspeed = Math.random()*2-1; // also give snowflakes some different speed
	yspeed = Math.random()*3;
}

If you now test your movie you will see that all of our 200 snowflakes have taken different positions on the stage and are random in size and transparency. In addition to the above piece of code add this, to make your snowflakes move.

onClipEvent (enterFrame) { // every time the movie enters a frame
	this._x += xspeed; // start moving those snowflakes!
	this._y += yspeed;
	// those lines of code prevent snowflakes from running out of the stage
	if (this._x > Stage.width) {
		this._x = 1;
	} else if(this._x < 0) {
		this._x = Stage.width-1;
	}
	if (this._y > Stage.height) {
		this._y = 1;
	}
}

And you are done, just like that!. Download the attached source file, if you run into trouble. And here is how my snowflakes look like

Attachments

snow.rar (6 KB)

flash, actionscript, tutorial

Speak your mind ( 2 Comments)

#1 by annie on 5/5/09

Hi,

I really like but as I'm new to flash so not all of this makes sense just yet! I was wondering how you would change the colours of the snow flakes? I have been playing around with Math.random but no matter how I use it or where I put it, they are always still the same colour?

#2 by tonie on 5/5/09

Hi annie, Math.radom() in this case only controls the transparency, initial position and movement speed of our snowflakes. If you want to give every snowflake a different color, try adding the following code somewhere in the onClipEvent(load) event: color = Math.round(Math.random()*0xFFFFFF); coloredSnowflake = new Color(this); coloredSnowflake.setRGB(color); I hope this is what you were looking for :) Cheers, T.

If you liked the article and want to contribute to it, please feel free to leave your comment. HTML tags are not allowed, but you can use the following BBCode to enhance your message: [url] [quote] [code] [b] [i] [u] [color].