By E. A. Vander Veer, Chris Grover
Book Price: $34.99 USD
£24.99 GBP
PDF Price: $27.99

Cover | Table of Contents | Colophon

Table of Contents

Chapter 1: Getting Around Flash

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

These days, computer programs 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 CS3 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 (). 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 and , you'll feel right at home.

To get further acquainted with Flash, you can check out the built-in help text by selecting Help →Flash Help. Once the help panel opens, click Using Flash and then click Getting Started. You can read more about Flash's Help system in .

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 (), 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 →Adobe →Flash CS3 (Windows) or Applications →Adobe Flash CS3 folder (Mac).
• Click Start →All Programs →Adobe →Adobe Flash CS3 (Windows). If you're running Mac, you can drag the Flash CS3 icon from the Adobe Flash CS3 folder to the Dock and from then on open it with a single click on the Dock icon.

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

Starting Flash

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

Once you've installed Flash on your computer (), 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 →Adobe →Flash CS3 (Windows) or Applications →Adobe Flash CS3 folder (Mac).
• Click Start →All Programs →Adobe →Adobe Flash CS3 (Windows). If you're running Mac, you can drag the Flash CS3 icon from the Adobe Flash CS3 folder to the Dock and from then on open it with a single click on the Dock icon.
  Up pops the Flash welcome screen, as shown in . 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 for more advice.
  When you choose one of the options on the welcome screen, 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.
  

  Figure 1-2: This welcome screen appears the first time you launch Flash—and every subsequent time too, unless you turn on the "Don't show again" checkbox (circled). If you ever miss the convenience of seeing all your recent Flash documents, built-in templates, and other options in one place, you can turn it back on by choosing Edit →Preferences (Windows) or Flash → Preferences (Mac). On the General panel, choose Welcome Screen from the On Launch pop-up menu.
• 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 File, which is a plain garden-variety animation file. Flash gives you two choices: Flash File (ActionScript 3.0) and Flash File (ActionScript 2.0). If you're a Flash beginner, choose the second flavor listed: Flash File (ActionScript 2.0). With this choice, you can take advantage of the Flash Behaviors panel, a great way to learn ActionScript. (There's more on behaviors in .)

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

A Tour of the Flash Desktop

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 —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. shows you what the File menu looks like.

Figure 1-3: Several of the options on each menu include keystroke shortcuts that let you perform an action without having to mouse all the way up to the menu and click it. For example, instead of selecting File → Save As, you can press Ctrl+Shift+S 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, unique to Flash, may appear. You'll learn all about these options in upcoming chapters. For example:

• Insert. The options you find in this menu let you create complex drawings and turn static drawings into Flash animations by adding symbols (reusable bits of drawings and animations, as you'll learn in ); layers (virtual transparencies that let you manipulate the elements of a composite drawing separately, as shown in ); and

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

Toolbars

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 . 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 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 → Default.

Flash offers three toolbars, all of which you see in :

• 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.)
• Edit Bar. Using the options here, you can set and adjust the Timeline () as well as edit scenes (named groups of frames) and symbols (reusable drawings).

The Edit Bar is a little different from the other toolbars in that it remains fixed to window with the stage. You can't reposition it.

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

Panels

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.

Figure 1-5: To conserve space on Flash's jam-packed interface, only one toolbar—the Edit Bar toolbar—appears automatically. It's positioned directly above the stage. To display the other two, select Window → Toolbars → Main (to display the Main toolbar) and Window →Toolbars → Controller (to display the Controller window). The checkmarks on the menu show when a toolbar is turned on. Choose the toolbar's name again to remove the checkmark and hide the toolbar.

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 Align, Transform, and Info panels shown in .

You can have as few or as many panels showing at a time as you like. The Window menu lists all of Flash's panels, and you show and hide them by selecting to turn their checkmarks on and off—exactly as with toolbars.

Figure 1-6: Panels like the ones shown here group useful options together, so you can find what you want quickly and easily. If all you see is a tab, the panel is collapsed and hiding its tools. To expand a collapsed panel and reveal its options, click the bar at the top. To collapse a panel, another click will do the trick. Click the double arrows to collapse all the panels so they take up less horizontal space. To remove a panel, click the X button.

Besides keyboard shortcuts, there's only one way to display a panel—from the Window menu—but you have plenty of options for getting them out of your way. For example, you can click the X in the upper-right corner of a floating panel, as shown in .

For both docked and undocked panels, you can collapse (shrink) and expand them by clicking the bar at the top of the panel. There's also a collapse and expand button next to the X in the upper-right corner, but it's usually easier just to click the bar—you don't have to be quite the mouse marksman.

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

The Timeline

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 appeared and how long each stayed 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 ) is what determines the 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 ), 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.

Figure 1-18: The Timeline keeps track of all the frames that make up your animation, as well as the order you want them to appear. 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 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 (or for Mac, Option-⌘-T).

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—the Tools panel and the Property Inspector.

This book doesn't cover the less-used Filters, Parameters, Project, Screens, Strings, or WebServices panels.

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

The Flash CS3 Test Drive

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 them into 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!

Opening a Flash File

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. Launch Flash, and then choose File →Open (the Welcome screen 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 . (To run the example animation, either press Enter or select Control → Play.)

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 , 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 , 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.)

Figure 1-19: 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.

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:

• Height and width. The pixel dimensions of this "F" are 10.4 wide x 13.0 high.
• Color. The color of this letter is black.

If you don't see dimensions in the Properties panel, try double-clicking on the tab. The dimensions boxes will appear beneath the other properties.

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

Chapter 2: Creating Simple Drawings

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'll 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'll learn how to add color to your drawn shapes and move them around on the Stage.

In the next chapter, you'll 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'll 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!

Planning Pays Off

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'll 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:

• The first sketch shows your initial idea—Mr. Comatose and his jangling alarm clock.
• Sketch #2 is identical to the first, except for the conversation balloon on the left side of the frame, where capped text indicates that someone is yelling to your unconscious hero (who remains dead to the world).

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

Preparing to Draw

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'll 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'll see how to do on ).

But first you need to open a new Flash document page so 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:

1. From the main menu, choose File → New.
   The New Document window opens. If the window doesn't show the General tab as in , click that tab to make it active.
2. In the Type list, select the type of new file you want to create and then click OK.
   (If you're not sure what file type you want, choose Flash File (ActionScript 2.0); see for the reason why.) 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.

Starting out on a learning curve as steep as Flash's can be daunting. Sometimes, it's helpful to hear what the pros think—to get advice from folks from who've been there, done that, and want you to know that you can, too.

Here are the top ten recommendations from the experts:

1. Analyze other people's animations. As you begin to explore Flash content on other Web sites, think about it critically. Don't just focus on whether the result is dazzling or colorful, but also consider whether it's effective. What do you think it was designed to do? Get you to buy something? Get you interested in a product? Did it work? If not, why not? What detracts from the overall effect? Keep a notebook so you can apply what you learn to your own efforts.
2. Don't sell yourself short. Don't think you can't create great animations just because you're not a professional artist with a background in design. You'll find that Flash helps you through lots of tough spots (like correcting your shaky lines and generating frames out of whole cloth), and frankly, you're probably not shooting for a Picasso- or Tarantino-level result anyway. You get better at everything with practice; Flash is no exception.

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

Creating Original Artwork

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 () 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. shows you how to import files.

This section shows you how to use basic Flash tools to create a simple stick person drawing. You'll 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'll 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.

In this section, you'll see Flash's drawing and painting tools in action: the Line, Pen, Pencil, Brush, and shape tools. You'll also see the tools Flash provides (Lasso, Selection, and Subselection) that let you select drawings so you can modify them. And finally, you'll get a quickie introduction to color—specifically, how to change the colors of strokes and fills.

Section 2.3.1.1: Line tool

You use the Line tool in Flash to draw nice, straight lines—perfect all by themselves or for creating fancy shapes like exploding suns and spiky fur.

Here's how to start drawing your stick figure using the Line tool:

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

Copying and Pasting Drawn Objects

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 ().

To copy and paste an image:

1. On the Stage, select the image you want to copy.
   gives you an overview of the selection tools. In , the butterfly is selected.
   

   Figure 2-22: 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 .) For additional copies, simply choose Edit → Paste in Center or Edit → Paste in Place again.
2. 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.
3. 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!

Adding Color

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 shown in . Choose a color from the color palette, and Flash applies that color to the objects 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.

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

To change the color of a stroke using the Property Inspector:

1. On the Stage, select the stroke you want to change.
   A Property Inspector similar to the one in appears.
2. In the Property Inspector, click the Stroke Color icon.
   A Color Picker appears.
   

   Figure 2-23: Before you begin drawing with the Pen or Pencil tools (both of which let you create strokes), you can choose the color Pen or Pencil you want to use by clicking the Stroke Color icon and then selecting a color from the palette that appears. If you want to change the color that appears when you use the Brush tool (which creates fills), you need to click the Fill Color icon (and select a color) before you click the Brush tool and begin to draw.
3. Click to choose a new color for your selected 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!

Chapter 3: Animating Your Drawings

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'll 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 (), or by importing images or movie clips that someone else has created ().

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 () to save time and frustration. For more advice on when to use either technique, see the box below.

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

