The ENTER_FRAME Event Listener to Animate Particles

In this Flash^R CS3 tutorial, we will continue to work on and improve our particle system snow scene. We will concentrate on one snowflake and program that flake to fall down the stage. We will do this by progressively increasing the value of the Y position for this snowflake movie clip and we will do this with a new event listener called the ENTER_FRAME event listener.

You might be asking why increasing the value of the Y position will cause the flake to fall instead of rise. Remember, that at the upper left corner of the stage, the X and Y positions are both zero. As we move horizontally along the X axis, the numbers increase and as we move down the Y axis the number also increase. So for our snow scene, the stage is 400 pixels high and the bottom most Y position is 400.

Our first step is to change the code that generates several instances of the mcSnowflake movie clip from the Library onto the stage. If you remember, we used a for loop to do this.

var _Snowflake:mcSnowflake;

for (var i:Number = 0; i < 10; i++)
{
_Snowflake = new mcSnowflake();
addChild(_Snowflake);
_Snowflake.x = Math.random() * 510;
_Snowflake.y = Math.random() * 40;
}

But we only need one instance on the stage for this tutorial. So, let's remove the for loop from the above code. We do not need to change the Math.random() code at this time. Below is the code that is left.

var _Snowflake:mcSnowflake;

_Snowflake = new mcSnowflake();
addChild(_Snowflake);
_Snowflake.x = Math.random() * 510;
_Snowflake.y = Math.random() * 40;

Test your movie several times and you will get only one snowflake each time at a random position.

Now we can add the code that will create the snowfall animation for the movie clip. We will do this with a function that we will call "snowfall". The function will continuously increase the Y position by 10 pixels.

function snowfall():void
{
_Snowflake.y += 10;
}

Easy enough, but we still need to call the function to make it work. We will do this with a new event listener called the ENTER_FRAME event listener. This event listener will "listen" for each time our movie enters a new frame and call the snowfall function, the event handler, each time. Therefore, because our Frame Rate is set to the default 12 frames per second in the Document Properties, the snowfall function will be triggered 12 times per second.

So, we need to attach this event listener to something. Because we won't be listening for a mouse event as in our previous tutorial about event listeners, we can add or attach the event listener to the stage.

stage.addEventListener();

We need to identify the event that we want to listen for as an ENTER_FRAME event.

stage.addEventListener(Event.ENTER_FRAME);

And we need to identify the snowfall function as our event handler.

stage.addEventListener(Event.ENTER_FRAME, snowfall);

Finally, we need to coordinate the snowfall function with the event.

function snowfall(event:Event):void
{
_Snowflake.y += 10;
}

Test your movie and you will finally see our snowflake fall down the stage.

Here is the code that we have written.

stage.addEventListener(Event.ENTER_FRAME, snowfall);

var _Snowflake:mcSnowflake;

_Snowflake = new mcSnowflake();
addChild(_Snowflake);
_Snowflake.x = Math.random() * 510;
_Snowflake.y = Math.random() * 40;

function snowfall(event:Event):void
{
_Snowflake.y += 10;
}

Save your snow scene as SnowScene4.fla.