How Do I Draw with Code?: Chapter 12 - ActionScript 3.0 Quick Reference Guide
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13

12.13 Applying a Simple Bitmap Filter

Problem

You want to apply simple bitmap filter effects to a display object, such as drop shadow, bevel, or blur.

Solution

Use one of the simple filter classes, including DropShadowFilter(), BevelFilter() or BlurFilter().

Discussion

Applying simple filters to display objects is very easy for two reasons. First, the filter classes are easy to use and work similarly to the way the same filters are applied in the Flash authoring environment. Second, there is a built-in filters property in any display object that can have a filter applied, making it straightforward to set the property to the filters you wish to add.

Creating a filter follows the same pattern as most other instantiations in ActionScript 3.0, using the new keyword. Conveniently, the parameters for setting the values of the filter are all optional, and use default values if none are specified. This means that, at minimum, you can create filters using the following example format, which demonstrates the drop shadow and bevel filters:

var dsFilter:DropShadowFilter = new DropShadowFilter();
var bvFilter:BevelFilter = new BevelFilter();

You can apply the filters just as easily by setting the filters property of your display object. The filters property requires an array to let multiple filters be applied at the same time (such as applying both a bevel and a drop shadow). When applying only one filter, you need only pass a single-item array to the property. The following new script creates a filled rectangle, and applies a drop shadow effect:

var sp:Sprite = new Sprite();
addChild(sp);
sp.x = sp.y = 100;
var g:Graphics = sp.graphics;
g.lineStyle(1, 0x000099);
g.beginFill(0x0000FF, 1);
g.drawRect(0, 0, 100, 60);
g.endFill();

var ds:DropShadowFilter = new DropShadowFilter();
sp.filters = [ds];

If you wanted to apply both a drop shadow filter and a bevel filter, the last block of code would read:

var ds:DropShadowFilter = new DropShadowFilter();
var bv:BevelFilter = new BevelFilter();
sp.filters = [ds, bv];

To manipulate a filter’s settings, you can use different optional settings for each filter. The first batch of settings for the drop shadow filter are relatively intuitive numerical values, in this order: distance offset (pixels), angle (degrees), color (in hexadecimal notation), alpha (decimal percent range, 0–1), extent of blur in the x direction, extent of blur in the y direction, strength (the amount of color applied and degree of spread), and quality (how many times the filter’s applied). The last batch of options are three Booleans that represent the special setting of this filter—whether or not the shadow is cast inside the shape (to represent a “hole” in the canvas, for example), whether or not the underlying shadow is knocked out (revealing the canvas), and whether or not the object casting the shadow is hidden (leaving only the shadow).

So, if you want to create a lighter, softer shadow, cast down and to the left, you might substitute the previous filter instantiation with the following:

var ds:DropShadowFilter = new DropShadowFilter(5, 135, 0x000099, .5, 10, 10);

You can also change values after creating a setting by manipulating the desired property directly. You just have to remember to reapply the filters to the display object after any change. For example, revisit the filter setup at the beginning of this recipe:

var ds:DropShadowFilter = new DropShadowFilter();
sp.filters = [ds];

You could then change a specific setting, such as the angle, in the filter, and then reapply the filter to see your change in action. The following code changes the angle from the default 45 to 135:

ds.angle = 135;
sp.filters = [ds];

This excerpt is from The ActionScript 3.0 Quick Reference Guide. If you're ready to give your Flash projects a considerable performance boost, learning ActionScript 3.0 is a must. This Quick Answer Guide is designed specifically to help Flash designers and developers make the leap from ActionScript 2.0 to the new object-oriented ActionScript 3.0 quickly and painlessly. You'll learn key differences between the two language versions, allowing you to more easily leverage ActionScript 3.0 using Flash CS4 and other Adobe technologies like Flex and AIR.

buy button