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


Make Your Files More Expressive with Runtime Filters : Page 2

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.

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.

Enhancing a Filter's Impact with Additional Techniques
Most filters have a limited number of additional features that allow you to achieve some special effects unique to that filter. Figure 3 shows a few such examples, including hiding the original Movie Clip and either rendering just the effect intact, or "knocking out" the original clip leaving a "hole" in the rendered effect.

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.

It's true that you can accomplish similar things using shapes with alpha gradient fills, and cutting out part of the fill, but the thing to remember is that filter effects are very dynamic. All relevant parameters can quickly and easily be changed without having to recreate any art. Nothing illustrates this better than a drop shadow used with a hidden object.

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.

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