Flash 8: The Missing Manual

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Computer programs these days strive to give you an intuitive work environment. A word processing document, for example, looks pretty much like a piece of paper and shows your words as you type them. Movie playing software has controls that look just like the ones on your home DVD player. Flash 8 provides the powerful and flexible tools that you need to create interactive animations, which is a more complex affair than producing text or playing media. Problem is, if this is your first time in an animation program, it may not be immediately obvious what to do with all these tools.

When you start with a blank Flash document, you find yourself staring at a blank white square and a dizzying array of icons, most of which appear to do nothing when you click them (Figure 1-1). You'd pretty much have to be a Flash developer to figure out what to do next. In this chapter, you get acquainted with all the different parts of the Flash window: the stage and main work area, the main menu, the toolbars and panels, the Timeline, and more. You'll also take Flash for a test drive and get some practice moving around the Flash screen. When you learn to create an animation of your own in Chapters 2 and 3, you'll feel right at home.

For more help getting acquainted with Flash, you can check out the built-in tutorials by selecting Help → Flash Help → Flash Tutorials. You can read about them, along with the rest of Flash's Help system, in this book's Appendix.

Figure 1-1: The white rectangle in the middle of the main Flash window—the Stage—is where you actually work on your animations. This entire window, together with the Timeline, toolbars, and panels identified here, is called the Flash desktop, the Flash interface, or the Flash authoring environment.

Once you've installed Flash on your computer (Section A.2.2), you can launch it like any other program. Choose your method:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Once you've installed Flash on your computer (Section A.2.2), you can launch it like any other program. Choose your method:

Double-click the program's icon. You can find it on your hard drive in Program Files → Macromedia → Flash 8 (Windows) or Applications → Macromedia Flash 8 folder (Mac).
Click Start → All Programs → Macromedia → Macromedia Flash 8 (Windows). If you're running Mac, you can drag the Flash 8 icon from the Macromedia Flash 8 folder to the Dock and from then on open it with a single click on the Dock icon.

Up pops the Flash start page, as shown in Figure 1-2. When you open the program, you're most likely to start a new document or return to a work in progress. This screen puts all your options in one handy place.

If Flash seems to take forever to open—or if the Flash desktop ignores your mouse clicks or responds sluggishly—you may not have enough memory installed on your computer. See Section A.2.2 for more advice.

When you choose one of the options on the start page, it disappears and your actual document takes its place. Here are your choices:

Open a Recent Item. As you create new documents, Flash adds them to this list. Clicking one of the file names listed here tells Flash to open that file. Clicking the folder icon lets you browse your computer for (and then open) any other Flash file on your computer.
Create New. Clicking one of the options listed here lets you create a brand-new Flash file. Most of the time, you'll want to create a Flash document, which is a plain garden-variety animation file. But you can also create a Flash slide presentation (a specialized kind of animation consisting of a bunch of still images); a Flash form application

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Even though it has more controls and gizmos than a jumbo-jet cockpit, don't let Flash's interface intimidate you. Each toolbar and panel plays a part in the life of an animation, and most are designed to give you, the animator, full and flexible control over your creation. Once you know why and how to use each type of control, all becomes clear. That's what this section does.

