Learning Flash CS4 Professional phần 7 doc

If you place one movie clip each in layers 1, 2, and 3, no change in the z-depth of any of the movie clips will change the visual stacking order imposed by the layer in which each appear

Animating 3D Properties

Chapter 8, 3D 213

Any rotated or translated child will be affected by a change to its parent If

a child appears small and far away, for example, due to a positive z position,

rotating the parent 180 degrees automatically brings that child far into the

foreground You’ll see this effect of rotating children with multiple depths

when you learn more about parallax scrolling later in the chapter

The important thing to take away from this discussion is that you don’t need

to select objects as a group, reposition the 3D center point, or switch between

global and local transformations using this technique Once the children are

positioned where you want them inside the parent container, all you need to

do is transform the parent, and you’re done

Animating 3D Properties

One of the best parts of having 3D properties integrated into the Flash CS4

Professional interface is that you can animate them as easily as you can

ani-mate 2D properties—even in tweens Figure 8-17 shows a movie clip rotating

180 degrees around the x- and y-axes (the faded frames have been inserted in

the illustration to show you the progress of the tween)

An animation rotating an image 180 degrees around the x- and y-axes

Figure 8-17

You can use the Motion Editor panel (discussed in Chapter 5) to achieve

this animation effect Before applying the 3D transformations, set up a

simple motion tween that moves the movie clip from one side of the stage

to another:

Open

1 tween3d_01.fla from the companion source files This file has one

movie clip on the Stage at point (70, 200)

Right-click (Windows) or Control-click (Mac) the movie clip and select

2

Create Motion Tween from the pop-up menu 23 frames are added to

the tween span, and the playhead should be in frame 24 Right-click or

Control-click again and enable 3D Tween from the same menu

Select the movie clip on the Stage with the Selection tool and, using the

3

Properties panel, change its x position to 480

As you did in Chapter 5, you have completed a 2D motion tween, and you

can see the path taken by the movie clip You can even scrub through the

Timeline to watch it move If you like, compare your work to tween3d_02.fla,

then move on to add the 3D transformations.

Animating 3D Properties

Open the Motion Editor and scroll down to the

properties As usual, the first keyframe in any tween is provided

Scroll horizontally until you can see frame 24 Click the frame numbers in

5

the Motion Editor panel to place the playhead in this frame

In the Keyframe column, click the center diamond to add a keyframe in

6

the Rotation X and Rotation Y rows of the Motion Editor

In the same frame (frame 24), use the Value column to set both properties

7

to 180 degrees Your Motion Editor panel should look like Figure 8-18 The graph for both Rotation X and Rotation Y properties should slant up and to the right between frames 1 and 24 Figure 8-18 shows the playhead midway through the tween, when both rotation values have just passed

90 degrees

The

Figure 8-18 Motion Editor showing x, y, and z rotation values

Save your work if desired (it will not be used in the portfolio project) and test your movie Your movie clip should spin around both x-and y-axes as

it moves across the Stage, as depicted in Figure 8-17 and demonstrated in

tween3d_03.fla

Based on this experience, you can probably see the benefit of having Flash’s 3D features—basic though they may be—integrated directly into the author-ing interface While you certainly will have more control over 3D objects when using ActionScript, at least you can accomplish a few simple effects without knowing a lick of code

Depth Management

Chapter 8, 3D 215

Depth Management

There are drawbacks, however, with Flash’s integrated 3D feature set The

biggest shortcoming is the lack of automatic z-sorting, or sorting movie clip

stacking order based on the value of their z positions, called z-depth in most

z-sorting discussions Because the z-axis represents depth in the 3D world,

z-sorting restacks elements when they overlap, based on their depth along

the z-axis

This is easily demonstrated by placing your hands in front of your face Hold

both hands up about a foot or so in front of your face, and about a foot apart

from each other This represents two movie clips with the same z position,

or depth Now move your right hand another foot away from your face Your

right hand is now farther away, or has a larger z value Now move your hands

horizontally so they overlap in your line of vision Your left hand is in front

of your right hand because its depth is closer to your point of view It would

obviously be wrong if your right hand were in front of your left, because your

right hand is further away

Unfortunately, Flash doesn’t handle the z-sorting for you If you place one

movie clip each in layers 1, 2, and 3, no change in the z-depth of any of the

movie clips will change the visual stacking order imposed by the layer in

which each appears This limitation doesn’t apply only to layer order, either

If you set up the same three movie clips correctly in the same layer, so the

stacking order matches your desired z-depths, everything will be fine If

you then select the frontmost movie clip and send it behind the others

(Modify→Arrange→Send to Back), the z-depth will remain the same, but

visually, the movie clips will overlap in the wrong order

Figure 8-19 illustrates this point Figure 8-19(a) shows three movie clips in

the same layer, stacked in an arrangement that matches their z-depths Figure

8-19(b) shows three similar movie clips, each in its own layer, but layered in

a manner that does not reflect their z-depths Even though the movie clip

in layer 4 has the highest z-axis value, it does not appear behind the other

movie clips, because it resides in a higher layer Finally, Figure 8-19(c) shows a

similar arrangement, but this time the movie clips are in the same layer and

their stacking order doesn’t match their z-depths

Unfortunately, there are only two ways to conquer this problem The first way

is to manually manage your stacking and layering orders so they don’t

con-flict with the desired depths of your 3D objects This is fine for work in the

Timeline, but not helpful for dynamic or interactive scenarios In these cases,

you must use custom ActionScript to sort and reorder your display objects

In the “Using ActionScript to Change 3D Properties” section, later in this

chapter, you will learn how to explicitly set the z value of any movie clip

However, maintaining a running inventory of all movie clips, and properly

sorting their depths based on when they overlap, requires quite a bit more

effort and is beyond the scope of this book The book’s companion website,

z: 15 Layer: 1

(a)

(b)

(c)

z: 15 Layer: 4

z: 15 Layer: 5

z: 10 Layer: 1

z: 10 Layer: 3

z: 10 Layer: 5

z: 5 Layer: 1

z: 5 Layer: 2

z: 5 Layer: 5

z-depth, correct in example

Figure 8-19

(a), does not override layer order (b) or conflicting single-layer stacking order (c)

In the meantime, remain alert to awkward z-ordering and try to compensate

by shuffling the layer or stacking order of your assets When motion tweens require depth changes, impossible to achieve in a single tween, you can usu-ally adjust your work by splitting your tweens into multiple segments, each in its own layer and using layer order to provide better depth management This technique, too, is covered on this book’s companion website

Parallax Scrolling

Parallax scrolling is an effect that shows the appearance of depth during

movement The principle behind parallax scrolling is simple: as you move past objects at different depths, closer objects will seem to rush by faster You’ve probably experienced this effect yourself on a road trip or train ride Imagine you are sitting in a window seat in a car or on a train as it embarks

on a trip across the countryside Outside the window you see rocks at the edge of the road or track Some distance beyond the rocks is a row of bushes, and further beyond the bushes is a row of trees Finally, far off at the horizon

is a mountain range

As the car or train picks up speed, the rocks rush past your window Although moving quickly by, the bushes don’t seem to be traveling as fast as the rocks The distant trees are moving slower still, and the mountains appear to be stationary

This effect is also used in 3D to give the illusion of depth Figure 8-20 shows the rocks, bushes, trees, and mountains previously described If you placed these elements in their own layers in the Flash Timeline and animated them

in a normal 2D manner, they would all scroll at the same time However, if you push each element further back along the z-axis, all four elements will reside in different depths and scroll by at different speeds

Figure 8-21 shows such an arrangement, but rotated in 3D space so you can clearly see the depth between layers Because of scaling along the z-axis, objects closer to the viewer are wider than the smaller objects in the distance

As such, when all layers scroll by the viewer’s eye, the foreground layers move faster than the background layers

You will use this technique for the Gallery screen of the portfolio project The foreground elements will eventually be components (added in the next chapter) that will load in external assets The graphics behind the component layer will scroll through the gallery at different speeds, giving the illusion of depth

Four individual layers

Figure 8-20

intended for a scrolling movie clip

Scrolling assets, after

Figure 8-21

z-translation is applied; this clip is rotated

on the y-axis to illustrate parallax effect

Using ActionScript to Change 3D Properties

Chapter 8, 3D 217

Using ActionScript to Change 3D

Properties

Manipulating 3D objects with ActionScript is, in many ways, as simple as

transforming display objects in two dimensions Using a handful of

proper-ties, you can do just about everything the 3D Flash interfaces can do For

example, translating a movie clip in 3D space uses x, y, and z properties

Assuming you’re transforming a movie clip with the instance name mc, here

are examples of all three properties:

mc x = 275;

mc y = 200;

mc z = 100;

Look familiar? It should The x and y properties are the same properties

you’ve been using for 2D manipulations, and the new z property is consistent

in use

Rotation is not much different In 2D space, there is only one rotation

prop-erty In 3D space, the three axes around which a movie clip can rotate require

three properties, but the syntax is still similar Instead of the single rotation

property for 2D space, the 3D properties are:

mc rotationX = 10;

mc rotationY = -20;

mc rotationZ = 5;

Even the perspective angle and vanishing point properties are easy to use,

albeit a bit verbose The ActionScript properties themselves are

straightfor-ward enough—perspective angle is called fieldOfView and vanishing point is

called projectionCenter, but they are used like this:

root transform perspectiveProjection fieldOfView = 25;

root transform perspectiveProjection projectionCenter = new Point (0,0);

Changing these values requires a bit more syntax because they are part of a

larger transformation object They’re collected in an object called

perspective-Projection (which also contains other 3D transformation properties) that

is part of the more encompassing transform instance of applicable display

objects, like movie clips

In the preceding example code, the transform object belongs to the root of

the FLA’s display list, the main timeline, which itself is a big ol’ movie clip

This change affects all global transformations, just as you witnessed when

making changes to the perspective angle and vanishing point controls in the

Properties panel

Practical Demonstrations

Here are a few examples of the ActionScript at work A companion source file

is provided to demonstrate each property In all cases, a single frame event

Using ActionScript to Change 3D Properties

listener links mouse movement with a 3D property that manipulates a movie clip with an instance name of mc.

Rotation

The as_3d_rotation.fla example sets the y rotation of a movie clip to the

hori-zontal mouse position As you move your mouse left and right, it looks like you’re spinning a placard on a nail

4

Translation

The as_3d_translation.fla file will set a movie clip’s z-depth to the mouse’s

vertical location (0 to 400)—moving the movie clip into and out of the Stage

4

Vanishing point

The as_3d_vanishing_point.fla file will move the vanishing point to wherever

the mouse is, causing objects to reorient in 3D space First, the location of the mouse is converted into a point (line 7), and the projectionCenter property is then set to that point (line 8) To see the effect work, 3D rotations have been applied to the movie clip in lines 1 through 3

The as_3d_perspective_angle.fla source file will change the field of view using

the mouse’s vertical location Because the mouseY value is divided by 4, and the height of the stage is 400, the initial value is between 0 and 100 However, the perspective angle cannot be 0, so 40 degrees is added to the initial value The result is a demonstration of perspective angles between 40 degrees (a normal lens) and 140 degrees (an extra-wide-angle lens) The movie clip is also translated and rotated to enhance the effect

In this chapter, you will create a parallax scrolling effect that will serve as

the interface for the gallery screen The gallery interface will consist of three

components added in the next chapter Components are precreated

combina-tions of code and graphics designed to complete tasks of varied complexity,

but with little to no additional ActionScript provided by you The gallery

will ultimately present two external graphics and one video, and visitors will

scroll between the three displays with the click of a button

For this exercise, you will need a provided source file, gallery_01.fla This

file differs slightly from a new FLA derived from the book template you’ve

used in prior chapters In this case, the art required for the gallery interface is

already in place The illustrations, shown in Figure 8-22, are typical 2D movie

clips, and it will be your job to manipulate these assets in 3D space

Figure 8-22 Scrolling assets before z-depth is applied

Inside the content movie clip, renamed to GalleryScreen in the Library and

