In the last particle effect tutorial, I laid the groundwork for creating a randomized particle system. In this tutorial, we're going to build on what we've already created, so if you haven't read the last tutorial, you might not get too much out of this one.

Since we're all experts now on creating a basic particle system, this tutorial won't be as lengthy as the last one. In fact, in order to achieve our goals for this tutorial, we'll only have to add a couple simple lines of code.

In this tutorial, we're going to discuss adding gravity to our particle effect. After all, what goes up must come down, right? Well, if you remember, our last particle effect looked like this:

And here's the code that produced said effect:

In this effect, each particle is traveling in a random direction. Well, if we add some gravity to this effect, then the particles that are flying upwards will eventually slow down and then start falling.

So we need to figure out how this will work mathematically. Each particle is moving along the X and Y axes of the stage at a random rate, and this rate is stored in a variable called "xMovement" and "yMovement". The "yMovement" determines the rate of vertical movement. Well, if you throw a pumpkin into the air, it's going to start off at a certain speed. In flash, this would mean a negative yMovement value, since it's moving upwards on the stage. As the pumpkin continues to rise, it's upward motion slows down, which means that its yMovement value is increasing, or approaching zero. When the pumpkin reaches its peak, it's vertical movement is no longer negative. For a brief moment, it's at zero. And then it starts falling, and as it falls, it's yMovement is constantly increasing (or getting faster).

So basically, in order to create gravity, all we have to do is to increase the value of the yMovement variable every time we run the moveParticle function. And the beautiful thing is that it only takes one extra line of code to do this. Since the yMovement constantly needs to be increasing, it would only make sense to put this code inside the moveParticle function. This way, every time the particle moves, its yMovement values is also increased. The amount that you increase it is going to take a little experimentation, but the amount will usually be a number between zero and one. In this case, I settled on 0.4.

In lines 11 and 12, you'll notice that I adjusted the initial speed a little so that our particles are now moving anywhere from -8 to +8 frames every time the moveParticle function is called. And then, in line 29, we have the code that serves as our force of gravity.

And with our two minor changes in place (along with a minor tweak in the graphics), we have the following effect:

Here is the FLA file for your reference: gravity.zip

Click here to see a video tutorial on the same subject.