Học Actionscript 3.0 - p 26 pot

The BitmapData Class
Chapter 9: Drawing with Pixels
229
opacity, and then 0000FF, or blue, for the color. The result of this script is a
100 × 100–pixel, 100-percent opaque, blue square positioned at (0, 0).
Creating Bitmaps with Transparency
To create a bitmap data object with transparency, you must change the third
parameter of the class constructor to
true and then reduce the opacity of the
color value. The first pair of characters in the hexadecimal number (from
left to right) represents alpha (AA in the 32-bit format listed previously). The
acceptable alpha range is 00 (fully transparent) to FF (fully opaque). For
example, the following code, found in the bitmap_from_scratch_transparency.
fla source file, creates a green square that is 50-percent transparent. The alpha
value is 80, or half of the alpha range. The color that follows is then 00FF00,
or green, corresponding with the RRGGBB format.
1 var bmd:BitmapData = new BitmapData(100, 100, true, 0x8000FF00);
2 var bm:Bitmap = new Bitmap(bmd);
3 addChild(bm);
Using a Bitmap from the Library
If you need to work with an actual bitmap image, rather than originating your
own
BitmapData object, you can add an imported bitmap dynamically from
the library. You can use the bitmap_from_library.fla file from the accompany-
ing source code for this exercise, or use your own image. You must have an
image already imported into the library and have given it a class name in the
Linkage Properties dialog.
In our sample source file, a 550 × 400–pixel image of penguins has been
given the linkage class name
Penguins. Discussed briefly in Chapter 8, the
base class for a library bitmap is

BitmapData. This allows you to easily access
the data without requiring that you first create an instance of the
Bitmap. If
you want to display a bitmap, objects for both
BitmapData and Bitmap must
be created.
The following three lines, found in the bitmap_from_library.fla source file,
create both objects, and add the bitmap to the display list.
1 var penguinsBmd:BitmapData = new Penguins(550, 400);
2 var penguinsBm:Bitmap = new Bitmap(penguinsBmd);
3 addChild(penguinsBm);
In the section “Creating Opaque Bitmaps” earlier in this chapter, we said that
the first two parameters of the
BitmapData constructor, width and height, are
required. This makes sense when you’re creating bitmap data from scratch,
but is a bit inconsistent when instantiating a bitmap from the library.
Thinking about your past experience with creating movie clips and text
fields, for example, it may be more intuitive to try this:
var penguinsBmd:BitmapData = new Penguins();
N O T E
The hexadecimal value 0x80 is equiva-
lent to 128, or half of the 0–255 range
for red, blue, green, and alpha channels
of a color.
N O T E
When adding a linkage class name to
a symbol, you needn’t actually create a
class file first. The compiler will create
an internal placeholder for you, which
will automatically be replaced by an

actual class should you later decide to
create one. For more information, see
the “Adding Custom Symbol Instances to
the Display List” section of Chapter 4.
N O T E
Loading a bitmap from an external
source is discussed in Chapter 13.
N O T E
Typing your bitmap data instance as
BitmapData, rather than the linkage
class name (
Penguins, in this case) is
more flexible because any bitmap data
can be put into the variable. However, if
you want your data type checking to be
stricter, you can type to the linkage class
name, instead:
var penguinsBmd:Penguins = new
Penguins(550, 400);
This will restrict the variable to accept-
ing only the
Penguins data.
Download from Wow! eBook <www.wowebook.com>
Part II: Graphics and Interaction
230
The BitmapData Class
However, in earlier versions of most ActionScript editors, including Flash
Professional CS3 and CS4, this will cause the compiler to generate the error:
Incorrect number of arguments. Expected 2. This behavior has been improved
in Flash Professional CS5, which will no longer issue this error, allowing you