given an instance name of gallery, are the parts required to create a parallax

scrolling interface The content of this movie clip has three layers Two layers

are static and contain an image of a mountain range with a grassy plain and

Project Progress

a button that will advance through the gallery The third layer is a movie clip called parallax, and this will be the focus of your attention.

In the parallax movie clip are four layers The background is a movie clip

of trees, substantially wider than the stage and thus suitable for horizontal scrolling Above the trees are two movie clips containing bushes and rocks, respectively Finally, the foreground movie clip contains artwork of three frames, each labeled with the name of a component that you will add in later chapters

Adding Depth for Parallax Scrolling

To prepare your movie clip for parallax scrolling, you will adjust both the z-depths of layers in the movie clip and the position of the vanishing point:Open

1 gallery_01.fla from the companion source files.

Double-click the

2 gallery movie clip to edit its contents.

Double-click the

3 parallax movie clip to edit its contents.

Ignoring the foreground layer that contains the artwork of three empty

4

frames (which will remain unchanged until next chapter), select the movie clip in the trees layer and give it a z value of 1000 in the Properties panel Select the movie clip in the bushes layer and set its z value to 600 Finally, select the movie clip in the rocks layer and change its z value to

300 With all layers pushed away along the z-axis, the assets are resized and repositioned to achieve a very basic appearance of 3D depth

Looking at the effect of the depth changes, the collection of movie clips is

6

parallax movie clip and go back to its parent clip, gallery.

Click once on the

7 parallax movie clip to select it and, using the Properties

panel, set its 3D x coordinate to 1235 This is the starting point of the parallax scrolling interface and the first thing viewers will see when visit-ing the Gallery screen

Save your work If you want to check your progress, compare your file to

8

gallery_02.fla.

Project Progress

Chapter 8, 3D 221

Animating the Gallery

Now it’s time to create a tween and animate the scroll You will extend your

timeline to 100 frames, change the location of the parallax movie clip over

time, and add a few frames of ActionScript:

Continue with your file or, if you prefer, open

com-panion source files and save that to your own file as your starting point

Double-click the

2 gallery movie clip to edit its contents Don’t worry if

the guide layer is no longer visible This is just a little Flash quirk When

double-clicking a 3D element, the symbol is not edited in place This is

equivalent to editing any symbol by double-clicking in the Library

Right-click (Windows) or Control-click (Mac) on the

and select Create Motion Tween from the pop-up menu

In the Timeline panel, drag the end of the

to frame 100

In the

5 actions, button, and mountains layers, click in frame 100 and press

F5 to add frames When you are finished, all four layers should span to

frame 100

In the actions layer, create empty keyframes (F7) in frames 35 and 70 You

6

will later add stop actions to these frames

Move the playhead to frame 35, click on the

sure it’s selected, and, using the Properties panel, set the x value under 3D

Position and View to 365 The ScrollPane frame artwork should be visible

This will automatically add a property keyframe to your tween, reflecting

the movie clip’s change in x.

Move the playhead to frame 70, make sure the

selected, and set the 3D x value to –435 The FLVPlayback frame artwork

should be visible

Move the playhead to frame 100, make sure the

selected, and set the 3D x value to 1235 The UILoader frame artwork

should be visible This last frame provides an animated return to the first

item in the gallery

Save and test your movie

10

The animation should scroll through the three gallery items, showing

UILoader, ScrollPane, and FLVPlayback frames, and then returning to frame

1 If you look at the assets in the animation, you will see that the frames, rocks,

bushes, and trees all move at a different rate, creating the parallax scrolling

effect This is achieved automatically because Flash’s 3D depth management

handles the scrolling of each layer independently

Project Progress

Adding ActionScript Control

Now that you’ve seen the parallax scrolling effect, it’s time to prepare your file for ActionScript control You will first add stop actions to stop the anima-tion when the three component frames come into view, and then you’ll add a script to react to user button clicks

In the

1 actions layer, add a stop action (stop();) to frames 1, 35, and 70 Frame 100 does not receive a stop action because you want the movie clip to loop back to frame 1 on its own Figure 8-23 shows a detail of the Timeline panel, depicting the layer structure, parallax tween, and added actions

