CLOSE ×
Get in Touch
Thank you for your interest! Please fill out the form below, and I will do my best to get back to you.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Bitmap Filtering With AS3

Garth Henson
|
Uncategorized
|
16 Sep 2010

It’s been far too long since I have had a few minutes to post on the topic of Flash or Actionscript, so I wanted to take a few minutes out of my incredibly hectic schedule and post something I’ve recently learned. I had been looking for a nice, clean way to come up with some more stunning visual effects for my studies, especially when they can be construed as boring by some based on content alone. After finding the Polygonal library on Google Code and studying their particle handling and demos, I decided to give them some sincere flattery and imitate their demo display. I found it to be incredibly clean, and the masking techniques exhibited make for a much more easily managed viewport. While this was a great boost for me, I was most impressed by seeing their incredibly simple solution to some visual effects I had been striving to achieve with some of my particle studies.

While some of my particle systems were fun, there always seemed to be something lacking in the visual representation I was after. I couldn’t quite figure out a way to have the particles leave a trail behind them as they moved through space. Well, it turns out that one of the major reasons I failed at this was because I was trying to over-calculate and do everything with vectors. Taking a clue from Polygonal (thanks again, guys!), I realized that by using some simple bitmap filtering, we can come up with a very smooth transition.

Those of you who have any experience with double buffering animation will be able to grasp the concept of using bitmap filtering with some ease. Basically, the concept is that we never actually remove the currently visible scene, we simply filter the entire thing in some manner and then redraw the current objects on top of the altered scene. So, if we were to blank the bitmap entirely each time, we would have old-school animation at its best. Instead, let’s consider what would happen if we were to simply fade the previous image partially (or “darken” it) with each frame.

As an object moves, it’s previous render fades, and it is redrawn in its new location. When this is done frame after frame, you have a very interesting ghosting effect that is vaguely reminiscent of a comet’s tail. Fortunately, this is precisely the type of effect I was wanting for my particles. So, by using a bitmap object to filter and redraw my display every frame, we can see a much more visually appealing demonstration. In this demo, there is a single display object that is launching fireworks at a controlled randomized increment. Each firework then is doing some voodoo to create it’s launch animation, projectile, and finally its explosion. The colors of the fireworks’ explosions are entirely random, so there will occasionally be some that are too dark.

As you can see, the effect is quite becoming of a fireworks display. Since I’m not recycling any particles or using any type of cleanup, the SWF does eventually get quite laggy. If you run into this issue, just refresh the page, and you’ll be able to see things whole once more.

Garth Henson
Garth is as a lead engineer at The Walt Disney Company, specializing in JavaScript applications.

Recent Blog Posts

Let's Work Together
Contact Me