to create a
BitmapData instance from a library bitmap in a manner consistent
with the instantiation of many other objects.
Fortunately for users of older ActionScript compilers, the exact width and
height values are not required when using a preexisting bitmap (as in the
preceding penguins example). The
BitmapData class will update these values
and the data will be placed into the instance variable without scaling. If you’re
uncertain about the dimensions of the bitmap you want to instantiate, just
use (0, 0).
Copying Pixels
In the previous example, you populated an instance of the BitmapData class
with a bitmap. But what if you want to work with only a portion of a bitmap?
You can simply copy pixels from one
BitmapData instance to another. The exer-
cise that follows uses the
copyPixels() method to create a new penguin bitmap
by copying a segment from another bitmap. The method is called from a new
BitmapData instance (into which you’re copying) and requires three parameters:
the source object, a rectangle defining the pixels to be copied, and the destina-
tion point in the new object to which the pixels should be copied.
The following code is found in the copy_pixels_stage_click.fla source file.
Lines 1 through 3 create the original penguin bitmap, as seen in the prior
example. Line 4 adds a listener to the stage to call the
onClick() function
when the mouse is clicked. This is where the pixel copying takes place, which
we’ll explain after the code.
1 var penguinsBmd:BitmapData = new Penguins(550, 400);
2 var penguinsBm:Bitmap = new Bitmap(penguinsBmd);
3 addChild(penguinsBm);

4 stage.addEventListener(MouseEvent.CLICK, onClick, false, 0, true);
5
6 function onClick(evt:MouseEvent):void {
7 var rect:Rectangle = new Rectangle(290, 196, 95, 170);
8 var penguinCopyBmd:BitmapData = new BitmapData(95, 170);
9 penguinCopyBmd.copyPixels(penguinsBmd, rect, new Point());
10
11 var penguinCopyBm:Bitmap = new Bitmap(penguinCopyBmd);
12 penguinCopyBm.x = 385;
13 penguinCopyBm.y = 196;
14 addChild(penguinCopyBm);
15 }
Line 7 defines the rectangle required to specify the area you want to copy.
The
Rectangle class requires the rectangle’s x and y location, and width and
height. Figure 9-2 shows these values in a detail of the source material. We
want to reference the area outlined in red, which is 95 × 170, but begins at
(290, 196) from the upper-left corner of the bitmap.
N O T E
For improved compatibility with multi-
ple ActionScript compilers, we’ll contin-
ue to use 0 for width and height when
creating a
BitmapData instance from a
bitmap symbol of unknown size. Those
of you using current compilers can try
omitting these values, if you prefer.
x: 290, y: 196
w: 95, h: 170
Figure 9-2. A detail of the source image

with the area to be copied marked in red
Download from Wow! eBook <www.wowebook.com>
The BitmapData Class
Chapter 9: Drawing with Pixels
231
Line 8 creates a new BitmapData instance the size of the desired rectangle.
Line 9 concludes the copy process by copying the pixels into the new
BitmapData instance, using the original source (penguinsBmd), the area to be
copied (rect), and the destination for the copied pixels. We want to copy the
pixels into a new bitmap, so for the last parameter, we just use a default
Point
instance to copy into (0, 0) of the new bitmap.
Finally, lines 11 through 14 create a new bitmap from the copied pixels, posi-
tion it next to the original penguin, and add the new bitmap to the display list
so it appears atop the original. The result is seen in detail view in Figure 9-3.
By design, this exercise demonstrates that not all display objects are interac-
tive. The preceding code attached the mouse listener to the stage because we
can’t attach a listener to a bitmap.
If you want a bitmap to serve as a button, however, you can place the bitmap
into an interactive display object, such as a sprite. In the code excerpt that
follows, found in the copy_pixels_sprite_click.fla source file, note that the step
to add the bitmap to the stage, and the stage listener (lines 3 and 4 from the
preceding script), have both been removed. In their place (indicated by the
bold code), the bitmap is placed inside a new sprite and a listener is attached
to that sprite, rather than the stage.
16 var penguinsBmd:BitmapData = new Penguins(550, 400);
17 var penguinsBm:Bitmap = new Bitmap(penguinsBmd);
18 var sp:Sprite = new Sprite();
19 sp.addChild(penguinsBm);
20 addChild(sp);

