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> . The BitmapData Class Chapter 9: Drawing with Pixels 229 opacity, and then 00 00FF, or blue, for the color. The result of this script is a 100 × 100 –pixel, 100 -percent opaque, blue square positioned. 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, 0x 000 000 ); N. red, the second is 5 0- percent green overlapping 5 0- percent red, the third is 5 0- percent green overlapping 5 0- percent blue, and the fourth is 5 0- percent blue. When applying the Layer blend mode,