RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Make Your Files More Expressive with Runtime Filters

Learn how to use Flash 8's dynamic filter effects, making it possible to add drop shadows, glows, bevels, blurs, and more to Movie Clips at runtime.

his month, I will show you a couple of simple ways to add runtime filter effects, such as drop shadow or blur, to your Movie Clips for a more dynamic graphical experience. I will discuss methods that require only the interface, as well as on-the-fly applications using ActionScript for those interested in coding.

In the past, adding such an effect to your file required advanced preparation—either via importing a bitmap graphic for a high-quality shadow/blur, or via a less elegant multi-tier vector opacity blend accomplished with the Drop Shadow or Blur Timeline Effects. In these cases, you were stuck with what you prepared and any changes to the affected assets required you to update the graphics.

More importantly, this was only practical for stills or short animations because each frame in which the affected asset changed required the aforementioned advanced preparation. As a result, less detailed cheats, such as ambiguous "shadow blobs," were used for animations. Shadow blobs entailed nothing more than a simple elliptical alpha gradient positioned under an animated character. The pseudo shadow could then be moved, and scaled for a little extra realism, with the character's movement.

While this did the job in some cases, it wasn't very expressive. However, with Flash 8's runtime filter effects, you can now go from old school to wow, cool with a few simple clicks.

Author's Note: The first of the preceding examples is viewable with earlier Flash Players and has been saved as a Flash MX 2004 document in the source code that accompanies this article. However, filter effects, and thus all other examples and source code in this article, will require Flash 8. This is something to keep in mind when thinking about feature choices and player compatibility.

Available Filters
In this brief article, I'll focus on the Drop Shadow filter and, later via ActionScript, I'll add a Bevel filter. However, there are other filters available. Via the interface, you can also add filters for Blur and Glow effects, Gradient Bevel and Gradient Glow effects (which use gradients instead of solid colors in their manipulations), and an Adjust Color effect that allows you to adjust hue, saturation, brightness, and contrast. Figure 1 shows four of these effects applied to simple Movie Clips.

Figure 1. The Bevel and Blur filters pictured here are two of four example filters shown in this full-size figure.
ActionScript also opens up a whole other realm of bitmap filter magic via the BitmapData class, including color matrix, convolution, and displacement map effects, however these must remain for a future column.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date