21 sp.addEventListener(MouseEvent.CLICK, onClick, false, 0, true);
Drawing into a Bitmap
Sometimes it’s simpler to draw the entire contents of a bitmap data source
into another, rather than copying pixels. For example, this is often true when
you want to draw into a bitmap repeatedly or build bitmaps from mul-
tiple sources. Let’s demonstrate this by actually painting on a canvas. In the
paint_tool.fla source file, we’ll create two simple, one-color circular brushes
and the user will be able to switch between them by pressing the Shift key. In
this section, we’ll match the color of one brush to the color of the canvas for
a simple eraser effect. Figure 9-4 shows an example of a painted area with a
swatch of color “erased” in the middle.
The no-interface functionality of this simple example calls for a dual role
for the mouse—both painting and erasing. So we’ll start the following script
by declaring a Boolean variable to track the mouse state. We then create
an empty canvas to hold our bitmap painting and add it to the display list
(lines 3 and 4). Lines 6 through 10 prepare the drawing surface by creating an
empty white
BitmapData object the size of the stage, populating a bitmap with
that data, and adding the bitmap to the canvas sprite. Each time the bitmap
data is updated, the display bitmap will reflect the change.
N O T E
For more information about the
Rectangle or Point classes, see Chapter
7.
Figure 9-3. A detail of the SWF after the
pixels have been copied
Figure 9-4. A detail of drawing into a
BitmapData object with brush and eraser
N O T E
In the next section, we’ll use a blend

mode to add true eraser functionality to
this basic drawing application.
Download from Wow! eBook <www.wowebook.com>
Part II: Graphics and Interaction
232
The BitmapData Class
1 var mouseIsDown:Boolean;
2
3 var canvas:Sprite = new Sprite();
4 addChild(canvas);
5
6 var w:Number = stage.stageWidth;
7 var h:Number = stage.stageHeight;
8 var bmd:BitmapData = new BitmapData(w, h, false, 0xFFFFFFFF);
9 var bm:Bitmap = new Bitmap(bmd);
10 canvas.addChild(bm);
11
12 var brush:Sprite = createBrush(0x000099);
13 var eraser:Sprite = createBrush(0xFFFFFF);
14 var tool:Sprite = brush;
15
16 function createBrush(col:uint):Sprite {
17 var sp:Sprite = new Sprite();
18 sp.graphics.beginFill(col);
19 sp.graphics.drawCircle(0, 0, 20);
20 sp.graphics.endFill();
21 return sp;
22 }
Lines 12 through 22 finish the tool setup by creating a brush and an eraser.
Both tools are created by the same function, each passing in a different color;

blue for the brush and white for the eraser. The
createBrush() function
returns a new sprite with an opaque circle of the color requested, with a
20-pixel radius. Line 14 initializes the tool’s default state to using the brush,
rather than eraser.
In the next script segment, a trio of listeners controls the brush/eraser func-
tionality. The mouse down event listener function (lines 30 through 37) first
sets the
mouseIsDown Boolean to true so the app will know to alter the can-
vas. Then in line 32, a conditional checks to see if the
shiftKey property of
the incoming mouse event is
true, indicative of whether the user is holding
down the Shift key when the mouse is clicked. If so, the
tool variable is set
to
eraser. Otherwise, tool is set to brush. The mouse up listener (lines 39
through 41) resets
mouseIsDown to false, as the user is neither painting nor
erasing. This combination of listeners toggles the paint/erase functionality
with every mouse click.
The enter frame listener function,
onLoop() (lines 43 through 49), starts by
placing the tool at the mouse location so the user is ready to draw or erase.
It then uses a conditional to determine whether the mouse is down. If so, the
appropriate tool is drawn into the
BitmapData instance used by the canvas.
We’ll talk about the matrix used by the second parameter of the
draw()
method after the code.

23 canvas.addEventListener(MouseEvent.MOUSE_DOWN, onDown,
24 false, 0, true);
25 canvas.addEventListener(MouseEvent.MOUSE_UP, onUp,
26 false, 0, true);
27 canvas.addEventListener(Event.ENTER_FRAME, onLoop,
28 false, 0, true);
29
N O T E
In this painting example, note that nei-
ther brush nor eraser is added to the
display list. A display object does not
need to be in the display list to draw it
into a bitmap data instance.
Download from Wow! eBook <www.wowebook.com>
Blend Modes
Chapter 9: Drawing with Pixels
233
30 function onDown(evt:MouseEvent):void {
31 mouseIsDown = true;
32 if (evt.shiftKey) {
33 tool = eraser;
34 } else {
35 tool = brush;
36 }
37 }
38
39 function onUp(evt:MouseEvent):void {
40 mouseIsDown = false;
41 }
42

43 function onLoop(evt:Event):void {
44 tool.x = mouseX;
45 tool.y = mouseY;
46 if (mouseIsDown) {
47 bmd.draw(tool, tool.transform.matrix);
48 }
49 }
In line 47, we added a second argument to the draw() method: a matrix used
to transform the pixels drawn.
By default, no transformations of the source or destination
BitmapData
instances are performed by the
draw() method. The resulting effect is that
the bitmap data from the source object at point (0, 0) will be drawn into
the canvas at point (0, 0). That wouldn’t make a very interesting painting
program because changes would only appear at x, y coordinate point (0, 0)
in the canvas.
For this exercise, therefore, we can’t merely copy the tool bitmap data; we also
need the location of the brush (or eraser) relative to point (0, 0). The second
parameter of the
draw() method is designed to process any such changes by
using a matrix. In this case, we care about the translation values for x and y,
meaning the degree to which the x and y values of the source differ from (0,
0). Using the matrix, pixel data that was offset from the origin of the source
BitmapData instance will be drawn into the destination source BitmapData
instance using the same offset from its origin. The
tx and ty values of the
matrix will be updated when the
x and y values of the tool are changed with
the mouse movement. In other words, if the brush is used at (100, 100), it will

be drawn into the canvas at (100, 100).
Blend Modes
Not every bitmap manipulation requires building BitmapData objects from the
ground up. Sometimes you may need to just apply a quick effect—to bitmaps
and vectors alike—to get the result you want. One of the most basic, yet very
useful, effects you can apply is a blend mode—a means of blending two or
more sets of visual data to create a unique appearance. ActionScript supports
a set of these compositing behaviors similar to the blending modes used in
Adobe Photoshop (in the Layers panel, for instance). Though ActionScript’s
N O T E
For more information about matrices,
see Chapter 7.
Download from Wow! eBook <www.wowebook.com>
Part II: Graphics and Interaction
234
Blend Modes
set of blend modes is understandably smaller than Photoshop’s, many of the
most widely used modes (such as Darken, Multiply, Lighten, Screen, Overlay,
and Hard Light) are available.
The syntax required to apply a blend mode to a display object or
BitmapData
object is very simple. The object’s
blendMode property is set to one of the
blend mode values, typically via a constant of the
BlendMode class that identi-
fies each mode by name. Here’s an example:
dispObj.blendMode = BlendMode.DARKEN;
Let’s take a look at a practical example that combines a couple of blend
modes. One of the modes used is Darken, which preserves the darker value
of each of the red, green, and blue color components of every overlapping