A detail of the gallery movie clip Timeline panel, showing the parallax tween

Figure 8-23

Test your movie once again, and you’ll see that the movie clip doesn’t

2

scroll This is correct, and is due to the stop action in frame 1

Save your work and compare your file to

With the stop actions in place, you will need to add a small script to continue

to preview your file You’ll add this script in the main timeline, rather than inside the gallery movie clip, to make it easier to add it later to the main project file

Using the Edit Bar above the Stage, click on Scene 1 to return to the main

item (the FLVPlayback component frame) is in view, clicking the more

but-ton will cause the movie to return to the first item (the UILoader component frame)

Project Progress

Chapter 8, 3D 223

After you have finished testing, compare your file with gallery_04.fla from the

companion source files

Adding a Layer Mask

When testing the interface, you may notice that the parallax movie clip is

visible to the left of the viewing wheel depicted in the guide layer When you

integrate your gallery assets into the main project file, this will be a problem,

as the gallery interface will appear from under the wheel as you scroll To

prevent this, you’ll add a layer mask to show the parallax movie clip only

within the desired frame

Continue with your gallery file or use

From the main timeline, double-click the

contents

Right-click (Windows) or Control-click (Mac) on the

or icon and select Insert Layer from the pop-up menu Name the new

layer mask

Select the

4 mask layer and, using the Rectangle tool, draw a rectangle

any-where on the stage Using the Properties panel, set its x location to 80, its

y location to 20, its width to 520, and its height to 400

Right-click (Windows) or Control-click (Mac) on the

select Mask from the pop-up menu This will turn the mask layer into a

layer mask and automatically mask the underlying layer, parallax It will

also lock both layers so you can see the mask in effect in authoring mode

Figure 8-24 shows a Timeline panel detail of the gallery movie clip after

adding the mask

A detail of the gallery movie clip Timeline panel, showing the masked

Figure 8-24

parallax tween

Test your movie and scroll the gallery The art should now be visible only

6

within the masked area

Save your work and compare your file to

Project Progress

Adding the Gallery to the Main Project File

Once your parallax scrolling effect is working, you’ll need to add the sary content to the main project file:

neces-Continue with your gallery file or open

From the main timeline, select and copy the

Open the main portfolio project file that you’ve been building over the

3

past several chapters

Scroll to the gallery section of the portfolio project file’s main timeline

4

Select frame 144 in the content layer and, using Paste in Place (Edit→Paste

in Place), paste the gallery movie clip that you copied from your gallery file

Switch back to the gallery file and copy the script from the actions layer

5

Switch once again to the main portfolio file, select frame 147 in the actions

6

layer, and paste the script after the existing stop action

Save your work and test your file The gallery should now work correctly

7

in your main portfolio file (Figure 8-25)

The Gallery screen, after integrating the assets into the main project file

Figure 8-25

The Project Continues

In the next chapter, you’ll add two of the three components destined for the Gallery You will add the UILoader component, which loads external images and SWFs, and the ScrollPane component, which displays details of larger content within a scrolling pane

9CHAPTER

Introduction

Components are wondrous little widgets that add functionality to your

proj-ects with little to no programming required Used by ActionScript neophytes

and veterans alike, their feature sets range from simple to complex Usually,

they contain a graphical front end and integrated code to assist in or

com-plete their purpose However, code-only components are also sometimes used

as ActionScript libraries to expand the capabilities of the language

Components make it possible to accomplish goals without having to reinvent

the wheel That is, when you need a video player, a component can save you

the need to create one on your own This is especially true of oft-used items

such as buttons, scroll bars, menus, and other user interface controls In this

chapter, you will look at all of these kinds of components and more, and you

will add some to your portfolio project Components will enhance the

port-folio by giving users the ability to load external content and display details

of images too large to fit on the screen In Chapter 13, you will complete

your portfolio project by adding video to the Gallery screen using a video

component

There are, of course, limitations that go along with having these features

pro-vided to you in a precreated package For one thing, because you didn’t create

