1. Trang chủ
  2. » Công Nghệ Thông Tin

Học Actionscript 3.0 - p 26 pot

10 355 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 10
Dung lượng 5,18 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

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 t

Trang 1

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 OT 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 OT 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 OT E

Loading a bitmap from an external source is discussed in Chapter 13.

N OT 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.

Trang 2

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 OT 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

Trang 3

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 OT 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 OT E

In the next section, we’ll use a blend mode to add true eraser functionality to this basic drawing application.

Trang 4

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

Trang 5

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 OT E

For more information about matrices, see Chapter 7.

Trang 6

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 overlappremov-ing 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

Trang 7

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

Trang 8

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 OT 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 OT 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

Trang 9

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

Trang 10

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 OT 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

Ngày đăng: 06/07/2014, 18:20