• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 24. Drawing with ActionScript > Task: Dynamic Snowflakes

Task: Dynamic Snowflakes

A simple example would be to create 50 snowflakes with drawing commands. Each snowflake is kept inside its own new movie clip. Each snowflake is also a little different because we will use random numbers to determine the number of spikes and their length.

Create a new Flash movie.

Edit the script on the first frame. We'll add a bunch of functions there. The first one is a function that creates a snowflake. It accepts the number of this movie clip as the on parameter. For instance, snowflake number 1 will be called snowflake1 and be at level 1.

The function creates a new movie clip. Then it sets the line style for drawing. A random number of spikes and a random length for those spikes are chosen. The function then uses simple trigonometry to draw lines from the center of the snowflake.

function createSnowflake(n) {
    // create a new movie clip
    mc = this["snowflake"+n];

    // set the line syle to hairline, white, semi-transparent

    // pick random number of spikes and their radius
    numSpikes = Math.round(Math.random()*5)+5; // 5 to 9
    spikeRadius = Math.random()*5+5; // 5 to 9

    // create each spike as line from center to point on circle
    for(var i=0;i<numSpikes;i++) {
        spikeAngle = 2.0*Math.PI*i/numSpikes;
        x = spikeRadius*Math.cos(spikeAngle);
        y = spikeRadius*Math.sin(spikeAngle);

    // return reference to this movie clip

The last function creates one snowflake, but we want to create many. The initSnowflakes function creates a number of snowflakes by calling the createSnowflakes function a number of times. It also sets a random location for the snowflake and random values for speed, drift, and rotate. These three variables will be used later to make the snowflake move.

function initSnowflakes(n) {
    // remember number of snowflakes
    numSnowflakes = n;

    // create each snowflake
    for(var i=0;i<numSnowflakes;i++) {

        // create snowflae
        mc = createSnowflake(i);

        // set position
        mc._x = Math.random()*550; // 0 to 550
        mc._y = Math.random()*400; // 0 to 400

        // set movie clip variables
        mc.speed = Math.random()*3+3; // 3 to 6
        mc.drift = Math.random()*2-1; // -1 to 1
        mc.rotate = Math.random()*18-9; // -9 to 9

The moveSnowflakes function loops through each snowflake and moves it according to its speed, drift, and rotate. If the snowflake moves off the sides or bottom of the stage, it will be reset to the other side or to the top. This keeps all the snowflakes falling constantly.

function moveSnowflakes() {
    // loop through snowflakes
    for(var i=0;i<numSnowflakes;i++) {

        // move ad rotate the snowflake
        mc = this["snowflake"+i];
        mc._y += mc.speed;
        mc._x += mc.drift;
        mc._rotation += mc.rotate;

        // bring back to top
        if (mc._y > 400) mc._y = 0;

        // one side to another
        if (mc._x < 0) mc._x = 550;
        if (mc._x > 550) mc._x = 0;

The frame script ends by calling initSnowflakes to make 50 snowflakes.

// create 50 snowflakes

There also needs to be regular calls to moveSnowflakes. This will be done by a small movie clip. Create a shape and convert it to a movie clip. Move it off the stage. Then attach this script to it:

onClipEvent(enterFrame) {

The snowflakes will be white. So if you leave the background color of your movie white, you won't be able to see them. Choose Modify, Document and change the color to black or a dark blue.

Try your movie or the example movie 24snowflakes.fla. You can also play with the number of snowflakes and the range of values used to make each snowflake. Figure 24.7 shows one possible view of this movie as it runs.

Figure 24.7. Fifty dynamically created snowflakes, all a little different from each other.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint