The key to understanding Flash is always knowing where you are. You’re given the power to edit everything: static graphics, animations, buttons, and more. It’s easy to become disoriented about exactly on which element you’re working. Let’s start by taking a tour of the primary elements of the Flash workspace:

The white rectangle in the center of Flash’s workspace is called the stage. Text, graphics, photos—anything the user sees—goes on the stage, seen in Figure 9.2. The elements you add are the “actors,” and the stage is where they will perform!

Figure 9.2. The stage is the large white box in the center. All the visual components of an animation are placed on the stage.

Think of the stage as the canvas on which a painter paints or the frame in which a photographer composes pictures. Sometimes you’ll want a graphic to begin outside the stage and then animate onto the stage. The gray area around the outside of the white area is off the stage. You can see the off-stage area only when the View menu shows a check mark next to Pasteboard. (Selecting this option toggles between checked and unchecked.) The default setting (Pasteboard checked) is preferable because it means you can position graphics off the stage.

The stage is quite simple. It is your visual workspace and where most of your animation work takes place. However, two important concepts are worth covering now: stage size and zoom level. By default, the stage is a rectangle that is 550 pixels wide by 400 pixels tall. Later you’ll see how to change the width and height of a movie. However, the specific dimensions in pixels are less important than the resulting shape of the stage (called the aspect ratio). The pixel numbers are unimportant because, when you deliver a Flash movie to the Web, you can specify that Flash scale to any pixel dimension while maintaining a crisp appearance.

Aspect ratio is the ratio of height to width. Any square or rectangular viewing area has an aspect ratio. For example, television has a 4:3 aspect ratio—that is, no matter how big a standard TV screen is, it’s always three units tall and four units wide. 35mm film has an aspect ratio of 3:2 (such as a 4″×6″ print), and high-definition television (HDTV) uses a 16:9 ratio. Most computer screen resolutions have an aspect ratio of 4:3 (640x480, 800x600, and 1024x768). You can use any ratio you want in a web page; just remember that the portion of the screen you don’t use will be left blank. A wide-screen ratio (as wide as 3:1, like film) has a much different aesthetic effect than something with a square ratio (1:1).

A Flash movie retains its aspect ratio when it scales, instead of getting distorted. For example, you could specify that a Flash movie in a web page scale to 100% of the user’s browser window size. You could also scale a movie with the dimensions 100×100 to 400×400.

Not only can you deliver a Flash movie in any size (because Flash scales well), but while working in Flash, you can also zoom in on certain portions of the stage to take a closer look without having any effect on the actual stage size.

Grids and Guides

Additional interesting tools are available from the View menu, including grids, guides, and snap settings. Select View, Grid, Show Grid. Behind all the graphics onstage, you see a grid (which the user won’t see in production). The grid can help you line up graphics perfectly. Notice that you can also select View, Grid, Edit Grid to edit the color and spacing of the grid.

Guides are just like the grid, except you drag them into place where you want them. First, select View, Rulers. Now you can click either ruler and drag toward the stage to create and put into place a single guide. You make vertical guides by dragging from the left ruler, and you make horizontal guides by dragging from the top ruler. To remove the guides, drag them back to the ruler. As with the grid, you find the option to edit the guide settings—as well as a way to lock the guides in place—by selecting View, Guides, Edit Guides. Figure 9.3 shows the stage with a grid, rulers, and several guides active.

Figure 9.3. Use the grid, guides, and rulers to help with positioning.

The Tools panel is the panel with which you will likely become most familiar. Any time you create or edit anything on the stage, you need to have one tool selected from the Tools panel. By default, the Tools panel is a vertical column located on the left of your screen.

Although the Tools panel is used primarily to draw on the stage, it’s also used to edit what you’ve already drawn. Shown in Figure 9.4, the Tools panel provides controls for editing, selecting, and coloring your content.

Figure 9.4. The Tools panel has tools for drawing, editing, and viewing, plus options that vary, depending on the currently selected tool.

The Tools section enables you to create graphics and text (via the Line, Shape, and Text tool), edit graphics (via the Eraser tool and Paint Bucket tool), and simply select graphics (via the Selection tool, Subselection tool, and Lasso tool). The color selector near the bottom gives you control over the color of objects drawn. At the very bottom of the panel are context-sensitive options that modify how certain tools work. Depending on which tool is selected, you might not see anything in the Options section.

We’ll look more closely at some of these tools later, but there is no harm in selecting and trying them out now!

The Timeline contains the sequence of individual images that make up an animation. When the user watches your animation, he sees the images on Frame 1 followed by Frame 2, and so on. It’s as if you took the actual film from a conventional movie and laid it horizontally across the screen, with the beginning on the left and the end toward the right.

Like many other windows, the Timeline can be moved around so it floats just about anywhere on your screen (use the panel menu in the upper-right corner of the Timeline). If you want, you can dock the Timeline under the stage—or nearly anywhere else you want. People who have the hardware to support two monitors have even greater flexibility in the way they organize their workspace. If you completely close the Timeline to make more space (which is possible only when it’s floating), you can always get it back by selecting Window, Timeline.

When you start to create animations, the Timeline includes many visual clues to help you. For example, you can quickly see the length of an animation simply by looking at the Timeline. Also, Flash uses a few subtle icons and color codes in the Timeline; this way, you can see how the animation will play.

Layers

In addition to frames, the Timeline lets you have as many layers as you want in animations. As is the case with other drawing programs, objects drawn in one layer appear above or below objects in other layers. Each layer can contain a separate animation. This way, multiple animations can occur at the same time. By using layer names and special effects, you can create complex animations. Figure 9.5 shows the Timeline and layers of a finished movie.

Figure 9.5. Most animations involve many layers. Each layer is independent of the others.

One important concept is that you can be in only one layer at a time. That is, if you draw or paste graphics, they are added to the currently active layer. The current layer is the layer with the pencil icon, as shown in Figure 9.5. You can just single-click another layer to make it the active layer (notice that the pencil moves to the layer you click). The key here is to always pay attention to what layer you’re currently editing. For example, if the current layer is locked, you won’t be able to affect it at all. Since the Flash Layers panel is virtually identical to that of Photoshop (and Illustrator/InDesign), please refer to Chapter 6, “Using Adobe Photoshop CS3.”

As in the other CS3 applications, the Properties panel displays properties of the currently selected object so you can make adjustments. For example, when you select a block of text, the Properties panel lets you view and change the font face and size. When you select a filled shape, you can adjust the fill color of that shape.

For example, in a new file, you can select the Text tool, click the stage, and then type a few words. At the bottom of the screen you’ll see the attributes for the text within the Properties panel, as shown in Figure 9.6.

Figure 9.6. The Properties panel sets attributes for the active object.

The Library is the best storage facility for all the media elements used in a Flash file. Media placed in the Library can be used repeatedly within a file, and—regardless of how many times you use those media—it doesn’t significantly add to the file size! For example, if you put a drawing of a cloud in the Library, you can then drag 100 copies of the cloud onto the stage (making a whole sky full of clouds), but deep inside the Flash file, only one cloud exists. Using the Library is one way you can keep Flash movies small.

