Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Snowflakes

VCA224 Multimedia 2

Snowflakes (Random Particles)

Here's a little fun exercise that we can do with math: we'll use the random number function in Flash. We will create a single snowflake, then write code that will randomly determine the number, placement, speed, rotation, and drift of the flakes (see example). This exercise is based on one found in SAMS Teach Yourself Flash MX Actionscript in 24 Hours by Gary Rozenzweig.

Specifications

• Size: 550 x 400 (default Flash size)
• Frame Rate: 12 fps (default)
• Length: 1 frame
• Due Date: week 11 (12/18)
• Deliverables: both the FLA and exported SWF files.

Part 1: Flash Layout

1. Launch Flash and open a new movie (standard size, 550 x 400).
2. Draw a snowflake; a simple asterisk-like design should suffice, no need to go crazy.
3. Convert the snowflake into a movie clip and name it snowflake_mc.
4. Give the snowflake movie clip on stage the instance name snowflake_in.

Part 2 Flash: Actionscript

1. Select the snowflake_in instance. Open the Actionscript window and add the following code:

onClipEvent (load) {
this._x = Math.random()*550;
this._y = Math.random()*400;
speed = Math.random()*3+3;
drift = Math.random()*2-1;
rotate = Math.random()*6-3;

}


This first bit of code establishes a series of variables and fills them with random numbers when the movie clip (snowflake) first loads. First, a random number from 1 to 550 (the width of the stage in pixels) is generated and assigned to this._x, the horizontal position of the snowflake movie clip. Next, the vertical position (this._y) is also given a random number from 1 to 400 (the height of the stage). Taken together, these place the snowflake in a random spot somewhere on screen.

Next three new variables are created, speed, drift, & rotate, and each is assigned a random number. Math.random()*3+3 generates a number from 3 to 6 (random()*3 by itself would generate a number from 0 to 3; here we then add 3 to the product). Math.random()*2-1 generates a number from -1 to 1; and the final line generates a random number from -3 to 3.

2. Now add the next chunk of code to the same script:

onClipEvent(enterFrame) {
this._y += speed;
this._x += drift;
this._rotation += rotate;


The onClipEvent(enterFrame) handler is triggered whenever the playhead enters the frame. Since the movie is one frame long, the playhead is perpetually in the frame so what we have in effect an infinite loop; everything inside this handler will continue until stopped.

This portion of the script modifies the current position of the snowflake by adding the speed variable to the y and drift variable to the x. Since the speed variable is a number from 3 to 6, the snowflake is moved down the screen that many pixels each time the movie clip loops. Likewise, it is moved horizontally -1 pixel, 0 pixel, or +1 pixel. The angle of rotation is also altered up to 3º in either direction.

Note that we did not close the onClipEvent handler yet, that's because there's more to come:

3. Add the following code to the same handler:

if (this._y > 400) this._y = 0;

if (this._x < 0) this._x = 550;

if (this._x > 550) this._x = 0;

}

These three lines reset the position of our snowflake should it stray too close to the edge of the stage. If it's y position exceeds 400 (the bottom edge of the stage) it is repositioned at the top (0). Likewise, if a snowflake runs off the side of the stage, it will reappear on the other side and continue on its journey. Pretty slick, eh?

4. Try it out, see if it works. Pretty cool, but one snowflake by itself is not all that impressive. So next we'll add a bunch more.
5. Add a new layer to the timeline and call it actions. Select the keyframe in frame 1 of actions and add the following script:

for(var i=0; i<50; i++) {
snowflake_in.duplicateMovieClip("snowflake_in" +i, i);

}

There's a lot packed into this simple little script. First, a variable (i) is created and assigned a starting value of zero. This is put in a for/next loop (even though we don't have to write the word "next" it's implied). This loop checks the value of i and if it's less than 50 (i<50), it adds one to the value (i++). Then the snowflake instance is duplicated and given a new instance name: snowflake_in plus the value of i (so it would be snowflake_in1, snowflake_in2, etc.). In addition, each movie clip is assigned its own level (z position on stage); the levels correspond to the instance number (so snowflake_in5 will be on level 5, etc.). Finally, when i hits 50, no more snowflakes are generated; the ones appearing at the top of the stage are simply the ones that fell off the bottom and were reset.

6. Test it out; does it work?

Theme and variation

1. You can modify this a number of ways. Try altering the values for speed, drift and rotation for example. Change the number of snowflakes (more or less).
2. Here's a challenge: what if you wanted to make bubbles rising to the surface like these? What would you change?

Point Breakdown

Course Outline

Syllabus

Student Resources