(foreground and background) pixel. This mode is typically used for remov-
ing a light background in an overlapping image. Figure 9-5 shows a bitmap
of the word Waikiki, on a white background, overlapping a blue sky. When
a Darken blend mode is applied to the overlaying image, the white will drop
out because the underlying blue sky in the bottom image is darker.
The second mode used in this example is Overlay, which adjusts the compos-
iting method of the foreground element dynamically, based on the darkness
of the background. If the background is lighter than 50 percent gray, the ele-
ments are screened, resulting in a bleaching effect. If the background is darker
than 50 percent gray, the elements are multiplied, resulting in a darkening
effect.
Figure 9-6 shows the resulting effect of the Darken blend mode applied to the
“Waikiki” image, and the Overlay blend mode applied to an orange gradient,
which turns reddish after blending with the blue sky. The gradient alters the
color of the blue sky to hint at the color-rich sunsets typical of tropical areas.
The code for this example is found in the blend_modes_darken_overlay.fla
source file. The FLA contains the bitmaps shown in Figure 9-5, with linkage
classes
Beach and Waikiki.
Lines 1 through 3 of this script review the process of adding library bitmap
symbols to the display list, described earlier in this chapter. The beach
image is the first to be added to the stage. Lines 5 through 16 review the
steps required to create a gradient fill, as described in Chapter 8. This fill is
linear, evenly distributed with an orange color from 100-percent opaque to
100-percent transparent, measures 310 × 110 pixels, and is rotated 90 degrees.
The rotation is specified in degrees and converted to radians, thanks to the
conversion function in lines 24 through 26.
The blend modes are applied in lines 14 and 21. The canvas sprite, into which
the gradient is drawn, is assigned the Overlay mode, changing a harsh orange
gradient to a simulated sun-saturated skyline, in which the orange is applied

based on the darkness of the clouds and the sky. The text is assigned the
Darken mode, so only the word “Waikiki” remains visible after compositing,
Figure 9-5. Two overlapping images (word
and photo) prior to the use of blend modes
Figure 9-6. The finished composition with
the Darken blend mode applied to the
word, and the Overlay blend mode applied
to a red gradient
Download from Wow! eBook <www.wowebook.com>
Blend Modes
Chapter 9: Drawing with Pixels
235
the white background having dropped out because white is lighter than all
red, green, and blue color components of the background.
1 var beachBmd:BitmapData = new Beach(310, 256);
2 var beach:Bitmap = new Bitmap(beachBmd);
3 addChild(beach);
4
5 var gradType:String = GradientType.LINEAR;
6 var matrix:Matrix = new Matrix();
7 matrix.createGradientBox(310, 110, deg2rad(90), 0, 0);
8 var colors:Array = [0xFF6600, 0xFF6600];
9 var alphas:Array = [1, 0];
10 var ratios:Array = [0, 255];
11 var canvas = new Sprite();
12 canvas.graphics.beginGradientFill(gradType, colors, alphas,
13 ratios, matrix);
14 canvas.graphics.drawRect(0, 0, 310, 110);
15 canvas.blendMode = BlendMode.OVERLAY;
16 addChild(canvas);

17
18 var waikikiBmd:BitmapData = new Waikiki(310, 76);
19 var waikiki:Bitmap = new Bitmap(waikikiBmd);
20 addChild(waikiki);
21 waikiki.blendMode = BlendMode.DARKEN;
22 waikiki.y = 10;
23
24 function deg2rad(deg:Number):Number {
25 return deg * (Math.PI / 180);
26 }
ActionScript Compositing Blend Modes
Even if you only glance at Figure 9-6, you’ll probably recognize the effects
of these traditional blend modes. However, we’d like to call your attention to
three ActionScript-specific blend modes that aren’t as easy to grasp: Layer,
Alpha, and Erase.
Layer
Layer is an extremely useful and welcome problem solver. In brief, Layer
creates a transparency group for a display object container. It precomposes
any contents of the container into a virtual layer so that an effect applied
to the container will alter the container as a whole, rather than altering each
individual element. This can be made clearer by demonstrating this effect.
The top of Figure 9-7 shows a movie clip that contains three additional movie
clips: two adjacent squares, red and blue, and a green square of the same
dimensions centered on top of the underlying red and blue squares. If you
were to apply a 50-percent alpha value to the parent movie clip, you might
expect the parent movie clip opacity to be reduced by 50 percent, produc-
ing a lighter version of exactly what you saw on the stage. Unfortunately,
ActionScript effectively goes into the parent clip and applies a 50-percent
alpha reduction to each of the children individually.
Download from Wow! eBook <www.wowebook.com>