the component yourself, it may not match the look of your project This is

usually not a big problem for applications, but the more unique your project

looks, the more components can stick out To get around this design issue,

you will learn later in this chapter how to skin, or change the outward

appear-ance of the components that are shipped with Flash CS4 Professional

ComPonents

IN THIS CHAPTER

IntroductionAdding and Configuring

ComponentsFunctionality Without

ProgrammingAdding a Pinch of ActionScriptWorking Hand-in-Hand with

CodeSkinning UI Components

Project Progress

Adding and Configuring Components

Another drawback is that components contribute to file size This is not unexpected because they add both code and design elements to your files However, if you are really concerned about file size—such as when devel-oping small advertising banners—this can be an issue In that context, the weight a component adds to a FLA can be significant if the design or ActionScript it uses is complex

In this chapter, you’ll focus primarily on the user interface components that ship with Flash CS4 Professional, each of which adds approximately 15 to 30

KB to your file As another example, the video component that ships with Flash CS4 adds 50 to 65 KB to your file In most cases, this is a drop in the bucket when it comes to the overall size of the average SWF Just keep this in mind if your files are on a diet

Fortunately, Flash CS4’s user interface components have been optimized to

be as slim as possible Not only are most of them smaller than their terparts from prior Flash versions, they are often designed so that graphics are external to the component and shared by several components In fact, in some cases, components use other components for specific functionality A menu component might use a text label component, for example, to display the text in each menu item Shared assets that are used by more than one component are not added to your file again So, with each added component, the contribution to file size diminishes

coun-N OT E

There are hundreds of third-party components available Three good places to

flashloaded.com ).

Adding and Configuring Components

The first step in using a component is to add it to your file The easiest way to

do this is by dragging a component from the Components panel (Figure 9-1)

to the Stage The component then appears on the Stage and in your Library Depending on how the component was built, an accompanying folder of assets may also appear in the Library (Figure 9-2) Typically, you won’t have

to work with this folder at all As described earlier, it may contain assets that are shared with other components, or simply external graphics that you can customize through editing

You can often use the Component Inspector panel (Figure 9-3) to configure a component, thereby controlling its functionality This panel contains editable text fields, menus, and other user entry controls You can select from available options, enter text strings (such as button labels or URLs), and even access

a file browser to locate external files Once configured, the component may

The Components panel

Figure 9-1

The Library after adding a

Figure 9-2

UIScrollBar component

Functionality Without Programming

Chapter 9, Components 227

exhibit an immediate visual change, while other times you will have to test

your movie to see the asset in action

Functionality Without Programming

Especially for ActionScript beginners, components are very attractive because

some can enhance the functionality of your project without a single line of

code This section shows how easy it can be to produce a scrolling text field—

no programming required

Scrolling Text

You can add the UIScrollBar component to a simple Dynamic text field to

give the field scrolling capabilities The outcome of this exercise is shown in

Figure 9-4

Open

1 scrollbar_01.fla from the companion source files.

On the left side of the Stage are a few paragraphs of text You’ll copy and

2

paste this text in a moment

On the right side of the stage is a smaller Dynamic text field You learned

3

in Chapter 2 that Flash Player renders Static text fields as graphics

Dynamic text fields, on the other hand, are optimized for ActionScript

control Using ActionScript behind the scenes, the UIScrollBar

compo-nent will control your text field for you, so the field type used here must

be Dynamic (you’ll learn about programming text in Chapter 11)

Select the field with the Selection tool and look in the Character section

4

of the Properties panel Choose a type family and size appropriate for

scrolling, such as _sans, Arial, or Times, 12 point The sample file uses

_sans, which is the default sans serif typeface used by your computer’s

operating system

Note that the Dynamic text field has a width and height of

respectively The size really isn’t important, but the field needs to be big

enough to accommodate a scroll bar and too small to contain the text you

will eventually paste into it

Copy the large block of text into the clipboard Before pasting the text into

6

the small field you created, select the field and use the Text→Scrollable

menu command to make the text scrollable This will fix the field size at

its original dimensions and prevent overflowing text from resizing the