In practice, the Library is used in two basic ways: for editing and for maintaining (or accessing) the Library’s contents. You might need to edit the contents of one Library item (called a symbol), and when you do, you are editing the contents of the Library. You might also need to access the Library to simply organize all the contents or to drag instances of the symbols into a movie. In such a case, you are maintaining the Library (as opposed to editing its contents).

A symbol is the name for anything—usually something visual, such as a graphic shape—you create and place in a file’s Library. Although different types of symbols exist, the idea is that by creating a symbol, you’re storing the graphic once in the Library. After it is in the Library, the symbol can be used several times throughout a movie without having a significant impact on file size.

An instance is one copy of a symbol used in a movie. Every time you drag a symbol from the Library, you create another instance. It’s not a copy in the traditional sense of the word because there’s only one master and each instance has negligible impact on file size. Think of the original negative of a photograph as the symbol and each print as another instance. You’ll see that, like photographic prints, instances can vary widely (in their sizes, for example).

Let’s review the other panels and what they contain. You’ve already seen the primary tools you’ll be using for your work, but there are other useful features as well. Keep in mind that you can rearrange panels—so if your system doesn’t match exactly, someone has probably been customizing things a bit. You can return to the default workspace by choosing Window, Workspace, Default from the menu.

Many panels are hidden initially. If you don’t see one of the groups listed here, look under the Window menu. Following are the other panels you might find useful:

Now that you know where things are, let’s learn a bit about the graphics tools available in Flash. We’ll then review the terminology of animation, and then get started making a simple animation.

Your drawing tools should appear, by default, on the left side of the screen, as shown in Figure 9.7. If the tools aren’t visible, you can access them by selecting Window, Tools.

Figure 9.7. Flash’s drawing toolbar might look simple, but because most tools have additional options, there’s more than meets the eye.

The following sections look at how to draw with these tools. Keep in mind that whereas some tools (such as the Pencil and Brush tools) let you create artwork, others (such as the Selection and Zoom tools) simply help you modify or view your artwork. If you’ve used Illustrator, you’ll feel at home here.

Both View tools—Hand and Zoom—have no effect on artwork. You simply use them to help you see your artwork.

To zoom in to critically inspect or change the artwork in the stage, click to select the Zoom tool (it’s the one that looks like a magnifying glass). Notice that, as with many other tools, when you select the Zoom tool, additional buttons appear in the Options section of the toolbar. You should see two more magnifying glasses appear in the Options area: Enlarge (+) and Reduce (–).

To zoom in or out, just select the appropriate option, and then click the stage. Another way to zoom is to click and drag. You see a rectangle as you drag, and when you let go, that rectangle defines the viewable portion of the stage.

You always see the current zoom level displayed in the pop-up menu at the top right of the stage. If you click the Zoom control pop-up menu, you can return to 100%. Another quick way to return to 100% is to double-click the Zoom tool (not the Enlarge or Reduce option, but the main Zoom tool’s magnifier).

The Hand tool is another non-modifying view tool that helps you navigate the stage without using the scrollbars. To use the Hand tool, simply select it, and then click and drag within the stage area to move your current viewing location.

Although the View tools prove very useful, they can’t change a file. To create artwork in Flash, you have to add to an image, change something you’ve already drawn, or remove some or all of what you’ve drawn. In the following sections, you’ll see how to add to your artwork. This naturally gives you something to change or remove later. Let’s go through each tool individually and then analyze how they can all be used together.

Painting Fills

In Flash, there are two components to any shape you draw: lines and fills. Some shapes are just lines (as you saw in the previous section), but some shapes are just fills (as you’re about to see), and some shapes contain both.

A line has no thickness—only applied stroke attributes. A fill, on the other hand, has a left side, right side, top, and bottom. You can think of lines as the candy coating on an M&M and fills as the chocolate center (if that helps).

The two tools to create fills are the Brush tool and the Paint Bucket tool. To see how these work, it’s easiest to just try them out.

First, let’s look at the Paint Bucket tool. Create a few freehand circles using the Pencil tool—make sure they are complete circles without any gaps.

Next, select the Paint Bucket tool. Notice that the Options section has buttons for Gap Size and Lock Fill.

If you click with the Paint Bucket tool in an empty part of the stage, nothing happens. The Paint Bucket tool fills closed shapes with the selected fill color (the swatch next to the small paint bucket in the Colors section of the toolbox). It also changes the fill color of any fill already created. Change the Gap Size option to Close Large Gaps. Adjusting the Gap Size option should enable you to fill all your circles—even if they were not totally closed.

Now let’s look at the Brush tool. Select it and try drawing a line. Because you’ve used the Brush tool, it’s really a fill (not a line), despite the fact that it might look like a line.

To change the fill color of a brush stroke, use the color swatch in the Properties panel, or just click in the stroke with the Paint Bucket tool to replace the fill.

The Brush tool’s Options area is definitely one you’ll want to explore. The two pop-up menus that appear to be the same are actually quite different. The Brush Size option controls the brush’s tip size. On the other hand, the Brush Shape option controls the brush’s tip shape. For example, you can have a calligraphy look with the angled tip, as shown in Figure 9.8.

Figure 9.8. The Brush Shape option affects the style of a drawing. Here’s a calligraphy effect using the angled Brush Shape option.

Brush Mode, another option, is very interesting and worth investigating. Depending on the mode type, the brush can be limited to only painting within or behind other shapes. It can even be constrained to affect only the current selection.

Creating Text

To create text, you simply select the Text tool, click, and start typing. You can modify the font, color, and style of what you’ve typed after you create it. Modifying your text after it’s typed, although counterintuitive, is usually your best approach because it enables you to fine-tune the appearance within your artwork.

Creating text in Flash is both easy and more sophisticated. Let’s try a few of the tools and see how they work.

Select the Text tool, click the stage, and then type a few words. This click-and-type technique expands the margin for the block of text to the exact width of whatever you type. A circle that appears at the upper-right corner of the text block indicates that the margin will automatically adjust in this way (see Figure 9.9).

Figure 9.9. Creating text is easy. The subtle circle that appears is used to set the margins.

To adjust margins, click and drag the circle. It changes into a square to indicate that the margins are fixed. You can double-click the square margin control to restore the automatic margin adjustment (that is, to make it a circle again).

Now that you have some text in the block and have set the margins, let’s review some attributes that can be modified. Click the Selection tool to stop editing the text. Your text block should become selected. (If it isn’t, just click it once, and a rectangle appears around it.)

With the block selected, use the Properties panel to make modifications, as shown in Figure 9.10. You’ll find these options easy to understand and use. They are very similar to most word processing tools.

Figure 9.10. The Properties panel enables you to change text attributes such as font size and color.

Properties are applied to the entire block of text (if it is selected), or, if you prefer, just select individual words or sentences to have finer grained control over the text’s appearance.

The two basic selection tools are the Selection tool and Lasso tool. The Subselection tool (the white arrow) is for selecting and editing individual anchor points (in the same way the Pen tool created them). Again, if you’ve used Illustrator, this should be very familiar to you.

The Selection tool is used to select an object by clicking it once. The key to the Selection tool is that the cursor changes to tell you what will happen when you click, such as resizing, moving, and reshaping. You can try this tool by adding objects to your document and then moving the cursor around the perimeter of the objects.

Another way to select an object is to marquee it. With the Selection tool selected, click outside the object and drag until you’ve drawn an imaginary rectangle that surrounds it entirely. When you let go, anything within the rectangle (presumably your object) becomes selected.

Sometimes the arrangement of other shapes onscreen makes the marquee technique difficult or impossible. Another tool you can use to make selections is the Lasso tool. Select the Lasso tool and then click and drag around a shape to select it. The Polygon Mode option for the Lasso tool makes the tool act almost like the Pen tool. Select the Polygon Mode option, and click and let go. Then click and release in a new location to extend the selection. Continue to extend the selection and then double-click when you’re done.

Finally, you can decide to select just a portion of a shape. Suppose you want to chop off the top of the circle. You can use either the Lasso tool or the marquee technique with the Selection tool to select the portion desired.

You use the Selection tool to employ the marquee technique. If you click and drag an object, it moves or bends. However, when you click the stage where there are no objects, you see a rectangle appear while you drag (this is the marquee). You can draw that rectangle around other objects, and they will be selected when you let go. Using this marquee technique to select objects is often easier than clicking to select objects.

One what you’ve drawn is to simply change the color. For example, the Paint Bucket tool can change a fill’s color, and the Ink Bottle tool can change a stroke (its color and other attributes). This works fine when you make the effort to first select the fill color, for example, and then select the Paint Bucket tool and click a fill to change it. Sometimes, however, you want one fill to match the color of another. The Eyedropper tool enables you to sample a color from an object that is already onscreen.

The Free Transform tool is your key to advanced modifications. Basically, you just have to select an object with the Free Transform tool active. Four options appear any time you use the Free Transform tool and have an object selected. You can also find these options by selecting Modify, Transform.

Here’s an example:

Free Transform mode can be really touchy, so let’s access the options individually using the option buttons at the bottom of the Tools panel. Select your object, then select the Scale option.

The selected object shows square handles in the corners and on the sides. The cursor changes when you roll over these handles. The corner handles enable you to scale both width and height equally and at the same time. The side handles let you change just width or just height. Click and drag a handle to change the scale. Notice that this version of Scale (compared to Scale in Free Transform mode) can maintain your shape’s proportions (horizontally and vertically).

Next, make sure the square is still selected and select the Rotate and Skew option in the Tools panel. Now the corner handles rotate; side handles skew. Roll your cursor over the handles to see the cursor change.

Click and drag a corner handle and notice that you can rotate the square. Actually, if the default Snap to Objects option is selected (that is, if the magnet button is pressed in), the object snaps into place at 45° angles.

For our next trick, choose the Distort option. Drag the shape by the handles on the corners to distort. It turns out that the Selection tool can create the same effect as Distort, but only when the shape itself has a corner to grab. Without this Distort option, making a distorted ellipse would be nearly impossible. Finally, try holding down the Shift key when you distort (by dragging a corner handle). This way, you can distort two sides evenly.

Finally, the wildest of transformation options is Envelope. To best understand this option, draw a new square, select the Free Transform tool, and click the Envelope button. When your shape is selected, you see many handles. Move the square handles to “influence” the shape. It’s as though the shape tries to touch all the squares, even if they’re pulled out to one side. The circle handles are like the tangents created when you draw using the Pen tool. They control the rate at which a shape bends to reach the square handles.

After you draw a shape, you can at any time smooth or straighten what you’ve drawn. The Smooth and Straighten options are available when the Selection tool is selected. The process is quite simple: You select a shape and click either Smooth or Straighten. Clicking repeatedly continues to smooth or straighten whatever is selected.

By selecting View, Snapping, Snap to Objects (or clicking the magnet button in the Tools panel when the Arrow or Free Transform tool is active), you can draw perfectly round circles, perfectly horizontal or vertical lines, and much more. The visual clue that Snap to Objects is helping you is the dark ring that often appears next to your cursor while you drag. When you see that ring, you know Flash is trying to help you draw.

You might already know from using other software that holding the Shift key constrains your cursor similarly to Snap to Objects. But Snap to Objects can do much more. In addition to helping you draw perfect shapes, Snap to Objects also enables you to connect two shapes. It’s much more than simply making two shapes touch—they actually become bonded. In Flash, unless two shapes have been snapped together, they might look connected when they actually aren’t.

At its most basic, animation is a series of still images. Each image is called a frame. In movies, frames are the individual pictures on the film itself. In Flash, frames are the little rectangular cells in the Timeline. They’re numbered at the top of the Timeline, and every fifth frame is gray; the rest of the frames are white with a gray outline. The Timeline displays all the frames, but normally you can look at the contents of one frame at a time. (Later you’ll see how the Onion Skin option can help you view multiple frames.) The red current-frame marker can be in only one place at a time—the frame you’re currently viewing. You don’t draw into a frame on the Timeline—you draw onto the stage. The current-frame marker indicates the frame whose contents are currently onscreen. Figure 9.12 shows the Timeline in its initial state. Until this movie’s duration is extended, you can’t move the red current-frame marker past Frame 1, and only Frame 1 is enclosed by a solid white box with a hollow circle.

Figure 9.12. The Timeline, with its many cells, is initially only one frame long.

By default, a Timeline is initially one frame long. The current-frame marker is unmovable at that point because it can be placed only in a frame of an animation, and so far the animation has only one frame. When a longer animation is loaded (or created!), the timeline extends. The current-frame marker moves to where you click; be sure to click in the numbered area toward the top of the Timeline—not in the cells, otherwise you’d end up switching layers as well as the current frame.

Another timeline technique is to click and drag the current-frame marker in the number area. As you drag, you see a quick preview of the animation. This technique is called scrubbing. The preview you’re given is dependent on how fast you scrub. Naturally, the frame rate is locked when the user watches an animation. If you select Control, Play or just press Enter, you see this animation play at its correct frame rate. To stop, press Enter again. You should also notice the status area near the bottom right of the Timeline. The three numbers are the current frame number, the frame rate, and the current time elapsed (see Figure 9.13).

Figure 9.13. The status area in the Timeline contains three important numbers related to timing.

Frame rate is the rate at which frames are played back for the user, measured in frames per second (fps). A frame rate of 30 fps means that 30 frames are displayed every second. It is easy to confuse frame rate with speed, but they’re not necessarily the same. If an entire animation uses 10 frames at 10 fps, it might look identical to the same movement using 20 frames if the frame rate is set to 20 fps. Both of these animations take 1 second to finish.

The current frame number (on the left) indicates the location of the red current-frame marker. It changes while you’re playing or scrubbing, reflecting that you can be in only one frame at a time. The frame rate (the middle number) normally indicates the frame rate for the movie on which you are working. However, the number shown can be reduced if, after you play the movie, Flash estimates that it can’t actually keep up with the requested frame rate. It’s not entirely accurate, but it does provide a good estimate. Double-click this number to open the Document Properties dialog and adjust the Frame Rate field accordingly.

Current time (the third number) indicates how long it takes to reach the frame you’re viewing from the start of the movie. For example, how long it takes an animation to play 50 frames depends on the frame rate. At 24 fps, it should take about 2 seconds. At 12 fps, it should take about 4 seconds. The duration of the movie is based on the frame rate.

The numbers in the status area are very important. When you design an animation, you should pick a frame rate and stick to it. When you change the frame rate, you’re changing it for the entire movie. For example, say I have an animation of a character walking, running, jumping, and sitting still for a few seconds. If the portion where he’s walking is too slow and I try to speed it up by increasing the frame rate, that portion might look better. But then the character will run extra fast, his sitting time will go by more quickly—everything will be faster! It’s best to leave the frame rate alone and find another way to increase the speed.

There are ways to change the effective speed. Suppose you have an animation of an airplane moving across the sky. You need to decide the effective speed of the airplane according to the size of the airplane and how much sky you’re showing. If you move the airplane all the way across the screen in 36 frames, you can’t determine whether that’s the right speed unless you consider the frame rate. At 12 fps, the airplane takes 3 seconds to move across the sky.

Effective speed is how fast something seems to move. Actual speed, in comparison, is absolute and can be measured. If an animation uses 12 frames (at 12 fps), the elapsed time of 1 second is the animation’s actual speed. The viewer’s psychological impression determines effective speed. Therefore, you can use illusions to increase or decrease an animation’s effective speed. If a lot of action and changes occur in those 12 frames, it’s effectively fast. If only one slight change occurs, the effective speed is slow. If you extend the animation to take 240 frames, the airplane takes 20 seconds to complete the motion and effectively appears slow because very little is changing from frame to frame. You’ll learn how to do these things later, but for now, it’s only important to understand how the frame rate and the number of frames affect the effective and actual speeds.

To put the animation you’re about to embark upon into perspective, let’s compare some traditional animation media. In a motion picture, the frame rate at which the images appear is 24 fps. Even at this relatively slow rate, you don’t notice the moments when the screen is black. Television plays at 30 fps.

In computer animation, the screen doesn’t blink between frames, but you do have a choice about what frame rate to use. Technically, the user’s monitor will flicker as much or as little as she has it set to flicker, but in any case, it will be much faster than an animation’s frame rate. In computer animation, frame rate affects how frequently the onscreen graphic changes or, conversely, how long it pauses before advancing to the next frame. In practice, if you go much below Flash’s default setting of 12 fps, your user will start to notice jumpiness, and if it’s much higher than 36 fps, it might not perform well on all machines. Remember that traditional movies use 24 fps and look quite smooth.

It might seem that you should always crank up the frame rate as high as you can, which would address the problem of jumpiness. However, it’s not that easy. First of all, more frames can mean that your movie has a bigger file size. Also, it often requires a computer that can display images quickly. If your user’s machine can’t keep up, it slows down the animation and makes it jumpy.

A keyframe is simply a frame in which you establish exactly what should appear on the stage at a particular point. A keyframe might include an image, or it might be blank. A blank keyframe is still a keyframe; it’s just one in which nothing appears on the stage.

In traditional film animation, every frame is a keyframe—that is, something new appears onscreen each frame. In Flash you can make every frame a keyframe, but you can also take some shortcuts. If the first keyframe occurs on Frame 1 and the next keyframe doesn’t occur until Frame 10, there won’t be any changes onscreen during Frames 2–9. The keyframe in Frame 1 establishes what will appear in Frame 1, and it doesn’t change until the keyframe in Frame 10, which establishes what appears then. This is totally appropriate for something that doesn’t need to change every fraction of a second.

Establishing a keyframe is simply a matter of clicking the cell in the Timeline exactly where you want a keyframe to occur. After you click a single cell in the Timeline, select Insert, Timeline, Keyframe (or, better yet, press F6). A couple things happen when you do this. Flash places a keyframe in that frame (indicated by either a solid or hollow circle), and it copies the stage content from the previous keyframe. If at the previous keyframe you have nothing on the stage, a blank keyframe is inserted. If at the previous keyframe you have something drawn on the stage, that shape or symbol instance is copied onto the stage at the new keyframe. This can be convenient because a keyframe gives you a chance to specify both when you want an onscreen change to occur and what the onscreen contents should change to. Often you want just a small change. Creating a keyframe enables you to start with a copy of the previous keyframe’s content instead of redrawing it from scratch.

Whatever you draw in a keyframe continues to be displayed until the Timeline arrives at the next keyframe (blank or otherwise). If keyframes are placed one after another, the screen changes with every frame. If the frame rate is 10 fps, you see 10 keyframes in 1 second.

However, keyframes don’t have to occur one after another. If you insert keyframes at alternating frames, changes appear five times per second (at 10 fps). For any frames between keyframes, you see the content of the previous keyframe, either an image or a blank screen. Say you want a box to appear onscreen and remain still for 1 second before it moves. In one keyframe you draw a box, and then 10 frames later (1 second at 10 fps) you insert a new keyframe in which you can move the box to a new location.

You can put whatever you want in keyframes. The space between two keyframes effectively “holds” the onscreen contents from the first keyframe. Alternatively, you can tell Flash to interpolate the change in a process called tweening. For example, suppose that in one keyframe there is an airplane on the left of the stage. The next keyframe shows the airplane on the right side of the stage. Flash can calculate how to move the first image to the second.

Tweening smoothes out a big change by breaking it into little steps. If a circle at the bottom of the screen jumps to the top of the screen 1 second later (at 10 fps), the change appears abrupt. If the two frames are tweened, you see the circle move a little bit (about 1/10 of the total distance) 10 times. The coarse movement is smoothed out with small changes in the in-between frames. Flash calculates these tweened or interpolated frames so you don’t have to do all the work.

Tweening really is as simple as drawing two frames and making Flash tween the difference. You’ll learn more about tweening later in “Advanced Animation Through Tweening.” For now, you just need to realize that Flash will help you by doing some of the tedious work.

There are three ways to watch an entire animation: scrubbing, playing, and testing. Scrubbing the red current-frame marker is a good way to preview as you work. The only problem with scrubbing is that the speed isn’t consistent—it is only as smooth as you scrub. To play an animation, you select Control, Play; use the Play option on the Controller toolbar; or press Enter. However, as you’ll see later (when creating buttons the user can click, special effects layers such as masks, and animating using movie clips), playing a movie doesn’t always show you exactly what your viewers will see, so I strongly recommend that you avoid previewing by using Play. The best way to view an animation is by selecting Control, Test Movie.

Test Movie exports a .swf file into the folder where your file is saved, names this file the same as your file but with a .swf extension, and then launches the Flash Player program so you can view the results. You’ll see how this works when you first save your source .fla file into a new, empty folder. After you use Test Movie, the folder contains an additional .swf file.

The frame-by-frame animation technique is simple. You just put a keyframe on each frame. An entirely different image appears on each frame—sometimes drastically different, sometimes only slightly different. The beauty is that you can put anything you want in one keyframe because it doesn’t matter what’s in the other keyframes.

