Particle Effects in Flash using an Actionscript 3 (AS3) Class Structure

If, in flash game or application development, you are looking for something truly spectacular to help give you program a little pizazz, particle effects go a long way with impressing your users. Flash particle effects are pretty, spontaneous, and eye-catching on the web-page. Perhaps you would like to use some AS3 particles in an ad for your product, or maybe you want impressive explosions, smoke, or spells in your flash video games. Either way, this tutorial is a great introduction to how particle effects are created.

Here’s the effect you too can create after a few short steps..

Keep in mind that everything about this flash particle effect is fully customizable..
from color, to speed, gravity, design, and direction, everything is set as you desire.

At that, let take a look at how to build this actionscript 3 particle effect and engine.

Before I begin though, it is best to offer you guys the complete flash source code, as you may prefer to download and tweak with the example before we go through the explanations!

Place all three files in the same directory/folder, and then run run the “particle_driver.fla”

particle_driver.fla

particle_manager.as

particle.as

(As a note, for the “particle.as” and “particle_manager.as”  flash actionscript files, you may need to Right Click ->Save Link As.. to download those files rather than the default of opening them in the browser.)

ALL THREE FILES ARE NEEDED FOR THE PARTICLE EXAMPLE TO COMPILE CORRECTLY!

To modify some of the particle features, go ahead and open up the “particle.as” file. The public static const variables START_DELAY, VELOCITY, and GRAVITY can be edited, recompiled, and have immediate effects.  Anything else can still be easily tweaked, but is best learned through the explanations below.

Let us look at the “particle.as” file first. As a reminder too, AS3 is an Object Oriented Language (OOP), and this is the perfect example of an object class.  What the particle.as class represents is a single instance of a particle (as in 1 of the 25 that are created every time I click the mouse), and it contains all the necessary variables (in addition to the standard x, y, alpha, scale etc. standard to a MovieClip), which are:

• start_delay: The range in time (in frames) for which we delay in creating particles for one given explosion.  In other words, how long our particles will spew out (start_delay=10; implies particles will spew for 10 frames starting from the click event).
• time_to_live: How long our particles (in frames) will remain on screen. After time_to_live is decremented to zero, the particle is automatically removed from the screen.
• color: Obviously what color our particles are. You could set it to a static color, or in each update set it to something different (as in mine, every frame it’s something new and random, giving the rainbow effect).
• spread: This number represents how fast our particles shoot out horizontally. Lower number makes a more narrow spout, larger number makes it wider.
• accel: How fast the particles project upward. Larger numbers make it more explosive, smaller more calm, and negative results in shooting southward.

Now that those are out of the way, lets take a look at the classes’ functions: the constructor (particle()), start_splash(), and update().

Constructor:

All we are doing here is setting the X and Y position values as given to us by the main scene, and initializing the global class variables we just listed above. One final thing we also did was randomly flip the spread (x-movement) to the left and right.  Math.random() gives us a number between 0-1, so there’s a 50% chance it is below 0.50.

Animation Startup:

This one is quick and easy. Once start_splash() is called from the parent particle_manager.as class, we fire up the update() function below.

Enter_Frame Animation Update:

Here’s where the particle magic happens.   The first if statement checks if our start_delay is equal to zero, if it is not, the next int(start_delay) frames are wasted decrementing the value. This helps give us that random spurting of particles, and making it look more like a fountain rather than a 1-time instantaneous explosion.

The next check, the else if, will only fire once our time_to_live is sub_zero. We’ll look at that last.

Out meat of the function is in the final else. X moves according to the classes’ spread value, and Y moves according to the accelerated velocity (accel). I subtract 0×333333 from the color value (Hex value), and obviously since the color is only at MIN 0×000000 and MAX 0xFFFFFF, the color values wrap around from 0 back to 255,255,255. Resulting in a continuous rotation of color.  Those next three lines with the myColor variable are just AS3′s way of updating values.  We also decrement the alpha, slowly fading the particles out, which helps avoid the abrupt disappearance after time_to_live expires.  Of course, we also need to dec the time_to_live, and slow accel by the GRAVITY constant, giving the parabolic movement of the particle between frames.

In the else if case, once time expires, we reset the exact same things as in the constructor, getting ready for the next click explosion. We also remove the particle update event, and remove it from the stage, killing visibility.

This is all the code we need inside each specific particle! All that’s left is the manager and main driver!

Let’s head on over to the next page!

Particle Effects in Flash using an Actionscript 3 (AS3) Class Structure (Part2!), click here!

Pages: 1 2