Part II: Graphics and Interaction
236
Blend Modes
The result, shown in the middle of Figure 9-7, is what you’d expect to see
when applying a 50-percent alpha value to each square. However, when you
want the entire container to fade, the default behavior produces an unpleas-
ant effect. Because each of the squares is partially transparent, their colors
blend, creating four bands. Left to right, the first is 50-percent red, the second
is 50-percent green overlapping 50-percent red, the third is 50-percent green
overlapping 50-percent blue, and the fourth is 50-percent blue.
When applying the Layer blend mode, however, the children of the parent
movie clip are composited together as a single item and the alpha value is
correctly applied to the container, not separately to each child within. As a
result, you see the expected appearance of the original three colors all at 50
percent, as seen in the bottom of Figure 9-7.
N O T E
The blend_mode_layer.fla source file includes an interactive example toggling the
application of the Layer blend mode to the three color boxes, as seen in Figure 9-7.
Alpha and Erase
Layer mode also facilitates the use of two more blend modes, Alpha and
Erase. The functionality of each is straightforward. Given a foreground dis-
play object with alpha data, such as a movie clip with a partially transparent
PNG inside, the two modes behave this way: Alpha knocks out a background
element using the foreground element’s alpha channel, and Erase does the
opposite, knocking out the background using the nontransparent pixel data
of the foreground element. The effects of each can be seen in Figure 9-8. The
overlying image is an opaque star on a transparent background. The white
areas are actually missing from the underlying image, showing the stage
beneath.
The important item to note, however, is that these effects work only when

applied to display objects that are inside a display object container (such as a
movie clip) and only when the Layer blend mode is applied to the container.
The child elements must be composited together first for the effect to be visible.
In other words, if you used the same movie clip with semitransparent star
PNG therein, and placed it on top of the same background beach image on
the stage (rather than inside a movie clip), the beach image would not be
affected even if the Alpha or Erase blend modes were applied to the star.
Instead, it would cause the foreground element to disappear altogether.
N O T E
Push Yourself: Try to apply what you’ve learned and create a dynamic version of the
example described in the “Alpha and Erase” section of this chapter. The blend_mode_
alpha_erase_assets.fla source file contains the beach and star images. After giving
this a try, look at the blend_mode_alpha_erase.fla source file. It includes an interac-
tive example toggling the Alpha and Erase blend modes shown in Figure 9-8.
container 100% opacity; no blend mode
container 50% opacity; no blend mode
container 50% opacity; Layer blend mode
Figure 9-7. Original (top), default 50%
opacity (middle), and 50% opacity after
applying the Layer blend mode (bottom)
Figure 9-8. The Alpha (above) and Erase
(below) blend modes
Download from Wow! eBook <www.wowebook.com>
Bitmap Filters
Chapter 9: Drawing with Pixels
237
Using Blend Modes with BitmapData Instances
Blend modes can also modify other ActionScript objects, including instances
of the
BitmapData class. Earlier, we created a drawing program that used

brush and eraser tools to paint on a canvas. In that simple example, the eraser
tool was nothing more than a brush set to the color of the canvas, giving the
illusion of erasing what you painted.
However, the
draw() method used in that example takes, as its fourth argu-
ment, a blend mode, and we can use the Erase blend mode to erase brush-
strokes instead of paint over them. Remember that the Erase blend mode uses
the foreground content to erase the background content. In the example paint
program, this means it will use the eraser tool pixels to erase the bitmap data
of the canvas.
The following modification to the earlier example is found in the paint_tool_
erase.fla source file. All we have to do is replace the use of the single
draw()
method in the prior script, at line 44, with a conditional statement. The con-
ditional checks to see if the current tool is the brush. If so, it uses the same
code as the previous example, drawing into the canvas bitmap data without
using a blend mode (line 45). However, if the current tool is not the brush
(which means the user is erasing content) the modified
draw() method is
used, with the Erase blend mode (lines 47 and 48).
1 function onLoop(evt:Event):void {
2 tool.x = mouseX;
3 tool.y = mouseY;
4 if (mouseIsDown) {
5 if (tool == brush) {
6 bmd.draw(tool, tool.transform.matrix);
7 } else {
8 bmd.draw(tool, tool.transform.matrix, null,
9 BlendMode.ERASE);
10 }

11 }
12 }
Bitmap Filters
Filters have been a mainstay of graphics editing programs for years, add-
ing special effects to images and illustrations with a minimum of effort.
ActionScript has a number of filters for your number-crunching manipula-
tion. Although there are no official classifications for filters, we’ve divided
the filters we discuss into two sections: basic and advanced. Using Adobe
Photoshop for comparison, basic filters are like Layer Styles—quick, easy-
to-apply effects with limited functionality—and advanced filters are more
robust and are more like the features found in Photoshop’s Filters menu.
N O T E
The third parameter of the draw()
method is used to transform the color
of the bitmap data, which is not a part
of this example. However, to use the
fourth parameter, arguments for the
first three parameters must be pro-
vided. The first is mandatory, and is
the
BitmapData instance we’re draw-
ing. The second is optional, and is the
transform matrix we’re using. The third
is a
colorTransform instance, which we
aren’t using. In its place, we send in the
parameter’s default value,
null. Supplying
these three values then allows us to pro-
vide the fourth value, our blend mode.