Although frame-by-frame animation is a simple concept, it can be a lot of work. Imagine conventional animation, in which an artist must draw each frame even when only a slight change is necessary. It’s detailed, meticulous work and, unfortunately, it’s not really any easier in Flash, although Flash provides functions such as Undo that help. You need to realize that this technique is for situations that require it—such as when you’re working with something that has lots of details, such as an animation of someone walking. No other Flash animation technique gives you this level of control to change each frame.

Just because frame-by-frame animation is a lot of work doesn’t mean you can’t use a little help. One way to make the process a little easier is by changing the Frame View setting. In Figure 9.15 you can see the Timeline pop-up menu. If you select Preview, each frame in the Timeline is displayed as it appears on the stage. Figure 9.15 shows an animation with Frame View set to Preview. Preview lets you see all the frames of the animation without actually stepping through them. The Preview in Context setting draws the preview in the correct proportions (including blank whitespace).

Figure 9.15. The Frame View pop-up menu is available to change the size and character of the Timeline. You can make each frame larger or include a visual preview of the contents of the stage in each frame.

Some of the greatest helpers for frame-by-frame animations are Flash’s Onion Skin tools. Flash’s Onion Skin feature allows you to edit one keyframe while viewing as many frames before or after the current frame as you want.

Click the Onion Skin button (second from the left) at the bottom of the Timeline (see Figure 9.16). Select Large from the Timeline’s pop-up menu. With Onion Skin turned on, you can place the red current-frame marker on any frame you want and edit that frame, and then you see a dim view of the other frames in the animation. Which frames appear depends on where you position the Start Onion Skin and End Onion Skin markers. These markers can be difficult to grab when you try to move them; I often find myself accidentally grabbing the current-frame marker. It’s easiest to grab the markers when Timeline View is set to Large.

Figure 9.16. When Onion Skin is turned on, you can see the contents of adjacent frames.

You would probably turn on Onion Skin while creating an animation (instead of after it’s done).

To change how many frames are seen at a time, you can move the Start and End Onion Skin markers. By default, the markers are set to Onion 2, meaning you can see two frames ahead and two behind. You can move the markers to several preset positions from the Modify Onion Markers pop-up menu (the rightmost Onion Skin button at the bottom left of the Timeline).

Modify Onion Markers has several preset options:

Before we finish with Onion Skin, let’s look at two remaining features: Onion Skin Outlines and Edit Multiple Frames (found immediately to the right of the Onion Skin button). You can choose either Onion Skin or Onion Skin Outlines, but not both. Onion Skin Outlines displays the other frames within the Onion markers as outlines instead of as dim images. Outlines can be helpful when the dim view makes images difficult to distinguish.

Edit Multiple Frames is quite interesting. In the previous example, you used onion skinning to see the contents of surrounding keyframes, but you were editing only one frame at a time—the current frame. You could move the stick man’s leg close to the faded image in the previous frame without affecting the previous frame. Edit Multiple Frames lets you edit the contents of all the frames within the Start Onion Skin and End Onion Skin markers. Generally, Edit Multiple Frames is useful for editing a finished animation rather than for creating an animation because it is difficult to narrow your focus to a single frame. However, when you want to return to an animation and move the contents of every frame, Edit Multiple Frames is invaluable. In this situation, you just turn on Edit Multiple Frames, select Modify Onion Markers, Onion All, select everything on the stage (or press Ctrl+A), and move everything anywhere you want.

There’s no rule that says you must put a keyframe in every frame. If your frame rate is left at the default 12 frames per second (fps) and every frame is a keyframe, the image changes 12 times per second. This might be unnecessary, and it becomes a lot of work when you consider the total number of frames you must draw. What if you don’t always want the images to change every 1/12 second? Incorporating pauses is the answer—and it’s very easy.

To incorporate a pause, you just follow a keyframe with a non-keyframe frame. If you want a 1-second pause (and you’re running at 12 fps), you just follow your keyframe with 12 frames.

There are two ways to create pauses, either as you’re making an animation or after you’ve made one. To incorporate a pause while creating an animation, you either insert a keyframe or insert frames (by pressing F5 or selecting Insert, Timeline, Frame) farther down the Timeline than the next frame.

Creating a pause is slightly different when you want to edit an animation you’ve already created. To insert a pause (or increase one that already exists), you click the keyframe you want to pause and select Insert, Frame. This effectively pushes out everything that appears later in the Timeline.

Each symbol you use from your library is a separate instance. Instances can be positioned in different locations, scaled to different sizes, rotated differently, and have their color effects set differently. There are six ways in which instances can be varied: position, scale, rotation, skew, color, and alpha. Flash can tween changes in all these properties.

A problem with letting Flash do tweening for you is that the result looks like a computer did it—it’s almost too perfect. For example, the bouncing ball from the preceding example moves down at the same rate as it moves up, and the entire animation plays at the same rate.

Flash has a way to address the fact that some kinds of motion accelerate while others decelerate: the Ease In and Ease Out effects. Because every tween is between only two keyframes, you only have to think of two keyframes at a time. Easing in (think “ease into animation”) means that the motion starts off slow and speeds up at the end. Easing out is the opposite—the object starts by going fast and then slows down at the end of its motion.

To add an Ease In effect, just select the first keyframe in a tween animation, then, within the Properties panel, set the Ease slider (a good starting value is 50). Repeat this same action with the final keyframe in the tween animation to ease out of the animation.

Shape tweens are fun because they look really cool and they’re easy to create. Compared to motion tweens, they look more dynamic because every attribute—including the shape—animates. Basically, all you do is draw a shape or shapes in two keyframes and set the tweening in the first keyframe to Shape. For example:

You’ve seen how you can create sophisticated custom graphics very quickly in Flash. Despite how powerful Flash’s graphic creation tools are, eventually you might want to import graphics created elsewhere. Two good reasons for this are to use photographic images or use existing graphics (instead of re-creating them from scratch).

Converting a Bitmap to a Vector Graphic

Drawing applications, Flash included, typically deal with one of two types of graphics—vector or bitmap. Vector graphics are defined by their shape rather than a group of pixels—these graphics are usually illustrations or technical drawings. Bitmap graphics, on the other hand, are defined by setting colors for a group of pixels—one at a time. Bitmap graphics are what you get when you take a picture with your digital camera, for example.

If you import a bitmap graphic into Flash, you’ll find that you don’t have as many options as you do with vector formats. You can’t zoom in without the object getting fuzzy, and you can’t resize or reshape it cleanly. You may also be limited in the effects that can be applied to the graphic.

Flash provides a built-in tool to convert a bitmap to a vector graphic. To do this, select the object and select Modify, Bitmap, Trace Bitmap. The Trace Bitmap dialog box appears, shown in Figure 9.19.

Figure 9.19. Use the Trace Bitmap tool to vectorize an image.

The Trace Bitmap dialog box has several options:

• Color Threshold—. When you’re tracing an image, Flash tries to lump areas of the bitmap into single shapes. The Color Threshold option specifies how different two colors can be (in RGB values) and still be considered the same. If you set this option to a high number, you end up with fewer colors and fewer areas.