field

Paste the text into this field If the field changed height to accommodate

7

the pasted text, the field is either not dynamic or is not set to scrolling

Revisit steps 2 and 3 to check your work

Adding a Pinch of ActionScript

Open the Components panel and locate the UIScrollBar in the User

8

Interface category of components Drag it to the Stage and place it directly

on top of the text field This may seem odd, but this step automatically associates the scroll bar with the text field so the code inside the compo-nent knows which field to control without any additional intervention from you

Move the scroll bar to the right side of the text field and set its height to

9

200 using the Properties panel

Test your movie and scroll the text The area used when dragging the

10

scroll bar automatically resizes itself to indicate how much text is lable A very small drag interface element (often called a thumb) means a lot of text is scrollable Conversely, a very long scroll thumb means there may only be a few additional lines of text eclipsed from view

scrol-Look at Figure 9-3 again, and you will see the UIScrollBar options that you can configure in the Component Inspector panel When you dropped the scroll bar onto the text field in step 5 of this exercise, the component auto-matically assigned the field a generic instance name (InstanceName_1, for example) Instead of using this approach, you could manually assign the field

an instance name and type that name into the Component Inspector’s

scroll-TargetName property You could also make the scroll bar invisible and even

choose to orient the scroll bar horizontally instead of vertically

Adding a Pinch of ActionScript

Some components can behave self-sufficiently to a point, but don’t have enough functionality to be useful without a nudge from ActionScript The

Button component is just such a component The button will display

mul-tiple states upon mouse interaction and allows you to customize its ance, but it won’t actually trigger any response from your application unless you assign an event listener in ActionScript

appear-Triggering Actions with Buttons

In this exercise, you’ll add a Button component to the Stage, adjust its text label, and add a few simple lines of ActionScript to make it work When clicked during testing, the button will place text into the Output panel Figure 9-5 shows the button with its new label in action

Create a new file using File

project, so you don’t need to use the book template and you don’t need

to save your work

Drag the Button component from the Components panel to the stage

Working Hand-in-Hand with Code

and multiple button states based on mouse interaction Review the

previ-ous steps, if needed

You probably noticed that the button behaved as it should, but didn’t do

any-thing when clicked For additional functionality you need ActionScript and,

as the button label implies, you will write a short script that traces a message

to the Output panel

Select the button and, using the Properties panel, give the button an

5

instance name of myButton

Open the Actions panel, enter the following script, and test your movie

This script adds an event listener to the button and listens for the mouse

click event When the event is received, the listener calls the onClick() listener

function and traces the message to the output panel If desired, you can

com-pare your work to button_01.fla in the companion source files.

Other features that you can configure in the Component Inspector include

whether or not the button is visible, enabled (disabled buttons are not

inter-active and have a muted appearance), emphasized (visually), and initially

selected (showing a visual change but not automatically triggering any event

listener function) You can also align the label you edited using

labelPlace-ment, and turn the button into a toggle—a button that stays pressed until it

is clicked again This is in contrast to a standard push button, which releases

as soon as you let go of the mouse

Working Hand-in-Hand with Code

So far, the main point of this chapter has been to stress that components can

be strong allies to nonprogrammers That doesn’t mean, however, that their

usefulness is limited to this area The following section will walk you through

the creation of a pop-up menu, or ComboBox You will use increasing

quan-tities of ActionScript until the steps culminate in a code-only solution that

adds the menu to an empty Stage

Navigating with Menus

This exercise will power two menus with which the user can navigate through

the timeline shown in Figure 9-7 Briefly, the four frames at 1, 10, 20, and 30

Configuring a Button

Figure 9-6

component using the Component Inspector panel

Working Hand-in-Hand with Code

each have a stop() action, content, and corresponding label The home frame (1) is empty, and the one (10), two (20), and three (30) frames have illustra-

tions of the numbers 1, 2, and 3, respectively

A simple timeline through which a ComboBox will navigate

Figure 9-7

On the Stage through all the frames (in the navigation layer) are two empty menus You will populate these menus—using the Component Inspector for one and ActionScript for the other—and then write a script that reacts to a user choice from either menu and sends the playhead to the desired frame.Open