Running across the top of the Flash desktop (or the very top of your screen, if you're on a Mac), is the menu bar. The commands on these menus list every way you can interact with your Flash file, from creating a new file—as shown on Section 2.2—to editing it, saving it, and controlling how it appears on your screen.

Some of the menu names—File, Edit, View, Window, and Help—are familiar to anyone who's used a PC or Mac. Using these menu choices, you can perform basic tasks such as opening, saving, and printing your Flash files; cutting and pasting sections of your drawing; viewing your drawing in different ways; choosing which toolbars to view; getting help; and more.

To view a menu, simply click the menu's title to open it and then click a menu option. On a Mac, you can also drag down to the option you want. Let go of the mouse button to activate the option. Figure 1-3 shows you what the File menu looks like.

Figure 1-3: Several of the options on each menu include keystroke shortcuts that allow you to perform an action without having to mouse all the way up to the menu and click on it. For example, instead of selecting File → Save As, you can press Ctrl+Shift+S (circled) to tell Flash to save the file you have open. On the Mac, the keystroke is Shift-⌘-S.

Depending on what's on your screen, additional menus may appear, unique to Flash. You'll learn all about these options in upcoming chapters. For example:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Flash lets you put all the menu options you use most frequently at your fingertips by displaying toolbars and panels like those shown in Figure 1-1. Toolbars and panels are very similar: they're both movable windows that display Flash options. The difference is that toolbars are small and show only icons; panels are larger and show whole rafts of settings you can change. (You can learn all about panels in the next section.)

Toolbars pack some of the most commonly used options together in a nice compact space that you can position anywhere you like. (See the box on Section 1.4.1 for tips on repositioning toolbars.) Displaying a toolbar means your options are right there in front of you, so you don't have to do a hunt-and-peck through the main menu every time you want to do something useful.

When you reposition a floating toolbar, Flash remembers where you put it. If, later on, you hide the toolbar—or exit Flash and run it again—your toolbars appear exactly as you left them. If this isn't what you want, you can wipe away all your changes and return to the way Flash originally displayed everything by choosing Window → Workspace layout → Default.

Flash offers three toolbars, all of which you see in Figure 1-5:

Main. The Main toolbar lets you one-click basic operations, such as opening an existing Flash file, creating a new file, and cutting and pasting sections of your drawing.
Controller. If you've ever seen a video or sound recorder, you'll recognize the Stop, Rewind, and Play buttons on the Controller toolbar, which allow you to control how you want Flash to run your finished animation. (Not surprisingly, the Controller options appear grayed out—meaning you can't select them—if you haven't yet constructed an animation.)

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

A Flash panel is like a toolbar on steroids: bigger and loaded down with more options, but built for the same reason—to let you keep the stuff you work with the most visible right there in front of you, where it's easy for you to find and use. Furthermore, unlike toolbars, panels offer options you can't find on any menu.

Flash offers you a ton of panels, each of which appears initially in one of two flavors: docked or floating. Docked panels appear outside your workspace, like the Color Mixer, Library, Property, and Actions panels shown in Figure 1-6.

A docked toolbar or panel appears attached to some part of the workspace window, while a floating toolbar or panel is one that you can reposition by dragging.

Whether you want to display toolbars and panels as docked or floating is a matter of personal choice. If you constantly need to click something on a toolbar—which means it needs to be in full view at all times—docked works best. But if you usually just need a toolbar or a panel for a brief time and want to be able to move it around on the screen (so it doesn't cover up something else you need to work with, for example), floating's the ticket.

To turn a docked toolbar into a floating toolbar:

Select the docked toolbar by clicking any blank spot on it. An outline appears around the toolbar to let you know you've successfully selected it.
Drag the toolbar away from the edge of the workspace window and release the mouse button. Flash displays the toolbar where you dropped it. You can reposition it anywhere you like simply by dragging it again.

Here, the Controller toolbar has been dragged to make it float.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

For a complex piece of software, Flash is based on a surprisingly simple principle— the old-fashioned slideshow. In case you're too young to remember, a slideshow consisted of a stack of slides loaded into a tray, a projector that displayed one slide at a time, and a human to run the show, determining the order in which the slides appear and how long each stays on screen. Well, a Flash animation is really nothing more than a souped-up slideshow. In Flash, the picture-containing slides are called frames, and instead of a person controlling the slide projector, you've got the Timeline.

The Timeline (see Figure 1-17) is what determines what order your frames appear in and how long each frame stays onstage. If you've decided to organize the images on your frames into separate layers (described in Chapter 3), the Timeline is also where you specify how you want your layers stacked: which layer you want on top, which one beneath that, and so on.

In addition to letting you put together a basic, plain-vanilla, frames-run-left-to-right, layers-run-bottom-to-top animation, the Timeline also lets you create spiffy effects, such as looping a section of your animation over and over again and creating tasteful fades.

The first time you run Flash, the Timeline appears automatically. But if you don't see it, you can display it by selecting Window → Timeline or pressing Ctrl+Alt+T.

Figure 1-17: The Timeline keeps track of all the frames that make up your animation, as well as what order you want them to appear in. Clicking a specific frame (or dragging the playhead to a specific frame) tells Flash to display the contents of that frame on the Stage for you to examine or edit.

In the rest of this chapter, you get to take Flash out for a test drive. You'll learn how to open, play, and save Flash animations; see the Timeline in action; and try your hand at two of the program's most important panels of all—the Tools panel and the Property Inspector.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

For the tutorials in this section, you need a Flash animation to practice on. There's one ready and waiting for you on the "Missing CD" page of the Missing Manuals Web site.

Much of the time, you'll be working with files that already exist—either because you've created them yourself or because you want to incorporate into your Flash animation picture, sound, or movie files you've found on the Web. To avoid the agony of downloading a file and not being able to find it later, create a folder called, say, Downloads in the My Documents (Windows) or Home → Documents (Mac) folder and keep them there. You can even set your Web browser's Preferences to stash all downloads in that folder automatically.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Download the file rolling_ball.fla and save it on your computer. Then launch Flash (Section 1.1), and choose File → Open (the Start page goes away automatically). When the Open dialog box appears, navigate to the file you just downloaded and then click Open. Flash shows you the animation on the Stage, surrounded by the usual Timeline, toolbars, panels, and (at the bottom) the Property Inspector. It should look like Figure 1-18.

To run the example animation, either press Enter or select Control → Play.

Figure 1-18: Select an object on the Stage, and the Property Inspector automatically displays the properties (characteristics) of that object. You can change most of the properties in this panel; when you do, Flash redisplays the object on the Stage to reflect your changes. Here, looking at the details for a text box, you can change the text to centered or justified, or change the font or font color used.

If you don't see the Property Inspector, you can display it by selecting Window → Properties → Properties or by typing Ctrl+F3.

The Property Inspector appears automatically beneath the Stage when you open a new document. As shown in Figure 1-18, it displays specific information about whatever object you've selected on the Stage. Such details can be helpful when you want to recreate an object precisely in another program, or incorporate your finished animation into a Web page you've already created. For example, the Size button shows your animation's dimensions (550 x 200 pixels, say) which is information you need if you want to place your animation in a Web page by hand. (In Chapter 14, you'll learn how to tell Flash to create a simple Web page that includes your animation so you don't have to do this work by hand.)

To see how it works, click the letter "F" in the rolling _ball.fla example animation. On the Property Inspector, you'll see the following:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The best way to get acquainted with Flash is just to dive in and create a simple animation. So this chapter starts with some tips for planning your work so you can get more done in less time (and be happier with the result). You see how to set up your Flash document and use the most popular Flash drawing tools—the Pen, the Pencil, the Shape tool, the Line tool, and the Brush—to draw a simple picture. Then you learn how to add color to your drawn shapes and move them around on the Stage.

In the next chapter, you add a few more drawings and string them together to create a simple animation.

Drawing a single picture is relatively easy. But creating an effective animation—one that gets your message across, or entertains people, or persuades them to take an action—takes a bit more up-front work. And not just because you have to generate dozens or even hundreds of pictures: You also have to decide how to order them, how to make them flow together, when (or if) to add text and audio, and so on. In other words, you have to think like a movie director. With its myriad controls, windows, and panels, Flash gives you all the tools you need to create a complex, professional animation, but it can't do the thinking for you.

In this section, you see how the pros approach this crucial first step in the animation process: how to create a storyboard, come up with ideas, test your ideas, and benefit from others' successes.

Say you want to produce a short animation to promote your company's great new gourmet coffee called Lotta Caffeina. You decide your animation would be perfect as a banner ad. Now, maybe you're not exactly the best artist since Leonardo da Vinci, so you want to keep it simple. Still, you need to get your point across—BUY OUR COFFEE!

Before you even turn on your computer (much less fire up Flash), pull out a sketchpad and a pencil and think about what you want your animation to look like.

For your very first drawing, you might imagine a close up of a silly-looking male face on a pillow, belonging to a guy obviously deep in slumber, eyes scrunched tight, mouth slack. Next to him is a basic bedside table, which is empty except for what appears to be a jangling alarm clock.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Drawing a single picture is relatively easy. But creating an effective animation—one that gets your message across, or entertains people, or persuades them to take an action—takes a bit more up-front work. And not just because you have to generate dozens or even hundreds of pictures: You also have to decide how to order them, how to make them flow together, when (or if) to add text and audio, and so on. In other words, you have to think like a movie director. With its myriad controls, windows, and panels, Flash gives you all the tools you need to create a complex, professional animation, but it can't do the thinking for you.

In this section, you see how the pros approach this crucial first step in the animation process: how to create a storyboard, come up with ideas, test your ideas, and benefit from others' successes.

Say you want to produce a short animation to promote your company's great new gourmet coffee called Lotta Caffeina. You decide your animation would be perfect as a banner ad. Now, maybe you're not exactly the best artist since Leonardo da Vinci, so you want to keep it simple. Still, you need to get your point across—BUY OUR COFFEE!

Before you even turn on your computer (much less fire up Flash), pull out a sketchpad and a pencil and think about what you want your animation to look like.

For your very first drawing, you might imagine a close up of a silly-looking male face on a pillow, belonging to a guy obviously deep in slumber, eyes scrunched tight, mouth slack. Next to him is a basic bedside table, which is empty except for what appears to be a jangling alarm clock.

OK, now you've got a start. After you pat yourself on the back—and perhaps refuel your creativity with a grande-sized cup of your own product—you plan and execute the frame-by-frame action. You do this by whipping out six quick pencil-and-paper sketches. When you finish, your sketchpad may look something like this:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Even if you're familiar with animation software (but especially if you aren't), you need to know a few quick things before you roll up your sleeves and dive into Flash—sort of like the quick where's-the-turn-signal once-over you do when you jump into a rental car for the first time.

In this section, you see how to get around the Stage and how to customize your Flash document's properties. You'll also learn a couple of basic Flash terms you need to understand before you use the drawing tools (which you see how to do on Section 2.3.1).

But first you need to open a new Flash document page so that you can follow along at home. To do so, launch Flash and choose Create New Flash Document on the start screen. You can also create a new file using the Flash main menu. Here's how:

From the main menu, choose File → New.

The New Document window opens. If the window doesn't show the General tab shown in Figure 2-2, click that tab to make it active.
In the Type list, select the type of new file you want to create and then click OK.

The New Document window disappears and Flash displays a brand-new blank document. You can tell it's a new document by the name Flash gives it: for example, Untitled-1.

The Stage, as you may recall from Chapter 1, is your electronic canvas: it's where you'll be drawing your lines and shapes and adding your text. Figure 1-1 shows you the way the Stage appears the first time you create a new document in Flash. There's certainly nothing wrong with it, but you may want to make yours larger (or smaller) or add helpful positioning guides, such as rulers and gridlines. This section shows you how.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Before you can create an animation, you have to have some drawings to animate. You start with one drawing and then create a bunch more (often by altering the first drawing slightly). For example, if you want to create an animation showing a raccoon marching in place, you need to draw a picture of a raccoon standing still; another picture of the same raccoon lifting its left foot; and still more pictures showing the raccoon putting its left foot down, lifting its right foot, and so on. Put them all together using Flash's Timeline (as you learn in Chapter 3) and you've got yourself an animation.

You're not limited to using your own drawings. Flash lets you import, or pull in, existing drawings and photos—and even sound clips and video clips. Section 8.1 shows you how to import files.

Figure 2-9: Here you see the difference between strokes (lines and outlines) and fills. The strokes in this example appear black; the fills appear either light gray (Flash automatically adds your chosen fill color for closed shapes you create with the shape tools or the Pen tool) or white (Flash doesn't automatically add color to the fills you create by drawing outlines with the Line, Pencil, and Brush tool, so these fills stay the same color as the Stage). You can change the color of any fill by clicking the Paint Bucket tool (circled) and then clicking the fill you want to color.

This section shows you how to use basic Flash tools to create a simple drawing (really simple; it's a stick person!). You see the Line, Pencil, Pen, Brush, and shape tools (Oval, Rectangle, and PolyStar) in action, and learn the differences among them (some are better for creating certain effects than others). You also find out how to add color to a Flash drawing and erase your mistakes.

One of the true beauties of creating digital artwork—besides not having to clean up a mess of paint spatters and pencil shavings—is that you don't have to track down your art supplies: the one pen that feels good in your hand, the right kind of paper, the sable brush that still smells like paint thinner. Instead, all you need to do is display Flash's Tools panel.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Copying graphic elements and pasting them—either into the same frame, into another frame, or even into another document—is much faster than drawing new objects from scratch. It's also the most familiar. If you've ever copied text in a word processing or spreadsheet document and pasted it somewhere else, you know the drill.

A simple copy-and-paste is the best way to go when you're experimenting: for example, when you want to see whether the blue-eyed wallaby you drew for one animation looks good in another. But if you're trying to keep your animation's finished file size as small as possible, or if you plan to include more than one copy of that wallaby, copying and pasting isn't the best way to go. Instead, you'll want to look into symbols (Section 7.1).

To copy and paste an image:

On the Stage, select the image you want to copy.

Section 2.2.3 gives you an overview of the selection tools. In Figure 2-21, the butterfly is selected.

Choose Edit → Copy (or press Ctrl+C in Windows; ⌘-C on the Mac). Then select the keyframe into which you want to paste the image.

You can paste the image in the keyframe you're in, or you can select another one. Flash doesn't restrict you to the document you currently have open; you can open another document to paste the image into.

Choose one of the Paste commands. Your options include:

Edit → Paste in Center. Tells Flash to paste the image in the center of the Stage.

Edit → Paste in Place. Tells Flash to paste the image in the same spot it was on the original Stage. (If you choose this option to paste an image to the same Stage as the original, you'll need to drag the pasted copy off the original to see it.)

Edit → Paste Special. (Windows only) Displays a Paste Special dialog box that lets you paste an image as a device-independent bitmap (an uneditable version of your image with a fixed background the size and shape of the selection box).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The Colors section of the Tools panel lets you choose the colors for your strokes and fills. Before you click one of the drawing icons to begin drawing (or afterward, to change existing colors) you can click either of the Stroke or Fill icons in the Color Section to bring up a color palette, as you see in Figure 2-22. Choose a color from the color palette, and Flash applies that color to the Stage as you draw.

One of the best things about drawing in Flash is how easy it is to change things around. If you draw a bright orange line using the Pencil tool, for example, you can change that line an instant later to spruce, chartreuse, or puce (and then back to orange again) with just a few simple mouse clicks.

In Flash, all lines are made up of strokes. The Flash drawing tools that produce strokes include the Pencil, the Pen, the Line, and the shape tools (Oval, Rectangle, and PolyStar).

Flash gives you two different ways to change the color of a stroke: the Property Inspector and the Ink Bottle tool.

Figure 2-21: Copying and pasting is the easiest way to try out a look. If you're copying a complex image, as shown here, you may want to group the selected image first by choosing Modify → Group. (There's much more detail on grouping objects on Section 5.2.4 in Chapter 5.) For additional copies, simply choose Edit → Paste in Center or Edit → Paste in Place again.

Section 2.5.1.1: Coloring strokes with the Property Inspector

Changing the color of a stroke using the Property Inspector is best for situations when you want to change the color of a single stroke or when you want to change more than just the color of a stroke (for example, you want to change stroke thickness or the color of the fill inside the stroke).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Animation is what Flash is all about. Sure, Flash offers tons of drawing and special-effect tools, but these are all means to an end: a series of slightly different drawings that you can string together to create the illusion of movement.

In the old days, animators had to create each drawing, or frame, by hand—a daunting process when you consider that your average feature presentation clicks by at 24 frames per second. (That's 1,440 drawings per minute of onscreen animation. Expensive? Hoo boy.)

To keep those costs down, animation companies did what all self-respecting companies do: They figured out how to separate the highly skilled labor from the less-skilled labor. They figured out that there are key drawings (called keyframes) that show big changes in the finished animation, and a certain number of less-detailed, in-between drawings (regular frames) they could assign to lower-paid workers. For example, say you're a producer working on an animation showing a cartoon kangaroo jumping up into the air. If you get a skilled animator to draw the kangaroo-on-the-ground, kangaroo-midway, and kangaroo-at-the-top frames, you can hand these keyframes off to a low-paid tweener. All the tweener has to do is copy the keyframes and make a few adjustments, and bingo: You've got yourself a finished animation at a bargain-basement price.

Flash, like the animation studios of old, gives you the opportunity to use tweening to slash the time it takes to produce a finished animation. In this chapter, you see both approaches: frame-by-frame (still the best choice when you need to create highly complex, tightly controlled animations) and tweening (wherein Flash serves as your very own low-paid illustrator).

An animation is nothing more than a series of framed images displayed one after the other to create the illusion of motion. When you create an animation by hand in Flash, you create each frame yourself—either by using Flash's drawing and painting tools (Chapter 2), or by importing images or movie clips that someone else has created (Chapter 8).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

An animation is nothing more than a series of framed images displayed one after the other to create the illusion of motion. When you create an animation by hand in Flash, you create each frame yourself—either by using Flash's drawing and painting tools (Chapter 2), or by importing images or movie clips that someone else has created (Chapter 8).

The best way to gain an understanding of frames, keyframes, and Flash's animation tools is to start animating by hand, frame by frame. Most of the time, though, you'll use tweening (Section 3.3) to save time and frustration. For more advice on when to use either technique, see the box below.

The great thing about creating an animation frame by frame is that it gives you the most control over the finished product. If you're looking for a super-realistic effect, for example, you're probably not going to be satisfied with the frames Flash generates when you tell it to tween (Section 3.3). Instead, you're going to want to lovingly handcraft every single frame, making slight adjustments to lots of different objects as you go.

Say, for instance, you're creating an animation showing an outdoor barbecue. Over the course of your animation, the sun's going to move across the sky, which is going to change the way your characters' shadows appear. Bugs are going to fly across the scene. When one character opens his mouth to speak, the other characters aren't going to remain static: Their hair's going to ripple in the breeze, they're going to start conversations of their own, they're going to drop pieces of steak (which the host's dog is going to come streaking over and wolf down). You can't leave realistic, director-level details like this to Flash; you've got to create them yourself.

On the downside, animating by hand is understandably time-intensive. Even though most Web-based Flash animations run at a modest 12 fps (frames per second), that's a whole lot of frames. And compared to tweening, creating individual frames adds substantially to the file size of your movie, too—a big consideration if you intend to put your finished animation up on the Web. (Big files tend not to play so well over the Web, thanks to uncontrollable variables such as Internet traffic and the connection speed of the folks viewing your animation. You can find tips for optimizing your finished animation's file size in Chapter 14.)

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Imagine you're creating a complex animation in Flash. You want to show a couple of characters carrying on a conversation, a car speeding by in the background, and some clouds floating across the sky.

Theoretically, you could draw all of these elements together, in one layer (one set of frames). In the first frame, you could show the characters greeting each other, the car entering from stage left, and the first cloud drifting in from the right. In the second frame, the characters might begin speaking and waving their hands, the car might advance just a bit, more clouds might appear from the right, and so on.

Now imagine that your spec changes. It's not a car you need in the background, but a galloping dog. A relatively simple change, conceptually—but because you've drawn all the graphic elements on a single set of frames, you now need to redraw every single frame. You need to slice away the car where it touches the other elements, and then you need to draw in the dog. And because the dog needs to appear behind the two chatting characters, you can't even take advantage of Flash's motion tweening (which you can learn how to do on Section 3.3), or even copying and pasting to speed up the animation process (Section 2.4).

Fortunately, Flash gives you an alternative: layers. Layers in Flash are virtual, clear plastic sheets that you stack on top of each other to create composite frames. So you can draw each element of your animation on a separate layer: the clouds, the car, the first character, and the second character. When you stack the layers together, your animation's complete.

Then, when you need to replace the car with a dog, all you need to do is delete the car layer and create a dog layer. You're working with a single object on your dog layer, so you can copy and paste and even create motion and shape tweens, all without affecting any other part of your animation. And if you decide you want the dog to gallop in front of your characters instead of behind, you can make that change simply by restacking (reordering) your layers with the dog layer on top.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

When you create a frame-by-frame animation, it's up to you to create every single keyframe and frame. And in cases where you want absolute control over every single image that appears in your finished animation, frame-by-frame animation is the way to go.

Often, however, you can get by with a little less control. If you want to create a scene of a ball rolling across a lawn, for example, you can create one keyframe showing a ball on the left side of the lawn, another keyframe showing the same ball on the right side of the same lawn, and tell Flash to create a tween, or all the keyframes in between. Bingo—scene done.

You can combine frame-by-frame animation with tweening. In fact, that's what a lot of professional animators do: Take care of the complex stuff themselves, and rely on Flash to fill in the spots that aren't as critical.

Tweening saves you more than just time and effort; when you go to publish your animation, it also saves you file size. That's because Flash doesn't save every single frame of a tweened animation the way it does with a frame-by-frame animation. Instead, for tweened animations, Flash saves only the keyframes you create, plus the information it needs to generate the tweened frames from your keyframes. And smaller file sizes are a good thing—especially if you're planning to put your finished animation up on a Web site. (You can find out more about file sizes, including tips for optimization, in Chapter 14.)

When it comes to divvying your animation up into layers, there's no hard and fast rule. Some animators like to put every single element on its own separate layer; others take a more conservative approach. In general, the more layers you have, the more control you have over your animation, because you can change and position the content on each layer independently.

But on the downside, the more layers you have, the more organizational overhead and potential confusion you have—and at the end of the day you may find you don't actually need all that control.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Part 1 of this book gets you started launching Flash, creating your own drawings, and transforming them into moving animations. Most animation work, though, takes place after you've got all the frames and layers in place. Like a film director slaving away in the cutting room, as an animator you spend most of your time testing, editing, and retesting your movie.

This chapter is your crash course in Flash animation editing. Here you'll see how to reorganize your animation horizontally (over time) by cutting, pasting, and rearranging frames on the Timeline. You'll also see how to reorganize your animation vertically by shuffling and restacking the layers you've added to it.

When you create an animation, you build it from frames and keyframes. Editing your document is a simple matter of moving, cutting, and pasting those frames until they look good and work well. You can perform these operations on individual frames or on multiple frames by combining them into groups, as you'll see at the end of this section.

Copy and paste are the world's favorite computer commands with good reason. These functions let you create a piece of work once (a word, line, shape, drawing, or what have you) and then quickly recreate it to build something even more complex with a minimum of effort. Well, Flash lets you cut, copy, and paste not just the content of your frames but your frames themselves, from one part of your Timeline to another.

Copying and pasting frames is a great way to cut down on your development time. Here's how it works. Say you have a series of frames showing a weasel unwrapping a stick of chewing gum. It's a gag scene, one you want to repeat throughout your animation for comic effect. Instead of having to insert all the keyframes and regular frames every time you want to slip in the weasel gag, all you need to do is copy the weasel frames once and then paste them onto your Timeline wherever you want them to go.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

When you create an animation, you build it from frames and keyframes. Editing your document is a simple matter of moving, cutting, and pasting those frames until they look good and work well. You can perform these operations on individual frames or on multiple frames by combining them into groups, as you'll see at the end of this section.

Copy and paste are the world's favorite computer commands with good reason. These functions let you create a piece of work once (a word, line, shape, drawing, or what have you) and then quickly recreate it to build something even more complex with a minimum of effort. Well, Flash lets you cut, copy, and paste not just the content of your frames but your frames themselves, from one part of your Timeline to another.

Copying and pasting frames is a great way to cut down on your development time. Here's how it works. Say you have a series of frames showing a weasel unwrapping a stick of chewing gum. It's a gag scene, one you want to repeat throughout your animation for comic effect. Instead of having to insert all the keyframes and regular frames every time you want to slip in the weasel gag, all you need to do is copy the weasel frames once and then paste them onto your Timeline wherever you want them to go.

Furthermore, copying and pasting isn't just useful for those times when you want a carbon copy of a scene. If you want to change something in each pasted scene—the brand of chewing gum the weasel's unwrapping, for example—you can do that, too, after you've pasted the frames.

Copying and pasting frames works almost exactly like copying and pasting words or drawn objects—with a few twists. Here are some points to keep in mind:

As usual, you must select what you're going to copy before you set off the command. You select frames in the Timeline (see Section 1.4.16 for a refresher).
If the frames you're selecting contain layers, make sure you select all the layers in each frame, as shown in Figure 4-1.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

A layer is nothing more than a named sequence of frames. So you won't be surprised to learn that, after you create a couple of layers as described in Chapter 3, you need to fill up each layer's frames with content. This section shows you how.

When you're working with a single layer, adding content to frames is easy because you don't have to worry about which layer you're working with: You simply click a keyframe and use Flash's drawing and painting tools to create an image on the Stage.

But when you're working with multiple layers—for example, when you're creating a composite drawing by adding a background layer, a foreground layer, and a separate layer for your sound clips—you may find adding content a bit trickier because you have to be aware of the layer to which you're adding your content. Fortunately, as you see in the steps below, the Timeline's Show/Hide icon helps you keep track of which content you've placed on which layers.

Here's how to add content to multiple layers:

Open the file multiple_layers.fla.

You can find this file (and all the other examples files for this book) on the "Missing CD" page at www.missingmanuals.com/cds.

Figure 4-4: Top: You can work with multiple images just as easily as single images. For example, you can select several (or all of them) and apply whatever edits you like—moving them, coloring them, reshaping them, and so on.
Bottom: If you need to differentiate between the content in the selected frame and the content in the other frames, click Edit Multiple Frames and then click Onion Skin Outlines. All the non-selected frames appear in outline form, as shown here. (Clicking Onion Skin shows the content of non-selected frames in semi-transparent form). With onion skinning turned on, you can see multiple frames, but you can edit only the content of the selected frame; click Edit Multiple Frames to return to multiple-frame editing mode.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

This section shows you how to use Flash's layer tools (including locking/unlocking and hiding/showing) to keep from going crazy when you're editing content in multiple layers. (Two layers isn't so bad, but if you need to add six, eight, 10, or even more layers, you'll find it's pretty easy to lose track of which layer you're working in.) Then, in the following section, you see how to edit the content in your layers.

Whether or not you want Flash to show the contents of your layered frames on the Stage depends on the situation. Typically, when you're creating the content for a new layer, you want to hide all the other layers so that you can focus on what you're drawing without any distractions. But after you've created a bunch of layers, you're probably going to want to see them all at once so that you have an idea of what your finished animation looks like and make adjustments as necessary.

Flash shows all layers until you tell it otherwise.

Figure 4-7: Top: Creating separate layers for different graphic elements gives you more control over how each element appears in your finished animation.
Bottom: In this example, the images are static, but you can place everything from motion and shape tweens to movie clips, backgrounds, actions, and sounds on their own layers. Hiding layers affects only what you see on the Stage; when you select Control → Test Movie to test your animation, Flash displays all layers, whether or not you've checked them as Hidden.

You can tell Flash to show (or hide) all your layers by clicking the Show/Hide All Layers icon you see in Figure 4-6. Click the icon again to turn off showing (or hiding).

Section 4.3.1.1: To hide a layer

On the Timeline, click the dot (the Show/Hide) icon next to the layer you want to hide (Figure 4-9, top). When you do, Flash redisplays the dot as an X and temporarily hides the contents of the layer (Figure 4-9, bottom).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The more layers you have, the more important it is to keep them organized. In this section, you see how to give your layers meaningful names, so that you can remember which images, sounds, or actions you placed in which layers. You also see how to order your layer so that your composite images appear just the way you want them and to copy and paste your layers (to cut down on the work you have to do to create similar layered effects).

The names that Flash gives the layers you create—Layer 1, Layer 2, Layer 3, and so on—aren't particularly useful when you've created 20 layers and can't remember which layer contains the ocean background you spent 10 hours drawing. Get into the habit of renaming your layers as soon you create them, and you'll have an easier time locating the specific elements you need when you need them.

This section builds on the example you created in "Adding Content to Multiple Layers" earlier in this chapter. If you haven't had a chance to work through that section, you can download flowers.fla from this book's "Missing CD" Web page and use it instead.

Figure 4-9: Top: This animation contains three layers: one containing a motion tween of a buzzing fly; one containing the path the fly takes as it buzzes around the frog's head; and one containing the highly interested frog. In some situations, showing all layers is fine, but here it's confusing to see all those images on the Stage at the same time.
Bottom: Hiding the motion guide layer lets you focus on the two main elements of this animation: the frog and the fly.

To rename a layer:

Open the file flowers.fla.

If you created your own Flash document when you worked through "Adding Content to Multiple Layers" (Section 4.2), you can use that document instead.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Flash gives you a couple of options that help you organize your layers both in your finished animation and in Flash. The outline view helps you tweak the way the content of your layers appears in your finished animation. You use the outline view to help position the objects on one layer with respect to the objects on all the other layers. Layer folders help you organize your layers on the Timeline so that you can find and work with them more easily.

To help you fit your layers together just the way you want them, Flash lets you display the contents of your layers in outline form. Looking at your layer content in outline form (Figure 4-15) is useful in a variety of situations: for example, when you want to align the content of one layer with respect to the content of another.

To display the content of all your layers as outlines, click the Show All Layers As Outlines icon. (Clicking it again redisplays your layers normally.) Or, to outline the contents of every layer except the one you're working on, Alt-click (Windows) or Option-click (Mac) the outline icon for that layer.

To show layer content in outline form, in the Layers widow, click the Non-Outline icon (the filled square in Figure 4-15) displayed next to the layer. When you do, Flash changes the filled square to a hollow square (the Outline icon) and displays your layer content in outline form on the Stage.

Figure 4-15: Depending on the visual effect you're going for, you might want to align the centers of your flowers with the crosspieces of your fence. But when you look at the content normally, it's hard to see the alignment, because both your flowers and your fence are opaque. Here, Flash displays the birds, flowers, and fence layers outline form so that you can concentrate on shape and placement without being distracted by extraneous details.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|

Table of Contents

Section 2.5.1.1: Coloring strokes with the Property Inspector

Section 4.3.1.1: To hide a layer