• Minimum Area—. This option specifies the smallest area Flash will create. For a very detailed image, this number should be set rather low, unless you want a mosaic effect.

• Curve Fit—. This option affects how closely straight and curved areas will be copied. Using the Very Smooth end of the Curve Fit scale is like having a very large pen with which to draw a shape in one quick movement. If you could use a fine pencil and as many strokes as needed, that would be like the other extreme, Pixels or Very Tight.

• Corner Threshold—. This option determines whether corners are left alone or removed.

Click OK (or Preview to see what’s going to happen), and within a few seconds, a vector version of the image appears in your stage. Keep in mind that the original graphic is still in the Library if you need to go back to it!

Two basic steps are involved in getting audio into a Flash movie. First, you need to import the sound. Then, you need to decide where and how to use it. This is similar to importing graphics. When you import a sound, it’s stored in the Library like an imported bitmap. But a sound is not quite a symbol. Rather, the item in the Library contains all the individual properties of the particular sound.

Flash can import digital audio in a variety of file formats, including the popular MP3 and WAV formats.

As with the graphic formats we looked at earlier, select File, Import, Import to Stage. Choose All Sound Formats from the Files of Type pop-up and then select an audio file to import.

After you select an audio file and click OK in the Import dialog box, you won’t see (or hear) anything different. However, the sound has been imported and now resides in the Library. Just open the Library panel to see it. Now that the movie contains the sound file, you can use the sound.

Using Sounds

Now that you’ve imported sounds into a movie, you can explore how to make them play at the correct times. There’s really only one place you can use sounds in Flash: in keyframes. (One exception is adding sounds dynamically by using the Sound object in the ActionScript language.) If you want a sound to play whenever the user places his or her cursor over a button, you still need to place the sound in a keyframe—it’s just a keyframe in the button.

Now that you know sounds go in keyframes, you need a way to put them there. When you select a keyframe, the Properties panel provides a way to control what sounds play when you reach the selected keyframe. Flash provides other clues for you to “see” where sounds have been placed. For example, if your Timeline is long enough, you’ll see a waveform (a picture of a sound) for the sounds being used.

However, using the Properties panel is the best way to see which sounds have been added to which keyframes. But just like any other panel, the Properties panel displays only the sound used in the selected keyframe.

Sync Settings

When you have the Properties panel reflecting sound for the intended keyframe, you can decide exactly how the sound should play. The most fundamental choice you need to make for each use of a sound is its Sync setting. This controls exactly how a particular instance of the sound will play—or, more specifically, the priority of the sound compared to the visual elements in the animation.

• Event—. This is the default setting and, generally, the best performance choice, especially for sound effects and other incidental sounds. When Event is chosen, sounds will start to play when the keyframe is reached and keep playing until they’re done. Event sounds might not coincide with visual elements the same way on everyone’s machine. Sounds don’t play more slowly or quickly (that would make them sound funny), but a machine with slower graphics performance might take longer to display visual elements.

• Start—. This setting is almost the same as Event, except that multiple instances of the same sound are prevented. With Event, a sound can be layered on top of itself, similar to singing a round. Start, on the other hand, plays a sound if it’s not already playing.

• Stop—. This setting is a bit different—it’s for when you want a specified sound to stop playing. For example, if you import a sound called Background Music and have it playing (by whatever means), when a keyframe is encountered that has the same sound (Background Music) set to Stop, just that sound will stop. Any other sounds already playing will continue. This can be confusing because you use the Properties panel to specify the sound (just as when you want the sound to play), but you specify it as the particular sound you want to stop. Think of Stop as “stop this sound if it’s playing.”

• Stream—. This setting causes the sound to remain perfectly synchronized with the Timeline. Because, again, you can’t have sounds playing slowly if the user’s machine can’t draw frames quickly enough, with this setting, Flash will skip frames to keep up. Stream sounds start playing when the first frame is reached and continue to play as long as there is space in the Timeline.

Effect Settings

The Properties panel provides some fancy effects you can apply to a selected sound. In the pop-up menu next to Effect are effects such as Fade In and Fade Out, as well as Fade Left to Right and Fade Right to Left. To understand and customize these settings further, you can either select Custom from the list or click the Edit button on the Properties panel to access the Edit Envelope dialog box, shown in Figure 9.20, which lets you select from prebuilt panning effects or create your own.

Figure 9.20. Create your own effects to apply to sounds.

Here are additional details for the Effect settings that you can modify in the Edit Envelope dialog box:

• Left Channel/Right Channel—. These panes display different wave forms if your original sound was stereo. Even if you use only mono sounds, you’ll get the left and right channels so you can still create panning effects. In the case of mono, the same sounds will come out of each speaker—you’ll just be able to modify the volume of each.

• Envelope lines—. These indicate the volume level at any particular time in the sound. When the line is at the top, the sound plays at full 100% volume. (Some audio tools are different because they use the middle to indicate 100% and anything higher to indicate amplified or boosted sound, but this is not the case in Flash.) If the envelope line is getting higher as you move to the right, the volume will increase.

• Envelope handles—. These are like keyframes within sound. If you want the envelope lines (indicating volume) to change direction, you need to insert a handle. All you need to do is click anywhere on a line, and a handle will be inserted. No matter which channel you click, a matching handle is placed in the other channel. A handle in one channel must match the moment in time (left to right) of the handle in the other channel. However, the volume (height) can vary between the two.

• Time In marker—. This marker lets you establish the starting point of a sound. You’re effectively trimming the extra sound (or silence) at the beginning of the sound file. You’re not telling the sound to start any later, but the sound you hear will begin wherever the Time In marker is placed.

• Time Out marker—. This marker lets you trim extra sound off the end of a sound file. Often you’ll have a moment of silence at the end of a sound file, and even if you don’t hear anything, it still adds to the file size. You can get rid of it by moving the Time Out marker to the left. You won’t actually destroy the source sound in your Library, but when you export the movie, the unused portions of the sound won’t be used (so your file stays small).

• Stop/Play—. This option lets you preview all the settings you’ve made. This is important because although the waveform can let you “see” a sound, you ultimately want to judge the effect of a sound with your ears.

• Zoom In/Out—. This option lets you zoom out so a large portion of the sound (130 seconds max) fits in the current window or zoom in for a close up to control precisely how you place the Time In/Out markers or envelope handles.

• Display Units (Time or Frames)—. This option simply changes the units displayed (in the center portion) from time units (seconds) to frame units. Time is not as useful as frames when you want to match sound to a particular frame (where something visual occurs). If the display shows a peak in the music at one second, you have to use frame rate to calculate exactly to which frame that translates. With the display set to Frames, Flash does the calculations for you.

In the not-too-distant past it was impossible to find a website that could display video and ensure that the majority of your viewers could see it. With the inclusion of video support in Flash and the advent of services like YouTube, that has obviously changed.

Importing from a File

Importing video into Flash is really no more involved than importing other media types, such as sound or graphics. It really is as easy as selecting File, Import, Import to Stage (or Library), and then selecting a video.

