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.

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.

Applying Effects with the Filters Inspector
The first method of applying effects that I’ll discuss is by using the Filters panel. This is grouped with the Properties panel in Flash 8’s default configuration, as seen in Figure 2. To use filters, you must add them to a Movie Clip or Button. Filter effects are not supported for use with Shapes or Graphics.

One or more filters can be added with the Plus (+) pop-up menu at the far left of the panel, and any selected filters can be deleted with the adjacent Minus (-) button. The options area of the panel is context sensitive, varying depending on the filter in use. The settings are usually self-explanatory, and typically mimic similar features in bitmap editing programs such as Photoshop. However, the options for the Drop Shadow filter are itemized in the detail view of Figure 2, and in the upcoming ActionScript discussion (where Bevel options are also discussed). Of particular note are the additional features included in the right of the panel, which will be discussed in the next segment.

Figure 2. The Filters panel (tabbed in the Properties Inspector in the default Flash 8 workspace layout) allows you to set filter options without using ActionScript.

Figure 3. In this detail from the full-size image, the Glow filter is being used (with the optional Knockout option) to highlight an interface element.

For example, adding a glow to a circle and then knocking out the circle itself can leave a nice ring that can be positioned over an element to highlight its importance. Similarly, adding a bevel to a rectangle and then knocking out the rectangle creates a clip that includes just the bevel effect. This can be positioned over a bitmap to create an instant button effect made from bitmap art.

Figure 4. By making a copy of an object, applying the Drop Shadow filter to the copy only, and hiding the object in the copy only, and instant animated drop shadow can be created.

Figure 5. Primary objects can be coupled with their separate shadow-only counterparts and turned into a single new symbol for animation. However, animating them separately (seen here in the “shadow” and “man” layers, respectively) allows for greater control.

Figure 4 shows a shadow cast by the walking man used in the source code distributed with this article. As you can see by the image, it does not appear to be a typical drop shadow. It is typical, however, and the shadow itself is applied the same way any other shadow would be. In this case, illustrated by the before and after views, it is applied to a copy of the man, which has been skewed and slightly scaled. Then the Hide Object feature of the Drop Shadow filter has been enabled so the man himself disappears.

How does this improve your animation? It will add a touch of realism to the way your shadows appear. Adding a simple drop shadow to the man will appear slightly realistic only if your character is running very close to a wall. This flat look can be seen in the walk_filters_01.fla source code sample. However, by creating a copy of your character to render the artistically placed shadow, both the character and skewed shadow will animate making it look more realistic even if your character is in an open field. The improved result, shown in these figures, can be seen in the walk_filters_02.fla in the accompanying source code.

Figure 6. By tweening the shadow and main object separately, custom animations can be applied to each. For added realism, the discreet shadow here is scaled and faded independently when the character jumps.

If simplicity is a significant goal, you can combine both the primary object and its shadow copy into one new Movie Clip. However, if you tween the shadow element separately, as seen in Figure 5 and walk_filters_03.fla, you can exert more control over each element.

For example, the walk_filters source files 04 through 06 that accompany this article demonstrate, with increasing degrees of detail, how animating the shadow and character separately can make an action like a jump seem more realistic. Figure 6 shows how a motion guide is used to make the character jump, and the discreet shadow is scaled and slightly faded to make the distance from the ground seem more believable.

I’ve also taken a little time to show you how you may be able to improve your animations throughout this process. In walk_filters_04.fla, you will see that adding the jump, without manipulating the shadow, doesn’t appear very real. In version 05, the shadow is also scaled and faded slightly, which appears more realistic. Finally, in version 06, the character Movie Clip is set to show a frame of the walk cycle that looks more appropriate during a jump. This way it doesn’t look like the man is just being elevated magically during his walk.

ActionScript Control
The other method of applying filter effects is through ActionScript, where extensive control is supported. Essentially, the process involves loading a built-in filter class, assigning its parameters, and then applying it to a Movie Clip instance. In the final example file included with this article, walk_filters_final.fla, a script has been added to the first frame that will automatically create a button from the walking man Movie Clip. In the passage that follows, I’ll explain each numbered line of the complete script. (If you can’t use the script in the accompanying source code, be sure to remove the line numbers when copying from this page.)

1   manButton.gotoAndStop("jump");