Download from Wow! eBook <www.wowebook.com>
Part II: Graphics and Interaction
238
Bitmap Filters
Basic Filters
A good place to start when learning how to control filter effects with code
is with a subset of filters found both in Flash Professional’s Properties panel
and in their own ActionScript classes. These filters include DropShadow, Blur,
Glow, Bevel, GradientGlow, and GradientBevel. This convenient overlap lets
you play around with Flash Professional’s interface to see how various proper-
ties affect the appearance of the filter. You can then apply that understanding
to your code settings later on. The advantages to using ActionScript over the
Flash Professional interface include the ability to apply changes dynamically
at runtime and reuse your code more easily.
For the most part, the properties of the ActionScript filter classes correlate
closely with the properties found in the Properties panel for the same filter,
providing a smooth transition to ActionScript without much effort. Let’s use
the
DropShadowFilter class in the next example, to create button artwork
without custom graphics.
Creating dynamic button art with the DropShadowFilter
The following script, found in the drop_shadow_button.fla source file, simu-
lates a two-state button by using a drop shadow. At rest, the button has a
small drop shadow, but when a user clicks the button, the drop shadow is
removed as if the button is being pressed down to the screen. This effect is
shown in Figure 9-9.
The script begins by creating the drop shadow filter. Once created, it can be
applied to objects at any time. An instance of the aptly named class is created
in line 1. Individual properties are then set in lines 2 through 4. In this case,
the degree of blur in the x and y directions is set to 10, and the opacity of the

shadow is set to 60 percent. Other properties, including the angle of the shad-
ow and its distance offset from the display object, use their default values.
Lines 6 through 11 use the
Graphics class discussed in Chapter 8 to create a
basic, yellow rectangle with rounded corners and add it to the display list.
Line 13 is where the shadow is applied. The display object property,
filters,
accepts an array of filter instances so that more than one filter can be applied.
In this example, only
DropShadowFilter is used so only the ds filter instance
is placed into the array. At this point, the application of the filter is complete,
and the sprite is added to the display list in line 14. However, this example
changes with mouse interaction, so let’s look at its interactive elements in the
next code block.
1 var ds:DropShadowFilter = new DropShadowFilter();
2 ds.blurX = 10;
3 ds.blurY = 10;
4 ds.alpha = 0.6;
5
6 var sp:Sprite = new Sprite();
7 var g:Graphics = sp.graphics;
8 g.lineStyle(1, 0x000000);
N O T E
There’s no class in the flash.filters
package for the Adjust Color filter found
in Flash Professional’s Properties panel.
However, Flash Professional users can
use the
AdjustColor class found in
the

fl.motion package. If you’re not
using Flash Professional, advanced filter
classes that appear a little bit later in
the chapter can mimic Adjust Color’s
filter results.
Figure 9-9. An interactive element with
DropShadowFilter applied (above) and
removed (below) to simulate the pressing
of a raised button
Download from Wow! eBook <www.wowebook.com>