Again, as with the sound and graphic files, you can limit your selection to supported video types by choosing All Video Formats from the Files of Type/Enable pop-up menu.

Did you Know?

You probably are wondering about the Import Video selection under the File menu’s Import submenu. Don’t worry, this is just another way to get to the same place we are already.

After you’ve selected the video file and clicked OK, the first of a four-step Video Import dialog box appears, asking where the video file is located. Chances are, you’ve already picked the file so you can immediately click Next, as seen in Figure 9.21. If you want to use a file off of a remote server, you can click the Already Deployed radio button and provide a URL to the remote video.

Figure 9.21. Import your video from your computer or a remote site.

In the second step, seen in Figure 9.22, you choose how you will be deploying the video. You can choose to deploy it as everything from a standalone progressive download from a web server; to a streaming service, such as YouTube; to Flash-supported mobile devices; or you can embed the video in your existing Flash file for playback in the Timeline. This option is probably what you want, unless you’re simply interested in creating standalone video files.

Figure 9.22. Choose your deployment method.

By the Way

When you use a QuickTime movie, you can choose to link the video—this does not embed the video and is likely not what you want.

Assuming you’re embedding the video, click Next to access the Embedding settings, shown in Figure 9.23.

Figure 9.23. Choose how the file will be embedded into your Flash project.

Three primary symbol types can be used for embedded video:

• Embedded Video—. Ties the movie to your existing Timeline. This is most likely the embedding type you want.

• Movie Clip—. Movie clips maintain their own internal timeline that is separate from the main Flash Timeline.

• Graphic—. Movies embedded with the graphic symbol type cannot be manipulated with ActionScript (which we’ll be using shortly). This is probably not the option you want.

You are also given the option of importing the audio track as integrated or separate. An integrated audio track is tied directly to the video as it was when it was imported. If you choose to separate the tracks, the audio can be manipulated independently of the video.

If you want to choose which part of the video to import, click the Edit the Video First radio button, otherwise choose to Embed the entire video. You’ll probably find that it’s easiest to use a dedicated movie editing package to edit your video prior to importing it than to use Flash’s editing options.

Click Next (Continue on Mac OS) to continue to the final step. The last step in the import process lets you set video compression as well as other advanced settings, such as cropping. Although there are dozens of settings, the easiest approach to this part of the process is to choose an appropriate profile using the Flash Video Encoding Profiles pop-up menu, as seen in Figure 9.24.

Figure 9.24. Use profiles to quickly pick an appropriate compression setting.

The higher the quality of the profile, the more bandwidth the client will need to display the video smoothly.

Click Next/Continue to finish the import process. It may take several minutes to import your video, depending on the size. After it is complete, you should be back in Flash, with the video you just imported in your Library (or, depending on your selection, already on the stage).

Creating a button is no more difficult than making a new symbol and choosing a button behavior. To do this, draw any shape you want. Click Modify, Convert to Symbol and, when prompted (as shown in Figure 9.25), provide a name for the button and select the button type.

Figure 9.25. Buttons are surprisingly easy to create.

If you test your movie, you’ll notice that your mouse cursor now changes when you place it over the button.

Making a button looks easy, doesn’t it? Even though you did make a button in the preceding task, it probably falls short of your expectations in two general ways: It doesn’t look like a button and it doesn’t act like a button. (Currently nothing happens if you click the button while testing the movie.) We’ll address the issue of making the button do something in the next section, “Using ActionScript and Behaviors to Create Nonlinear Movies.” For now, though, let’s look at how the button itself can be made more interactive.

To work with buttons, you must first understand the states that a button can have: Up, Over, Down, and Hit.

The up state contains the visual look of the button in its normal state. Over contains the look for when the user hovers his cursor over the button. Down is how the button looks when the user clicks it. Hit is a special state in which you place a visual representation of what portion of the button you intend to be clickable. This is what the user must “hit” in order to see the over and down states.

Follow these steps to create states for the button:

All your ActionScript is typed into the Actions panel. Open the Actions panel and follow along as we explore. Select Window, Actions, and make sure you fully expand the panel, as seen in Figure 9.27.

Figure 9.27. The Actions panel has several components.

The Actions panel has the following features:

Syntax is unique to each programming language. Every piece of ActionScript has a very specific syntax that must be followed. As an analogy, consider how every email address has to have the form name@domain.something or it won’t work. Flash has no mercy for invalid syntax—you’ll see errors appear in the Output window until you resolve the errors. Even after you perfect the script, the movie might not play exactly as you had in mind. Luckily, there are plenty of ways to ensure that your scripts have perfect syntax.

You can easily add an action from the Toolbox by double-clicking or dragging it to the right side of the Actions panel (the Script pane). You can build a complex set of instructions, one line at a time. A statement is a code sentence that uses only words from the ActionScript language.

Again, actions are instructions. Flash will follow each line of code in sequence. Some actions are complete pieces of instruction, with no additional modifications on your part. For example, you can add a stop action, and when Flash encounters it, the playback head will stop advancing. However, many actions require that you provide additional details (called parameters). For example, the action gotoAndPlay (which goes to a frame and starts playing) requires that you provide the additional detail about to which frame number or frame label you want to go.

The easiest way to understand ActionScript is by performing some actions and using parameters. You’ll see that some actions are quite simple. The following example is a quick exercise that uses actions and parameters to make the last few frames of an animation loop. After you complete it, we’ll step back to analyze what you did in the example:

As easy as the preceding example was, there is one thing in particular that could make it better. Consider the amount of work involved if you changed the location of the keyframes. For example, what if the second keyframe (Frame 20) had to move to Frame 25? Of course, the initial tween would take longer to play, and the rotation would be quicker, but the loop would also stop working properly. To fix it, you would need to remember to edit the action in Frame 30 so that it read gotoAndPlay(25);. You would have to repeat this fix every time you changed the location of the keyframe where the rotation starts.

You just saw how placing one action in a keyframe and changing its parameters makes the playback head jump to a different frame. Step back a second and consider what else you’ve learned. Actions are instructions that you want Flash to follow. Actions do things. You can modify actions by changing their parameters. This is all good information; however, if actions are instructions, exactly when does Flash follow those instructions?

The answer depends on where you put the actions. You can put actions both in keyframes and on any object type, such as button instances, movie clip instances, and components. In the preceding example you placed an action in a keyframe. In that case, the action was executed (that is, the instruction was followed) when the playback head reached that frame. If you put an action in Frame 10, it would not be followed until the playback head reached Frame 10.

With an action in a keyframe, the user doesn’t do anything but wait for the playback head to reach the appropriate frame to see the action happen. Although this isn’t exactly interactivity, it’s quite powerful. For example, often it’s useful to place a stop action in the first frame so the movie initially appears paused and won’t play until a play action is encountered (usually when the user clicks a button). Another example might be when you want to stop in the middle of an animation. All you need is a keyframe and a stop action. There are many more types of keyframe actions, which are good for when you want something to happen at a certain moment in the animation—not just when a user clicks.