Frame-by-Frame Animation

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 (), or by importing images or movie clips that someone else has created ().

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 () to save time and frustration. For more advice on when to use either technique, see the box below.

Flash recognizes two different types of frames: keyframes, and plain old frames. Although in frame-by-frame animations most of the frames you create are key-frames, if you want to tell Flash to hold a particular image for effect, you'll need both:

• Keyframes are the important frames—the frames you designate to hold distinct images.
  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 (). 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 to 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

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

Adding Layers to Your Animation

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 would now need to redraw every single frame. You'd need to slice away the car where it touches the other elements, and then 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 ), or even copying and pasting to speed up the animation process ().

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

When you create a new document, Flash starts you out with one layer, called Layer 1, in the Layers area of the Timeline ().

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

Animating Automatically (Tweening)

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 key-frames 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 .)

In this section, you'll see examples of both types of tweening Flash offers: shape tweening and motion tweening.

Shape tweening—sometimes referred to as morphing—lets you create an effect that makes one object appear as though it's slowly turning into another object. All you have to do is draw the beginning object and the ending object, and Flash does all the rest.

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.

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

Chapter 4: Organizing Frames and Layers

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.

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.

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

Working with Frames

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 for a refresher).
• If the frames you're selecting span more than one layer, make sure you select all the layers for each frame, as shown in .
  

  Figure 4-1: To select multiple frames, click the first frame of the series you want to select; then Shift-click the last frame. Flash automatically selects all the frames in between. If you know you're going to be copying and pasting frames in the same document, you can speed up the process by pressing the Alt key (Windows) or the Option key (Mac) while you drag a copy of the selected frames from their original location to where you like on the Timeline.

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

Adding Content to Multiple Layers

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 , 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:

1. Open the file multiple_layers.fla.
   You can find this file (and all the other example files for this book) on the "Missing CD" page at www.missingmanuals.com/cds.com
2. Click the first keyframe in Layer 1.
   Flash highlights the selected frame, as well as the layer name. You also see a little pencil icon that lets you know this frame is now ready for editing.
3. Use Flash's drawing and painting tools to draw a fence on the Stage.
   Your fence doesn't have to be fancy; a quick "wooden" fence, like the one in , is fine.
   

   Figure 4-7: You can tell at a glance which layer is active (editable) by the pencil icon next to the layer's name. Here, Layer 1 is active.
4. Hide Layer 1 by clicking the Show/Hide icon next to Layer1
   The content on the Stage temporarily disappears. Flash replaces the Show/Hide icon with an X and draws a slash through the pencil icon next to Layer 1 to let you know this layer is no longer editable.
   Technically, you don't have to hide the contents of one layer while you're working with another; in fact, in some cases, you want to see the contents of both layers on the Stage at the same time (). But for this example, hiding is the best way 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!

Viewing Layers

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 6, 8, 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.

You can tell Flash to show (or hide) all your layers by clicking the Show/Hide All Layers icon you see in . 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. When you do, Flash redisplays the dot as an X and temporarily hides the contents of the layer ().

Figure 4-12: 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.

Section 4.3.1.2: To show a layer

On the Timeline, click the X (the Show/Hide icon) next to the layer you want to show. When you do, Flash redisplays the X as a dot and displays the contents of the layer on the Stage.

Section 4.3.1.3: To hide (or show) all layers except the one you're currently editing

On the Timeline, Alt-click (Windows) or Option-click (Mac) the Show/Hide icon next to the layer you're editing. Flash immediately hides (or shows) all the layers except the one you're editing.

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

Working with Layers

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.

In addition to making it much, much easier for you to change your animations, working with layers gives you the following benefits:

• You can create multi-tweened animations. Flash lets you create only one tween () per layer. So if you want to show two baseballs bonking a parked car—one ball sailing in from the right, and one from the left—you need to either draw the entire animated sequence for each ball by hand, or use two separate layers, each containing one tween.
• You can create more realistic effects. Since you can shuffle layers, putting some layers behind others and even adjusting the transparency of some layers, you can add depth and perspective to your drawings. And because you can distribute your drawings to layers at whatever level of detail you want, you can create separate layers that give you independent control over, say, your characters' facial expressions and arm and leg movements.
• You can split up the work. TV and movie animators use layers (technically, they use transparent sheets of plastic called cels, but it's the same concept) to divvy up their workload, and so can you. While you're crafting the dog layer, one of your teammates can be working on the cloud layer, and another two can be working on the two character layers. When you're all finished, all you need to do is copy everyone's layers and paste them onto a single Timeline, and bingo—instant 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!

Organizing Layers

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. Instead of seeing solid pictures on the stage, you see wireframe images, as in . Looking at your layer content in outline form 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 o