A couple days ago, I decided I wanted to teach myself a few movement algorithms withing Flash using Actionscript 3. I started with simple Event.ENTER_FRAME event trapping to move an object across the screen, and then I decided to make it a bit more interesting. What I ended up with is this small target practice game. It isn’t very feature rich by any means, but the different things I was able to learn and apply in a relatively short amount of time — like my particle system, easing an object into a destination and MouseEvent trapping — are invaluable to learn if you are going to do anything remotely professional with AS3.

Although I don’t claim to be a professional yet (that will come with time), my intent is to share any interesting discoveries I have made in order to help someone along through the learning stages I have just completed. Just below this paragraph, you will see the target practice game displayed. Simply click the targets to destroy them, and when you need more (or if you want to overload the app), just click the green circle in the top right. You will notice that a main feature of this app is significant randomization: from the position and motion of the targets to the amount and direction of the debris that scatters when those targets are destroyed. So, to aid in your learning, I have provided the source code for this app for you to study as well. The download link will appear at the end of the post.

So, without further ado, here’s the app:

As you review the code, you will notice that, staying true to my Actionscript posts so far, there are no images needed to get everything to work. You simply can download, extract and run the SWF file and examine all the code that draws and executes the application. Now that we understand the overview, there are a few things I’d like to point out, technique related, and I’ll wrap up this post:

Motion and Easing

As some of you may have immediately noticed, I have implemented a very simple version of easing into the motion of the targets. This simply means that, as the target reaches its destination, it slows itself down relative to its distance from its resting point until it actually reaches that point. We use this same technique of easing in life every day — otherwise, we would be slamming doors left and right. Natural motion does not travel at full speed until it reaches the destination and immediately come to a stop: this is the motion recognizable from many early video games. When we recognize the location where we want to stop, we slow during approach to be sure not to overshoot.

Now, to apply this to the targets, I have defined a top speed, or velocity within the class which also acts as the initial speed whenever the direction changes. Keep in mind that, had I taken the time to really attempt realistic motion, I would also have used a form of acceleration when the targets turn around, but for our purposes, easing will suffice. So, with the understanding of what easing does, you should be able to understand better what the code itself is doing. Also, an understanding of basic math will allow you to very easily see how we are calculating our distances, even on the diagonals.

Event Handling and User Interaction

Of course, we can have all the realistic movement and visuals that we want, but without the ability to handle some form of user interaction, the code is practically worthless. Enter the MouseEvent. Within the library of AS3, we can import the flash.events library, and as part of that, we can access the MouseEvent object. This allows us to attach an event handler to an individual object — in our case, a Sprite — and perform actions whenever our selected mouse action is triggered.

This really is extremely simple to accomplish: we just attach our event handler (using the addEventHandler() method) directly to our target sprite, so whenever someone clicks on it, we can perform our action. For this example, the action is also extremely easy. We simply remove the target Sprite from our target object (removeChild()) and add a new ParticleSystem object in its place. The particle system does its own cleanup, so we really don’t have to worry about anything else for now. If this were a large scale application, we would run a garbage collector to remove all the “dead” ParticleSystem objects in turn as well, but since they are quite minimal, we won’t worry about it for this example.

The Particle System

Perhaps the most interesting part of this whole application is the random particle generation that helps us simulate and explosion or “popping” of the targets when they are clicked. This is accomplished, as was referred to in the previous section, by replacing the target Sprite itself with a ParticleSystem object (which is also a Sprite). The particle system then generates a random number of child Particle objects, sets their life, sets a random direction and speed for them, and then sets them free. Then, the ParticleSystem checks on each particle when it enters the frame to see if its life has been exceeded. If so, the ParticleSystem removes that child, destroying the Sprite and freeing up the resources.

When the ParticleSystem enters a frame, but before playing cleanup, it loops over all of its child particles and tells each one to move. The Particle objects themselves were assigned a direction and speed upon creation, so they simply carry out one frame of that motion on themselves; but, as an added visual that works quite nicely, I have also told the Particle objects to fade themselves out to nothing over the course of their lifetime, too. In this way, the targets appear to burst into a random number of particles and scatter themselves before fading into nothingness.

Conclusion

Now that you have an overview of the different pieces that make up this quite simplistic application, you should be able to modify and play with the settings to make whatever type of responses you want. These basic tools and techniques can, and are, used in a number of different ways to accomplish different tasks throughout the coding world.

Feel free to download the full source for this application, and as always, let me know if you have any questions or comments!

Download Full Source (8.84KB)