1 comboBox_01.fla from the companion source files.

Select the top

2 ComboBox menu and, using the Properties panel, give it an

instance name of inspectorMenu.Open the Component Inspector panel and double-click the

to the frame you want to visit in the Timeline when selecting this menu item This is a simple example use of the data property You learned in Chapter 5 that it’s usually better to use frame labels rather than frame numbers for navigation, and you’ll do that, too

Repeat step 4 three more times to create the values shown in Figure 9-8

5

When you’re finished, click OK and note that the dataProvider value has been populated with the information you just entered (Figure 9-9).Next, click the

6 prompt value and type Navigate This is the word played at the top of the menu prior to its first use Thereafter, the current menu selection will be displayed in this location

Working Hand-in-Hand with Code

Chapter 9, Components 231

Test your movie, and you will see that the ComboBox displays menu

8

items as you would expect it to when interacting with the mouse (Figure

9-10), but it requires ActionScript for any navigation to occur

Other options that you can configure through the Component Inspector

panel include whether or not the menu is visible and enabled, whether it is

editable (allowing the user to change the text that appears in the menu) and,

if so, which characters the restrict property limits the user to when typing a

new menu item

Now it’s time to add ActionScript to the first menu When you’re finished, test

your movie When picking any frame but Home, you should see an

illustra-tion of the corresponding number When selecting Home from the menu, the

playhead will return to the empty first frame:

Select the first frame in the actions layer and open the Actions panel

9

A stop() method should already be in the frame script, so add lines 3

through 6 to the script:

4 onChange(evt: Event ): void {

5 this gotoAndStop (evt target selectedItem data );

}

6

This script creates an event listener that will listen for the event fired when

the menu is changed (line 3) When this event is received, the main timeline

will go to a specified frame and stop (line 5)

Take a close look at how this line works The navigation code is

straight-forward The this identifier references the main timeline because that’s the

scope of the script The gotoAndStop() method moves the playhead The data

property contains the frame number used by the method, but where does

this information come from? The data property is pulled from the menu’s

selectedItem—the menu item the user selected when last using the menu

Note, however, that the menu is not specified by instance name Instead, the

target of the event is queried This means the function can work with more

than one menu

Now it’s time to build the second menu, this time with ActionScript

Select the second menu and give it an instance name of

Working Hand-in-Hand with Code

Notice that you don’t need to use the Component Inspector at all in this stage; the ActionScript replaces that labor Line 7 of the script creates the menu text visible prior to the menu’s first use, and line 12 adds an event listener, listen-ing for the menu’s change event Because your prior listener function doesn’t restrict its use to a specific menu, both menus can use the same function The

evt.target property will automatically determine which menu was used.Lines 8 through 11 replace the work you did in the Values dialog by adding menu items and populating their label and data properties The syntax used for each menu item is an associative array Look back over Chapter 6 for a refresher of arrays if this form is not clear

The final step in this exercise is to rely solely on ActionScript to not only populate the menu, but create it as well As long as the component is in your library, you can create the menu dynamically the same way you can create a movie clip dynamically

Without manually adding another menu to the stage, add the following

19 addItem ({ label : "Home" , data :1});

23 addEventListener ( Event.CHANGE , onChange);

Focus on the first five lines of this script Lines 18 through 23 are essentially the same as the last script you added, but they have been included here for clarity because the reference to the menu has changed

Line 13 includes an import statement, which is an important structure new

to your work in ActionScript thus far Up to this point, you’ve restricted your exercise work to using only ActionScript that the Flash compiler already knows about When using components, however, you must tell the compiler where to look to find their classes so the compiler can validate and compile your code Without this import statement pointing the way to the ComboBox

classes, your script would generate errors telling you that the compiler doesn’t understand the code

Line 14 creates a new ComboBox and stores a reference to the menu in the

dynamicMenu variable This reference is akin to a manually created instance name Line 15 adds the menu to the display list as a child of the main time-line, and lines 16 and 17 set the components position

Test your work and compare it to comboBox_02.fla.