First, as shown in line 1, send the character Movie Clip to a frame that works well as a static image. Use the same frame you used to simulate the character jumping. Moving on…

2   var filterArray:Array = new Array();3   import flash.filters.DropShadowFilter;4   var dsFilter:DropShadowFilter = new DropShadowFilter(7, 180,     0x000000, .5, 10, 10, 1, 1, false, false, false);5   filterArray.push(dsFilter);

To allow for more than one filter to be used at one time, you will eventually apply the filters in an array?creating an empty array, as shown in line 2. Then, in line 3, import the required DropShadowFilter class from Flash 8’s class library. Next, create a new DropShadowFilter effect and specify the required parameters.

Each filter is a little bit different, but line 4 shows the Drop Shadow filter requires a distance offset from the object casting the shadow (seven pixels), an angle in which the shadow will be cast (180), a color of the shadow (0x000000, or black), an alpha value of the shadow (.5, or 50 percent), a horizontal and vertical blur value (both 10), the Strength (1, or 100 percent), the Quality (1, or Low, specifying the default behavior of the filter being applied once), and false values for Inner Shadow, Knockout, and Hide Object.

Finally, add the filter you just created to the empty array you created earlier in line 2, so you can apply it to your object in the next step. Continuing…

6-8 //code will be added9   manButton.filters = filterArray;10  manButton.onPress = function():Void {11      this.filters = [];12  }13  manButton.onRelease = function():Void {14      this.filters = filterArray;15      play();16  }

You’ll be adding another filter in just a moment, so leave room for lines 6 through 8.

Start the effect by applying the filter array to the Movie Clip instance “manButton.” This will initialize the up state of the button before user interaction. Next, create onPress and onRelease event handlers to trap mouse events. In the onPress event handler (lines 10-12), empty the object’s filters property by applying an empty array, thereby removing the array containing the Drop Shadow filter you created. This will remove the shadow making it look like the button has been pressed down to the surface of the Stage. In the onRelease event handler (lines 13-16), reinstate the filters array you created, and play the file.

Finally, you need the stop action to stay in frame 1 awaiting user interaction.

17  stop();

To demonstrate the use of multiple filters on a single object, add a second filter?this time, a Bevel.

6   import flash.filters.BevelFilter;7   var bvFilter:BevelFilter = new BevelFilter(5, 45, 0xFFFFFF,     .8, 0x000000, .8, 10, 10, 1, 1, "inner", false);8   filterArray.push(bvFilter);

Line 6 again imports the appropriate filter class, line 7 again sets the filter parameters, and line 8 again adds the filter to the user-defined array.

The Bevel filter requires a pixel size for the bevel (5), an angle for the highlight/shadow (45), a highlight color and alpha (0xFFFFFF, or white, and .8, or 80 percent), a shadow color and alpha (0x000000, or black, and .8, or 80 percent), a horizontal and vertical blur for the bevel (10), a Strength (1, or 100 percent), a Quality (1, or Low), a bevel Type (inner, rather than an outer or both), and a value of false for the Knockout option.

The code you created earlier remains unaltered. With the new filter added to the array, the clip will have both a shadow and a bevel in the up state, and neither when the mouse is pressed on the clip.

import flash.filters.*;

Additional Uses and Examples
From a tutorial standpoint, the examples contained in this article are necessarily brief. However, there are many additional implementations and uses of Filters.

For example, the Adjust Color filter can be used to manipulate hue, saturation, brightness, and contrast, offering subtle color changes not formerly possible with the color object or Tint color effect. The Blur filter can add a bit of realism to animations by simulating movement subtleties with motion blur. The fact that this can now be done with ActionScript means that dynamic animations (scripted, random, or even user-controlled) can now have motion blurs. Flash Player engineer Tinic Uro recently demonstrated how to use filters to offer high contrast interfaces for accessibility needs. Check out the Related Resources list (left column) for more information. Finally, I’ve posted some additional bonus examples that are a bit outside the scope of this article, including the ability to animate filters using ActionScript. These, too, can be found in the Additional Resources section.

I hope this article has given you a jump-start in the use of runtime filters. Just remember that injudicious use of filters can cause performance hits so use them intelligently and test early, test often, test multi-platform. If you enjoyed this article, please rate it and/or drop me a line. See you next month!