Putting an action in a keyframe causes the action to execute when that frame is reached. However, putting an action on an instance of a button makes the action execute when the user clicks the button. The decision of whether to put an action in a keyframe or a button is simple. If you want an action to occur when a particular frame is reached, put it in a keyframe. If you want an action to occur when the user acts (for example, when he clicks a button), put the action in an instance of the button.

Keyframe actions are pretty straightforward: You just assign them to keyframes. Button actions, however, require that you specify to which mouse event you want the action to respond. Do you want the action to respond when the user presses the button or when the user releases the button? Maybe you want the action to execute when the user rolls over the button. This level of detail gives you the power to make an action perform exactly as you want.

Mouse events are specific situations that refer to exactly how the user is interacting with a button. For example, one mouse event is press and another is release. When you specify to which mouse event you want an action to respond, you are specifying exactly when the action is to execute. Only in actions attached to objects do you need this extra level of specificity because actions in keyframes simply execute when the keyframe is reached. All mouse events include the word on followed by the actual event name in parentheses (for example, on(press)).

Again, the best way to see how mouse events work is to try it out. Let’s add to the preceding example buttons that enable the user to stop and continue the animation while it plays:

For almost all interactive elements you create in Flash, you’ll always need both parts: the event and the actual actions. In the case of scripts placed in keyframes, you don’t specify any events because keyframe scripts are executed when Flash reaches the correct frames.

You’ve seen how to place actions in keyframes and on button instances. Most of the actions you’ll encounter are likely to fall into one of those two cases. However, there’s a third place where you can attach actions: in instances of movie clips. It’s a little confusing because, unlike with buttons, you can put actions inside a master movie clip in the Library. However, the rule that you can only put actions in keyframes, button instances, and movie clip instances remains—so if you put any actions inside a movie clip, you have to put them in one of those three places (keyframes, nested buttons, or nested clips) inside the clip. We’ve already discussed putting actions on buttons and in keyframes—and those techniques will work inside master movie clips. But now you’re going to see how actions can also be placed on instances of movie clips.

Actions on movie clips are powerful. It would get complicated to fully explore this feature now, but you can do an exercise that gives you a taste. These steps show you how to attach actions right onto clip instances:

There are a few important things to note about the preceding example. First, the movie clip events mouseDown and mouseUp respond to any mouse click—not just to clicks on the movie clip itself. If you want something that responds to clicks right on a graphic, using a regular button is easier.

Also, the actions you attach to a movie clip instance apply only to that instance. It might be more explicit if you precede stop() and play() in all cases in the preceding example with this., as in this.stop() and this.play(). This makes more sense when you think about it because it means just that one movie clip will stop or play. You can prove this to yourself several ways. Drag another instance of your movie clip from the Library (and don’t attach any actions to this instance). When you test the movie, the stop and play actions apply to (or “target”) only the clip with the actions attached.

Finally, this example shows that you can write code to respond to various events (in this case, load, mouseDown, and mouseUp). For each one, you have the two pieces of bread plus the meat in the middle. What I haven’t mentioned yet is that you can stack the sandwich with many layers of meat. That is, for one event, you can trigger several lines of code. For example, when the mouseDown event occurs, you could have a sound start playing in addition to triggering the play() action. As long as you put your code between the two curly braces, one event can trigger as many lines of code as you want. (This is also true with buttons and on events.)

The basic things to remember are that just as with buttons, actions on movie clip instances are wrapped inside events. Buttons respond to the on event, whereas movie clips respond to the onClipEvent. Finally, actions attached to movie clip instances affect only the particular instances to which they’re attached.

You have enough of the basics of scripting down to move on to behaviors. Behaviors are intended to make programming easier for novices, but in my opinion, you’ll get a lot more out of them if you understand what they’re doing. Behaviors simply insert several lines of ActionScript in one swoop. For scripts that require you to specify parameters, the behavior will prompt you for data. Another interesting feature of behaviors is that even after you’ve inserted a complete script, you can come back and make edits to it without touching the code. That is, you can use the Behaviors panel as your interface to edit the underlying code.

Because Behaviors are inserting ActionScript, be sure to keep your Actions panel open and watch what occurs in the Actions panel as you make changes—this will help you understand what is going on in your project and may give you some additional insight into ActionScript syntax.

Open the Behaviors panel, which should resemble Figure 9.29.

Figure 9.29. The Behaviors panel is used to add functionality to components without messy scripting.

The Behaviors panel has the following features:

The whole idea of the Behaviors panel is that it will insert the ActionScript code for you. Most behaviors prompt you for additional details so parameters can be set. Also, if you need to re-edit a behavior, you can do it through this panel. Actually, you can tweak any behavior by editing the resulting code by using the Actions panel. If you edit the code through the Actions panel, however, you not only potentially break it, but the Behaviors panel can’t access code after you’ve changed it.

Using the getURL Action

Whereas the gotoAndPlay action jumps the playback head to another frame, getURL jumps the user to another web page. If you’re familiar with how a hyperlink works in HTML, you should know that getURL is the same thing. With gotoAndPlay, you need to specify as a parameter the frame to which you are navigating. With getURL, you need to specify to what URL you want to navigate.

URL stands for uniform resource locator and is the address for any web page. If you want to use the getURL action to jump to a website, for example, you need to know the URL.

The following example teaches you how both getURL and the Behaviors panel work. You’ll build a hyperlink in this example. Here are the steps:

1. In a new file, create a Button symbol called myButton and place an instance on the stage. Give this instance the name go.

2. With the button instance selected, open both the Actions panel and the Behaviors panel (by pressing Shift+F3). Move the Actions panel to the side because you’re only going to use it to watch what’s happening behind the scenes.

3. Make sure the button is selected by ensuring that you see myButton, <go> in the Behaviors panel.

4. Click the plus button in the Behaviors panel and select Web, Go to Web Page. Into the URL field that appears in the dialog box, type in the URL of your favorite website (including the “http://” part). (Leave the Open In option set to the default, _self.)

5. Test the movie. Or, better yet, select File, Publish Preview, Default or press (Cmd-F12) [Ctrl+F12] so you can watch this in a browser. Just click the button in the Flash movie and, if you’re connected to the Internet, you’ll hyperlink to the page whose address you entered.

You can see that the ActionScript produced by the preceding example is the same as if you had created it using the steps in one of the earlier examples. That is, you can also select getURL in the Actions panel list under Global Functions, Browser/Network. The getURL action is nearly the same as gotoAndPlay(), except that the parameter needs to be a URL. If you want to change the event that triggers this behavior, click in the Event field (by default set to On Release) in the Behaviors panel, and you can select from the other events available to buttons, as Figure 9.30 shows.

Figure 9.30. The Behaviors panel lets you change the event trigger without affecting the underlying code.

You can also change the destination URL by double-clicking in the Action column in the Behaviors panel. That redisplays the dialog box that appeared in the first place. You can actually do all these modifications (change the event, change the URL, and even delete the whole behavior) through the Actions panel. You get the same results either way.

Behaviors are simply a tool that guides you through ActionScript. But they can become more trouble than they’re worth, especially when you know exactly what you want to do. Sort of like cookie cutters, they’re great for holidays, but sometimes you just have to use your fingers and shape the cookie yourself.