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 3

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.

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 added

9   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.

Author's Note: If you intend to work with several filters at a time, you can simplify the class import step discussed previously by importing all filter classes at once. To do so, use an asterisk wildcard in place of the filter name to import all filter classes:

import flash.filters.*;
Thereafter, you need only use the new constructor to create each filter object.

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!

Rich Shupe is president of FMA, a full-service multimedia development and training facility based in New York. He is a regular Flash columnist for DevX and coauthor of the upcoming "Flash 8: Projects for Learning Animation and Interactivity" and the upcoming "Learning ActionScript 3.0," (both published by O'Reilly). FMA develops web and disc-based products for clients including McGraw-Hill, Phillips, 20th Century Fox, and Nickelodeon, and trains digital media professionals in Flash, ActionScript, HTML, JavaScript, and more.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date