Craig Campbell’s School of Flash

3. Animate the particle in ActionScript. To animate our particle, we’re going to create a function that changes our X and Y coordinates ever-so-slightly. Then we’re going to create an ActionScript Timer that causes this moveParticle function to run over and over again at a specified rate. Go back to your Actions Panel, and enter the following code:

Lines 6 - 10 contain a function that simply increases the X and Y coordinates of the movie clip by 3 pixels each. And when we use the Timer to run this function over and over again, we’ll achieve the effect of constant movement down (increasing Y value) and to the right (increasing X).

To create the Timer (line 12), we create a new instance of the Timer class and store it in a variable, which I’ve called “myTimer”. The “50″ inside the parentheses of the Timer() represents how often we want the Timer to trigger an event. This number is in milliseconds.

Once the timer is created, we need to add an event listener to the timer (line 13). This “listener” listens for every single time the Timer is triggered (every 50 milliseconds in this case) and then causes the “moveParticle” function to run every time it’s triggered.

But the Timer won’t actually start working until we tell it to, and that’s what we’re doing in line 14.

Note: The speed of movement is determined by two things: (1) the distance moved every time the moveParticle function is called, and (2) the frequency with which the function is called. You can alter the speed of the animation by changing any combination of these two numbers.

4. Random Movement. One of the features of an effective particle effect is randomization of a number of different factors, including movement, size, opacity, etc. Let’s play with our code a little in order to randomize the movement.

Right now, every time the moveParticle function is called, the particle is moving to the right three pixels (dot.x+=3) and down three pixels (dot.y+=3). Well, we may not always want the particle to move at that exact speed or in that direction. So let’s change this so that it randomly picks a number between -4 and +4. (A negative “x” value will move the particle to the left and a negative “y” value will move it up.)

In the example code below, I’ve updated it to reflect these random numbers:

On lines 6 and 7, I’ve created two random numbers to represent the rate of x and y movement. The reason we don’t want to calculate this number inside the moveParticle function is because we want our particle to move in a constant direction. If we calculated the random number inside the function, then every time the function was called by the Timer, it would calculate a different random number, and the particle would constantly be changing directions.

So, what about those random numbers? How does that work?

Well, the Math.random() function returns a random number between 0 and 1. So, to get a number between 0 and 8, you would multiple the result by 8. When you subtract 4 from the final result, you get a random number between -4 and +4.

At this point, every time you test your movie, your particle will be moving in a random direction and at a random speed. To increase the highest possible speed, simply alter the random range. For example, if you wanted a random number between -10 and +10, you would use “Math.random() * 20 - 10″.

On the next page, we’ll take a look at how to add multiple particles to the stage.

Tags: Flash Tutorial, particle effect

Pages: 1 2 3 4

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.