Cover | Table of Contents | Colophon

Table of Contents

Chapter 1: Getting Started

Content preview·Buy reprint rights for this chapter

The best way to get started with Macromedia Flash is to jump right in, so let's start with something you can show off immediately. We'll get your brain moving by doing some drawing, creating some funky designs, and learning to reuse graphics. The concepts behind the fun stuff will be discussed at the end of each chapter, but right now, let's get our hands dirty.

As explained in the Preface, the object of this book is to teach you to use Macromedia Flash to help you accomplish your goals, whatever they may be, and to give you a lot of good information on the basics without drowning you in details. Flash Out of the Box is much shorter than many other introductory books on Flash because it focuses on the information you need to know to accomplish your goals. It isn't intended as an exhaustive reference of every feature, but rather concentrates on the features you're likely to use and presents them in an engaging and digestible format. You'll learn to do what you want to do with Flash, and by the end of this book, you'll have the skills you need to explore further study or experiment more on your own.

Furthermore, you'll learn through progressive disclosure, which means the book provides information in the context of an exercise, when and where it's relevant. For example, this chapter doesn't cover everything there is to know about Flash's drawing tools. Instead, I'll show you how to use a few drawing techniques to create your first design in Flash, add color, and make an image reusable. In later chapters, I'll show you other ways to draw in Flash and expand on the skills gained here. Throughout the book, I'll also offer suggestions about how to apply your new skills in other projects and a reason to learn each technique.

This approach avoids inundating you, the reader, with more information than you can assimilate. Instead, we'll tackle Flash in small chunks so that you'll be able to absorb each concept and the required actions, allowing you to build confidence and a larger skill set over time. Most people can remember only four or five new things at once, but by chunking them into larger operations, you have to remember fewer things. For example, instead of having to remember every twist and turn of a road, you might simply follow directions that tell you to drive to the next light. Of course, this assumes you have the fundamental abilities to see the road, depress the gas pedal or brake pedal, and steer the car. If so, you can pursue the overall goal by remembering just one instruction: drive to the next light. This book revisits certain techniques and provides reminders to help reinforce the operations learned earlier to help you transfer them to your long-term memory. Over time, you'll master the mechanics of using Flash, allowing you to comfortably focus on your overall goal, such as creating a compelling application or 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!

Drawing Your First Box

Content preview·Buy reprint rights for this chapter

Many of Flash's drawing tools are similar to those in other graphics programs, which means you can apply information here to other programs, but some of Flash's tools behave in unique ways. Be aware that Flash's drawing tools are vector based. Mastering Flash's tools allows for precision drawing, so you'll quickly be creating visual masterpieces worthy of international design awards (right?).

We'll start with a method for drawing a box, which is one of the most commonly used shapes in design. If you are new to Flash, you'll feel comfortable in no time. And if you've already cracked it open a few times, you'll expand your horizons quickly.

Before we can start a design, we need to create a new Flash file:

1. Make sure you have copied the sample files (from the CD-ROM or web site) into a folder named FOTB (for Flash Out of the Box) on your hard drive, and make sure you have another folder, named 01, inside it.
2. Launch either Flash MX 2004 or Flash MX Professional 2004 (Flash Pro). The exercises in this book work the same in either version, as both share basic features.
3. When you launch Flash, the Start screen appears, as shown in Figure 1-1. Start screens are used in all Studio MX 2004 products, including Flash and Flash Pro. One cool reason to use the Start screen is that it keeps track of the last 10 opened documents, so those files are handy when you come back from lunch. Figure 1-1 shows the Start screen from Flash MX 2004. If you're using Flash Pro, the Start screen contains some additional templates and file types, which we'll ignore for now. Regardless, your Start screen will show your recently used files and may reflect automatic online updates provided by Macromedia, so each user's screen will vary slightly.
   

   Figure 1-1: The start Screen Knows What You've Been Doing
4. Under the Create New heading of the Start screen, click on Flash Document to create a new, blank Flash document (a .fla file, pronounced "flah"). Of course, you can use File → New → Flash Document to create a new document at any time.
   Flash documents are often called movies, but some developers prefer to use that term only for distributable

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

Filling Shapes With Color

Content preview·Buy reprint rights for this chapter

If you went through the exercises in the preceding section and didn't change the default colors, you should now have a blue box with a black border sitting on the Stage. Flash draws new shapes using whatever colors are already chosen in the Tools panel or Properties panel, which represent the shape's fill and stroke colors. See the "Fills and Strokes" sidebar for details.

Figure 1-4 shows the strokes and fills of a simple rectangle and how the stroke appears when selected partially or in its entirety.

Figure 1-4: Strokes and Fills (a single-clicked stroke on a box Versus a Double-clicked Stroke On A Box)

Next we'll use new colors to create a gradient pattern. Gradients, which are a type of fill, are useful because they produce a smaller file size than bitmap images, while still creating interesting effects.

Let's start by creating a solid fill:

1. Choose the Selection tool from the Tools panel, and click once inside the box on the Stage. The fill area inside the box should appear as a large collection of dots, indicating that it is selected.
2. In the Properties panel (which you can open with Ctrl-F3 on Windows or Cmd-F3 on Mac), notice the Pencil and Paint Bucket icons shown in Figure 1-5. The Stroke Color swatch (next to the Pencil icon) represents the current stroke color, and the Fill Color swatch (next to the Paint Bucket icon) represents the current fill color. A white box with a red line through it indicates "no color."
   Unlike many other drawing programs, Flash elements are drawn using fills and strokes, which are easier to understand if you experiment a bit with the various drawing tools. A fill is the area of color that fills up or constitutes a shape.

   For example, if you draw a free-form blob on the Stage, the colored area inside its border is its fill (even if the fill color matches the movie's background color, making the fill unnoticeable). The colored area is called a fill even if no border surrounds it.

   Fills can be split into multiple fills, and separate fills can be joined to create new shapes. They can also be grouped together (Ctrl-G or Cmd-G) or broken apart (Ctrl-B or Cmd- B) for editing purposes.

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 Reusable Graphics

Content preview·Buy reprint rights for this chapter

You may often need to use a graphic several times in one movie, whether it's a box, logo, or character. To avoid adding substantial file size to the finished project as a result, we use symbols. See the earlier "Symbols" sidebar for the scoop on symbols and their benefits.

Let's create a reusable box symbol that we can use in our designs. To create the symbol:

1. Create a new, blank document using File → New. Activate the Rectangle tool in the Tools panel and, using the Properties panel, set the stroke weight to 1, the stroke color to dark gray, and the fill color to light
2. Before drawing anything, double-click on the Rectangle tool icon in t he Tools panel. This opens the Rectangle Settings dialog box. (I f you click and hold on the Rectangle icon, it lets you choose between the Rectangle and PolyStar tools, so be sure to double-click.)
3. Set the Corner Radius to 10 and click OK. The Corner Radius option sets the roundness of the corners drawn with the Rectangle tool. Setting the Corner Radius to 0 gives our box sharp corners, while setting it to 10 gives our box a more rounded look.
4. Draw a square box (remember to hold down the Shift key to constrain the shape). You now have a nice, light gray box on the Stage with a dark gray stroke and rounded corners. Very stylish.
5. Select both the fill and stroke for the box (using the Selection tool).
6. Choose Modify → Convert to Symbol (F8). This opens the Convert to Symbol dialog box, shown in Figure 1-11.
   

   Figure 1-11: The Convert To Symbol Dialog Box
7. In the Name field, type the word box.
8. For the Behavior type, choose Graphic, then click OK to close the dialog box. You should see a blue line around the box you just drew. This indicates that it is now a symbol and is currently selected.

Every Flash movie (.fla document) you create has its own Library, which acts as a repository for all your movie's assets. You can open the Library panel using Window→Library, Ctrl-L (Windows) , or Cmd-L (Mac). When you import an asset, such as a PNG file, it is accessible from the Library. The same is true for sounds, video clips, and anything else you can import into Flash. The Library is convenient and efficient because it makes assets easy to find and reuse. The Library also holds all symbols (whether button, graphic, or movie clip symbols). Don't confuse the Library panel with, say, collections of ActionScript files that are sometimes referred to colloquially as libraries.

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 Layouts Quickly

Content preview·Buy reprint rights for this chapter

The techniques used in this chapter enable you to create and modify layouts efficiently, leaving you more time to daydream about the next project and prepare your speech for the awards ceremony that will inevitably follow.

Having to manually repeat common tasks, such as drawing a box, can slow you down. To speed up development, Flash can automate almost any set of steps. In this chapter, we'll explore some cool ways to streamline your workflow by automating the creation of a symbol, editing multiple instances of it at once, and getting things aligned with precision using almost no energy.

If you created all of those boxes in Chapter 1, you may be looking for a faster way to get the job done. Fortunately, there is a way! Understanding how Flash tracks the tasks we perform helps us automate the process. Soon, you'll be able to create a box with a mere flick of the wrist, so nothing will get in the way of your creative process.

The History panel is new to Flash MX 2004 and Flash Pro. The History panel begins as a blank slate and tracks actions as they occur so that tasks can be undone and redone step-by-step, recorded, and replayed, saving you time and energy. To take advantage of this feature, let's make some history:

1. Create a new, blank document and save it as history.fla in the 02 folder (in the FOTB folder on your hard drive).
2. Choose Window → Other Panels → History to open the History panel.
3. Activate the Rectangle tool (R), choose any fill and stroke colors you like in the Properties panel, and draw a square box (remember to hold down the Shift key to constrain the shape).
4. Use the Selection tool (V) to select the fill, then change the fill color to light gray.
5. Select the stroke by double-clicking on any edge, and change the stroke color to dark gray. Then deselect the stroke.
6. Double-click in the fill area of the square to select both its fill and stroke. Then move it off stage.

Have you noticed the History panel filling up with information? It tracks each task we perform in order, resulting in something like the histroy list shown in Figure 2-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!

Know Your History Panel

Content preview·Buy reprint rights for this chapter

If you created all of those boxes in Chapter 1, you may be looking for a faster way to get the job done. Fortunately, there is a way! Understanding how Flash tracks the tasks we perform helps us automate the process. Soon, you'll be able to create a box with a mere flick of the wrist, so nothing will get in the way of your creative process.

The History panel is new to Flash MX 2004 and Flash Pro. The History panel begins as a blank slate and tracks actions as they occur so that tasks can be undone and redone step-by-step, recorded, and replayed, saving you time and energy. To take advantage of this feature, let's make some history:

1. Create a new, blank document and save it as history.fla in the 02 folder (in the FOTB folder on your hard drive).
2. Choose Window → Other Panels → History to open the History panel.
3. Activate the Rectangle tool (R), choose any fill and stroke colors you like in the Properties panel, and draw a square box (remember to hold down the Shift key to constrain the shape).
4. Use the Selection tool (V) to select the fill, then change the fill color to light gray.
5. Select the stroke by double-clicking on any edge, and change the stroke color to dark gray. Then deselect the stroke.
6. Double-click in the fill area of the square to select both its fill and stroke. Then move it off stage.

Have you noticed the History panel filling up with information? It tracks each task we perform in order, resulting in something like the histroy list shown in Figure 2-1.

Figure 2-1: The History Panel

We've already seen how the Undo command can help us travel back in time, but the History panel allows us to retrace as many steps as we please by stepping through a written list of the tasks we have performed. At any point, we can step backward in the History panel and start again from a previous step, or simply repeat a sequence by choosing the steps to replay.

Let's see how it works:

1. Drag the history slider, indicated in Figure 2-1, up two steps to the step marked Double Click. The box on the Stage becomes selected again and moves back to its original position. Essentially, you're going back in time (so congratulations on figuring out the whole space-time continuum issue).

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

Alignment For Unlicensed Chiropractors

Content preview·Buy reprint rights for this chapter

Layout is vital when designing any project. The organization of elements on a page can make or break a good idea. A good layout can improve the user experience and ensure that you're communicating effectively, but planning and organizing a complex layout can quickly become difficult. One way to get started is to create a box symbol and use instances of it as placeholders before replacing them with real content. This way, you can design a layout without having to deal with text, images, animations, or other assets. I use this technique to get design ideas onto the screen and the creative juices flowing. Let's create a box symbol, design a layout, and employ some of Flash's alignment tools to speed up the process.

Let's create and position the first box in our layout using rulers and guides.

1. Create a new Flash Document (File → New → Flash Document) and save it as layout.fla in the 02 folder.
2. Run the Make a Box command (Commands → Make a Box). This adds Symbol 1 to the Library and an instance of the symbol to the Stage.
3. In the Library, change the name of Symbol 1 to box. To do this, double-click on the name of the symbol in the Library, type the new name, and press Enter or Return to commit the change. (Be sure to double-click the symbol's name; if you double-click the symbol icon in the Library instead, you enter Symbol Editing mode as described in the later sidebar "Symbol Editing Mode.")
4. Go get a ruler, preferably 12 inches or longer. You'll hold it up to your monitor to measure the distance between objects on the Stage. (I'm just kidding. Really. Put the ruler down.)
5. Choose the View → Rulers menu option. Rulers appear, using pixels for measurement, along the top and left sides of the Stage, as shown in Figure 2-6. Notice that the upper-left corner of the Stage is aligned to (0, 0).
   

   Figure 2-6: Rulers Help Align Elements On the Stage
6. Click on the horizontal ruler, which is parallel to the top edge of the Stage, and drag downward. This creates a guide (a green line). Drag the guide down, past the top edge of the Stage, and watch the vertical ruler (which runs parallel to the left edge of the Stage) as you do it. Release the guide when it is aligned to 10 pixels below the top edge of the Stage (when the vertical ruler's measurement mark for 10 turns white).

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

Behind every good Symbol Is A Good Editor

Content preview·Buy reprint rights for this chapter

An important factor in feeling good about your design choices is knowing that you can experiment now and always change things later. You may be wondering how to change an existing symbol. In this case, we need to get rid of the stroke in our box symbol to refine the look of the layout and eliminate the distraction of the distorted lines.

To edit the symbol:

1. Select any instance of the box symbol on the Stage.
2. Choose Edit → Edit Symbols.

You've just entered the fourth dimension, where there are no physical boundaries, and space exists endlessly. Actually, you've entered Symbol Editing mode, but some strange things have happened nonetheless. For starters, the other content on the Stage fades into the background. Also, the Edit bar, as shown in Figure 2-9, now says Scene 1, box. Finally, there is a small + (crosshair) symbol in the upper-left corner of your box. Before you go Jerry Maguire (and just freak out), take a deep breath and see the "Symbol Editing Mode" sidebar for more information.

Figure 2-9: The edit bar, While In symbol Editing Mode For The Box Symbol

As discussed in Chapter 1, a symbol is an object, or a set of instructions used to define how all the instances of the symbol appear and function in a movie, and Symbol Editing mode is the editing environment for the instructions. Anything you do in Symbol Editing mode affects each and every instance of that symbol in your movie—instantly. If you change the color of the box symbol, and there are 10 instances of the symbol in your movie, every instance will reflect the change instantly.

Although all instances of a symbol share a common instruction set, each instance can have its own characteristics or properties. For example, instances of the box symbol can have different colors, dimensions, and levels of opacity while still being derived from a single symbol. Altering the properties of symbol instances allows us to use the same symbol in many different ways. For example, in Chapter 3, we change the color of several instances of the box symbol to create a color fade effect.

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: Your First Animation

Content preview·Buy reprint rights for this chapter

Now that you have some drawing skills under your belt, you're ready to start making graphics fly around the screen—but please don't. Animation can be an effective method of communication, or it can seriously damage the user experience. So animate responsibly.

Flash started as a web animation tool and remains one of the best on the market. Unfortunately, arbitrary motion graphics can repel users. Conversely, a well-thought-out and subtle animation can help make a killer first impression when it is part of a larger presentation.

Often, animation can be the key to a more engaging presentation, effective charts and graphs, and entertaining online advertisements. Flash animation has been used for everything from movie credits and DVD menus to billboards on the roofs of taxicabs. In this chapter, you'll use a few essential animation techniques to create your first animated Flash movie: a short ad for Flash Out of the Box. Later, you'll further your skills by morphing a graphic from one shape to another and publishing a Flash .swf file for use on the Web.

The animation is straightforward. We'll draw a series of colored boxes and then add the text, "Flash Out of the Box" as seen in Figure 3-1. Of course, we'll jazz it up a little by making the boxes grow and the text slide into place—just enough to catch the reader's eye without assaulting him.

Figure 3-1: The Flash out Of The Box Video

We'll also export the Flash animation to QuickTime format. Don't confuse a Flash .fla source file or .swf published file—often called a "movie"—with the QuickTime .mov video format, also called a "movie." If you have QuickTime already installed, you can see the final video by running video_complete.mov from the 03 folder. When you're done, close the file.

We need to do a few things to prepare the animation, so let's get started.

The Stage's size determines the dimensions of your published Flash movie, but the default Stage size (550 x 400 pixels) is rarely the size you need, so let's set up a new file for the animation we'll create. We'll set the Stage dimensions to 500 x 100 pixels and set the background to black. Always set the Stage properties before starting the animation to avoid having to redo a lot of work.

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

Customizing Movie Properties

Content preview·Buy reprint rights for this chapter

The Stage's size determines the dimensions of your published Flash movie, but the default Stage size (550 x 400 pixels) is rarely the size you need, so let's set up a new file for the animation we'll create. We'll set the Stage dimensions to 500 x 100 pixels and set the background to black. Always set the Stage properties before starting the animation to avoid having to redo a lot of work.

Increasing the Stage's height adds pixels to the bottom edge of the Stage, and increasing its width adds pixels to the right edge. If you change the Stage dimensions after you create a movie, keep in mind that the content doesn't move relative to the Stage's top-left corner, (0, 0).

A .swf file is published for the Web by embedding it in an HTML page, just as you'd embed a GIF or JPEG image. You can resize a .swf file in an HTML page using the width and height attributes of the <embed> or <object> tags, but this can have unexpected results, such as an elongated or distorted appearance. Also, if your movie contains bitmap images, they can appear grainy as a result of being stretched. Bitmaps should always be brought into Flash at the largest dimensions needed for the movie. Bitmaps that are scaled down maintain a high-quality look, but enlarging a bitmap in Flash makes it look pixelated.

That said, you should try to keep your bitmaps as small as reasonably possible to reduce the download time. The best solution is to import bitmaps at the same size you want them to be in the final animation. You can scale your bitmaps using Fireworks or Photoshop before bringing them into Flash. Interestingly, designers sometimes use low-quality bitmaps and graphics intentionally to achieve a pixelated look as part of a design style, as seen in Boy Meets Pixel at Flip Flop Flyin' (http://www.flipflopflyin.com/boymeetspixel).

To see the completed animation before we start, open the animation_complete.swf file in the 03 folder by double-clicking on the file. If you have Flash installed, the file should open in a standalone version of the Flash Player that is included with the Flash MX 2004 authoring tool. (Some

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

Customizing Multiple Boxes

Content preview·Buy reprint rights for this chapter

The animation starts with boxes of different colors appearing on stage. We can keep the file size down by using multiple instances of a single box symbol.

So let's create a box in the Library and add instances of it to the Stage:

1. Create a square box symbol (using the Make a Box command we created in Chapter 2). Rename Symbol 1 in the Library to box_gr. Using the "_gr" suffix makes it easier for you and other developers to identify the Library symbol as a graphic (we'll talk later about other types of symbols).
2. Create four more instances of the box_gr symbol. Remember, you can create a new instance by either Alt-dragging an existing instance on the Stage when using Windows (use Option-drag on the Macintosh) or by dragging a symbol from the Library panel to the Stage.
3. Line up your five instances of the box_gr symbol horizontally on stage, from left to right. You don't need to be exact, because we'll get Flash to align them automatically for us, but make sure they don't overlap.

Let's align and distribute the box_gr instances across the Stage so they look like Figure 3-3, and we'll have a good starting point for the animation. To make sure all of the boxes fit on the Stage, let's change the dimensions of each instance to 90 x 90 pixels and then align them using the Align panel:

Figure 3-3: Five Boxes, Distributed From Horizontal Center

1. Select the leftmost box_gr instance and change its dimensions to 90 x 90. Remember, if you lock the padlock icon in the Properties panel, setting the width changes the height proportionately and vice versa.
2. Shift-select all five instances on the Stage.
3. In the Align panel, click the Match Width and Height button indicated in Figure 3-3. This resizes all of the box_gr instances to match the largest selected instance, which is the one you sized in Step 1. All five instances should now be 90 x 90 pixels. If you're having trouble with the automatic resizing, select each instance individually and change the dimensions manually in the Properties panel.

The positioning of objects on the Stage is an important element in good design. Precise alignment and distribution makes a subconscious impression on users that your work is more professional than that of a designer who positions objects loosely.

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

Animation

Content preview·Buy reprint rights for this chapter

The tension has been mounting, and it's finally time to animate. Instead of animating each box individually, however, we'll animate all five at one time. (Shocking, isn't it?)

Why are we creating five animations at once? Well, because we can. There's no reason to create each one individually when we can do them all at once and consolidate our workload. The first thing to do is add keyframes to create the endpoints for the animation. Keyframes can also be used to define midpoints in animations, but for this animation, we need only two keyframes.

For the first part of our animation, we want the boxes to transition from one color to another over time. For now, we'll perform the animation over 20 frames.

To change the colors of the boxes:

1. Starting at frame 20 of the box 1 layer, click and drag downward to select frame 20 on every layer in the timeline. (If you can't see all of the layers, enlarge the Timeline panel by dragging its bottom edge downward, as indicated in Figure 3-8.)
2. Choose Insert → Timeline → Keyframe. A keyframe (represented by a small black dot in the timeline if there is content on the frame, as indicated in Figure 3-8) is added to the selected layers at frame 20. A keyframe represents a point of change for a graphic or other asset in a movie. We now have an endpoint for the animation.
3. One at a time, select the layer for each box instance at frame 20 and change the tint color using the Properties panel. Use any colors you like, but pick ones that contrast with the original tint set in frame 1, so our color effect is visible. Be sure you have selected only the instance at frame 20 when setting the new tint color.
4. Press Enter or Return (or choose Control → Play) to play the animation within the Flash authoring tool, as opposed to testing it in the Flash Player.

Figure 3-8: The Timeline Panel

The playhead, indicated in Figure 3-8, moves from frame 1 to frame 20 and stops, but nothing on the Stage changes until the keyframe at frame 20 is reached, at which point the boxes change color.

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 Text For Animation

Content preview·Buy reprint rights for this chapter

Text is often an integral part of an animation, drawing the eye to key terms that need to stand out in the design. In the completed version of our animation, the title of this book, "Flash Out of the Box," appears one word at a time, moving in from different directions. In this ad, the boxes serve to initially attract the user's attention, and the animated text completes the effect. A short animation such as this one serves its purpose without being gratuitous.

When choosing a font, be sure to pick one that matches the needs of the piece. If you are going to use more than one font, be mindful of the fact that designers sometimes use too many fonts or fonts that are too similar. Use no more than two or three fonts, and make sure they are dissimilar enough that the user can appreciate the difference instead of thinking she's merely viewing an inconsistent design. The same holds true for the point size of text within a single font, or even across different fonts. If you're using more than one font, you'll generally want to use a different point size for each font. If all text is similar, you're better off sticking with a single font at a single point size. (Reducing the number of fonts also helps to keep the .swf file size down.)

Let's add the text to the movie:

1. Add a new layer folder to the timeline above the boxes layer folder. Remember, to create a layer folder, click the Insert Layer Folder button in the Timeline panel. Name the layer folder text. If necessary, drag the new folder outside the boxes folder in the layer stack (it may appear inside the boxes layer folder, depending on whether the boxes folder is open and/or selected).
2. Add a new layer by clicking the Insert Layer button in the Timeline panel, as indicated in Figure 3-8. The layer appears above the text layer folder, so drag it onto the layer folder name to move it into the folder.
3. Activate the Text tool from the Tools panel and click once on the Stage to create a static text field. Set the Field Type drop-down list in the Properties panel to Static Text, as shown in Figure 3-12. Return to the text field on stage and enter the word

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

Publishing Your Movie

Content preview·Buy reprint rights for this chapter

The animation is done, but your work cannot be shown outside the Flash authoring environment without publishing the movie, so let's get it ready.

Publishing a Flash movie is the act of exporting the completed version of a .fla file (pronounced "flah," as in "rhymes with Rock the Casbah") as another file type. The .fla format is used only for editing within the Flash authoring environment; it is too bloated with excess information (and too unprotected) to be appropriate for distribution. Another file type must be created to make the movie compatible with the various client software used to run Flash content, such as the Flash Player and QuickTime Player. Upon publishing Flash content for the Web (for use with the Flash Player browser plugin), the .fla file is compiled into a self-contained .swf file (pronounced "swiff") for use online. You can also publish QuickTime movies (.mov files), static .gif or .jpg images, or Projectors (.exe files or Macintosh applications). Many of these published file types are discussed throughout this book.

Flash can also automatically create an HTML page in which to display your Flash .swf file. That is, users don't ordinarily browse directly to the URL for a .swf file. Instead, developers ordinarily publish an HTML file in which the .swf file is embedded (using the HTML <object> and <embed> tags). That allows you to publish a .swf as an element on an HTML page along with other content. That said, sometimes you'll want the .swf file to be the only thing on the page and to fill the browser window.

The first step to getting our movie online is publishing it as a .swf file. Here we use the word publishing in the sense that Macromedia uses it—meaning "to generate a file" not "to release it on the Web."

Let's publish the movie and see how it performs:

1. With the Stage selected, choose the Settings button in the Properties panel. The Publish Settings dialog box opens to the Flash tab, as shown in Figure 3-19.
   

   Figure 3-19: The Publish Settings Dialog Box
2. Our current movie will play in older versions of the Flash Player, but realistically, most users have at least Flash Player 5 on their machines (see

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: Interactivity and Movie Clips

Content preview·Buy reprint rights for this chapter

Where do animators find the patience to create entire cartoons by hand using Flash? Well, they don't. To simplify the process, animators use another type of symbol in Flash called a movie clip. This chapter shows you how to use movie clips to great advantage, and how to control them via ActionScript.

In Chapter 3, we created a simple animation entirely on the main timeline. But what happens when we need to create more complex animations, such as for a cartoon character? A cartoon character usually has several moving parts, such as its mouth, eyes, arms, and legs. If we had to animate the legs every time the character walks and animate the mouth every time the character speaks, it would be very time-consuming. Furthermore, to add variety would require us to create multiple permutations, such as walking while talking versus walking while not talking. In this chapter, we'll look at how movie clips allow us to create animations that play independently of one another. While creating Box Guy, the unofficial mascot for Flash Out of the Box , we'll use separate movie clips for his eyes and legs.

Before we begin animating, we need to construct our cartoon character. To do this, we'll use the Pencil tool, layers, and symbols. Once all the parts are built, we'll bring the character to life through animation.

The first thing we need for our cartoon character is a body. Since this character will serve as a mascot for this book, we'll make his body from a box and then add a face and legs. By doing this, we'll see how the configuration options for the Pencil tool affect the outcome of each drawn line. In more complex situations, you might sketch some character prototypes on paper and create a storyboard for the animation. But here we focus on how to use Flash rather than exploring techniques common in traditional cel animation.

Let's start by creating the body for the character. Later on, we'll create a background image of a street and change the Stage color to sky blue. The character will walk down the street and stop.

First, we have to create a document and configure our Pencil 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!

Drawing A cartoon Character

Content preview·Buy reprint rights for this chapter

The first thing we need for our cartoon character is a body. Since this character will serve as a mascot for this book, we'll make his body from a box and then add a face and legs. By doing this, we'll see how the configuration options for the Pencil tool affect the outcome of each drawn line. In more complex situations, you might sketch some character prototypes on paper and create a storyboard for the animation. But here we focus on how to use Flash rather than exploring techniques common in traditional cel animation.

Let's start by creating the body for the character. Later on, we'll create a background image of a street and change the Stage color to sky blue. The character will walk down the street and stop.

First, we have to create a document and configure our Pencil tool:

1. Open a new, blank Flash document and save it as box_guy.fla in the 04 folder.
2. Change the Stage dimensions to 550 x 200.
3. Choose Edit → Preferences (on Windows) or Flash → Preferences (on the Mac) to open the Preferences dialog box. Choose the Editing tab of the Preferences dialog box.
4. In the Drawing Settings section of the Editing tab, set the following options to Normal: Connect Lines, Smooth Curves, Recognize Lines, Recognize Shapes, and Click Accuracy. A bug in Flash MX 2004, including the 7.0.1 updater, leaves some of the drawing settings blank by default, which prevents the drawing tools from working properly. This is fixed in the 7.2 update (included on this book's CD-ROM). These options determine how the Pencil tool behaves as you draw. Click OK to close the Preferences dialog box.
5. Activate the Pencil tool. By default, the Pencil tool mode—in the Options section of the Tools panel as shown in Figure 4-1—is set to Straighten. (If it's not already set to Straighten, set it now by clicking on the current option setting.)
6. In the Properties panel, set the Pencil tool's stroke color to dark gray, set the stroke weight to 1, and choose Solid for the stroke style.

Now that we've got the Pencil tool configured, let's see what happens when we try to draw a box:

1. On the Stage, use the Pencil tool to draw a square. To do this, click and drag to draw the first line, release the mouse button (or lift your stylus), then draw the second line, and so on. Notice that each line straightens automatically after you draw it. Unless you're better at drawing connecting lines than I am, your square probably looks a little messy, so let's try something else.

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

Controlling the Character With Actionscript

Content preview·Buy reprint rights for this chapter

As we saw in Chapter 3, we need to add a stop() action to the main timeline to prevent the animation from looping. (The words action and command are often used interchangeably; both refer to an instruction programmers write in ActionScript to tell Flash what to do.) In addition, we need to tell the legs to stop moving when the character is standing still. To do this:

1. Close the Preview window and return to Scene 1 (using the Edit bar).
2. Add a new layer to the main timeline and name it actions. Remember, it's good practice to keep all ActionScript on its own layer so it's easy to find.
3. Add a keyframe to frame 60 on the actions layer.
4. Open the Actions panel (Window → Development Panels → Actions or F9).
   In the Script pane of the Actions panel, add the command stop(); on frame 60. This causes the main timeline to stop animating once frame 60 is reached. As a best practice, you should include the semicolon after stop() to signify the end of the command. In simple cases such as this, the semicolon is optional because Flash can guess where the end of the command is (as indicated by the carriage return at the end of the line). But commands can be split onto multiple lines, making it harder for Flash to guess where the command ends, so it is good practice to include the semicolon at the end of each command. As a general rule, if a command is broken onto multiple lines, the semicolon belongs at the end of the last line. We'll talk more about semicolons in Chapter 7.
5. Although the main timeline will stop, the legs will keep animating because the legs_mcclip has its own independent timeline. Press Enter or Return to insert a blank line in the Script pane and add the following ActionScript to make the legs stop moving: box_guy _mc.legs_mc.stop();.

This last line of code, added to the main timeline, is simply another stop() command, but it's targeted at the legs_mc instance located inside the box_guy_mc instance.

ActionScript can target movie clips on the main timeline or clips nested within other clips. For example, to stop the legs from walking, we could place the following action on the main 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!

Controlling Movie Clips

Content preview·Buy reprint rights for this chapter

Movie clips can be assembled to create independent animations and controlled through ActionScript, as we saw in the last section, in which we used a stop() command to stop the animation of Box Guy and his legs. We can also allow the user to control the movie clips if we implement the necessary functionality and a user interface to control it. For example, we can tell Flash to restart the animation when the user clicks on the character. To accomplish this, we add an event handler to our ActionScript. An event handler tells the Flash Player, "When an event—such as the user clicking on the character—occurs, perform the following action(s)." In this case, the desired action is to replay the animation. How do we do this?

Whenever the user clicks on Box Guy, we'll send the playhead back to frame 1 and restart the main timeline and the legs. To restart the animation:

1. On frame 60 of the actions layer, add the following code using the Actions panel. This is our event handler. The onPress() event handler tells Flash to perform this action when the user clicks the mouse on the specified clip (in this case, box_guy_mc):

   	 box_guy_mc.onPress = function () {
   	   gotoAndPlay(1); 
   	   };
   

2. Add a play() action to the event handler to restart the animation of the legs from where it last left off (changes shown in color):

   	box_guy_mc.onPress = function () {
   	  gotoAndPlay(1);
         this.legs_mc.play();
   

3. Save your work and test the movie.
4. When the character stops walking, click on it to replay the animation.

The script you wrote sets up a function that runs when you click on the box_guy_mc clip in the movie.

Note that, as a best practice, we placed this code on the main timeline, not the clip's timeline. Therefore, the clip names are relative to the main timeline. To refer to a clip nested within a clip, we can use an expression that specifies a complete path (known as targeting) down the hierarchy.

In some situations, the best practice is to place ActionScript in external .as files (in fact, this is required when writing custom ActionScript 2.0 classes). For details on ActionScript 2.0 best practices, see

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 5: Using Images and Video

Content preview·Buy reprint rights for this chapter

Flash can be thought of as a multimedia construction kit. This chapter shows how images and videos can be imported from external sources and combined into an elegant Flash piece. Along the way, we'll learn a lot about optimization while improving our design skills.

Flash's drawing tools are primarily vector-based, and so aren't ideal for editing bitmaps. We'll cover a few bitmap-related tricks in Chapters 6 and 7, but meaningful bitmap editing requires a program designed for that purpose, such as Adobe Photoshop or Macromedia Fireworks. In this chapter, we'll look at how integrating Flash with other applications helps us meet our design needs for a project.

While Photoshop and Illustrator are the standard tools for graphics editing and creation, Macromedia has done a lot to ensure that Fireworks and Flash work well together. As a result, Fireworks is a viable alternative for web-based graphics development. If you purchased Studio MX 2004, Fireworks is likely already installed on your machine and dying to be put to use. If not, go install the trial version now from the CD-ROM included with this book …I'll wait.

In addition to bitmaps, video is a wonderful way to offer high-quality content to users through Flash, and Flash is actually quite powerful when it comes to compressing and deploying video online. We'll explore video in Flash as we create an online ad for a pet adoption event. Throughout this chapter, and indeed the entire book, we use the term movie to refer to a compiled .swf file, and the term video when referring to QuickTime .mov files or other video formats.

Locate scrappy_complete.swf in the 05/complete folder and open it to see what we'll be creating. The movie features a bitmap, text, a semi-opaque box (of course, there had to be a box in there somewhere), and a video. Each element, whether created in Flash or another program, must be imported into our Flash document to complete the project. Let's see how it's done.

To get our Adopt-a-Dog-athon ad started, we'll import an image to use as a background. I've captured a PNG image from the video we'll use later on in this chapter. To set up our Flash movie and import the PNG image:

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 Other Software

Content preview·Buy reprint rights for this chapter

Locate scrappy_complete.swf in the 05/complete folder and open it to see what we'll be creating. The movie features a bitmap, text, a semi-opaque box (of course, there had to be a box in there somewhere), and a video. Each element, whether created in Flash or another program, must be imported into our Flash document to complete the project. Let's see how it's done.

To get our Adopt-a-Dog-athon ad started, we'll import an image to use as a background. I've captured a PNG image from the video we'll use later on in this chapter. To set up our Flash movie and import the PNG image:

If need be, you can install Fireworks or FreeHand from this book's CD-ROM. If you don't want to install them, you can skip the exercises that require them and use the .fla and .swf files provided on the CD-ROM instead. To work with the video, you'll need QuickTime. If you do not already have QuickTime, visit http://www.apple.com/quicktime to download and install it. Don't worry—although QuickTime Pro costs $29.99, the free version is sufficient for our needs. Leave your credit card in your wallet.

1. Create a new, blank document and save it as scrappy. fla in the 05 folder.
2. Change the Stage dimensions to 500 x 400. Leave the background white, but change the frame rate to 18.
3. Rename Layer 1 to bg (short for background). As we add elements to the project, we'll keep this as the bottom layer to ensure the background image appears behind everything else. (If you're familiar with Macromedia Director, the order in which Flash displays layers in the timeline is the reverse of the order in which Director displays sprites in its score. You'll get used to it.)
4. Choose File → Import → Import to Stage (Ctrl/Cmd-R) and locate still.png in the 05 folder. Select it and click Open. Flash's Fireworks Import PNG Settings dialog box opens.
5. Check the Import as Single Flattened Bitmap option and click OK. The image imports and is placed on the Stage. Note that frame 1 of the bg layer, where the image was imported, is now a keyframe because it contains content. (Flash always converts frame 1 to a keyframe the first time content is added to 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!

Importing, Compressing, and Using Video

Content preview·Buy reprint rights for this chapter

Now that we have the background image, logo, and text we need for our project, it's time to prepare the video. As with bitmaps, we can simply import the video and use the Flash Player to display it. However, video files are usually too large to post online without some sort of compression. Flash to the rescue!

Flash MX and Flash MX 2004 have a video codec built into them, courtesy of a software developer named Sorenson. Sorenson's commercial product, Squeeze, is a powerful tool used by many video gurus to compress video. A lite version of the codec, named Spark, is built into Flash. What does this mean to you? It means you can dramatically decrease the file size of video through Flash while maintaining high-quality playback. However, you need to take a few steps that I've never seen covered in any other tutorial I've read, online or in books. In the following sections, you won't just learn to use video in Flash, you'll learn to use it efficiently.

We want to add a video of a dog to our ad. The raw video is too large for online distribution, but we'll tackle compression shortly. For now, we'll simply import the external video as follows:

1. Insert a new layer between the bg and assets layers, and name it video.
2. Choose File → Import → Import to Stage, locate SniffingForCats.mov in the 05 folder, and select it. The Video Import Wizard opens.
3. From the first screen of the wizard, choose Embed Video in Macromedia Flash Document and click Next. (Alternatively, you can choose to link to an external video file, but this works only if you publish a QuickTime movie instead of a .swf.)
4. From the second screen of the wizard, choose Import the Entire Video and click Next.
5. Choose DSL/Cable 256 Kbps from the Compression Profile drop-down list. This option determines how much the video will be compressed to play within the bandwidth requirements. Do not click Next yet.
6. From the Advanced Settings drop-down list, choose Create New Profile. This opens the Advanced Settings dialog box.

The Advanced Settings dialog box, shown in Figure 5-7, is used to adjust attributes of the video, such as color, contrast, and brightness. We'll use this screen to make sure Scrappy the dog looks as good as he can. We'll adjust the image quality and then crop off the edges of the video:

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 6: Building an animated Ad

Content preview·Buy reprint rights for this chapter

In this chapter we continue our exploration of Flash animation, including text effects, shape tweens, visual transitions, and timeline effects. We'll see how understated animation can contribute to an effective and compelling design.

Despite the fact that Flash is not a powerful bitmap editor, it is capable of creating some cool effects. All it takes is a little creativity and some know-how. In this chapter, we'll take a look at the techniques used to create text, graphic, and bitmap effects. What you learn here will prepare you for Chapter 7. The two chapters together give you a glimpse of the skills used to create sites like the over-the-top 2Advanced Studios (http://www.2advanced.com) and many others, so get ready to use some cool Flash design techniques.

By the way, I don't necessarily recommend designing Flash sites like the 2Advanced Studios site. While the effects and transitions are visually very cool, many users will find the heavy use of eye candy intrusive when trying to acquire information from the site. That said, you can create many effects in Flash that not only support your content, but can bring it to life via the art of motion and graphic design.

First, we'll use Flash to create two more animations and increase our ability to bring our ideas to life. We'll start by creating a typewriter effect, which will give us practice using text animation. Many of the same principles apply to motion graphics, but it is easy to create the text so we can focus on the animation. Text effects can be used in the most conservative sites (such as PowerPoint-like presentations) to the most extravagant (say, modeled after the famous green text waterfall in The Matrix).

To perform certain text effects, such as rotating text, the outline of the font must be available at runtime. In such a case, embedding the font is necessary but will also add to the .swf download size. Such text effects won't work with device fonts (those available on the system at runtime) because the outline information isn't available.

To embed the necessary font information in the .swf file:

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

Revealing objects Over Time

Content preview·Buy reprint rights for this chapter

First, we'll use Flash to create two more animations and increase our ability to bring our ideas to life. We'll start by creating a typewriter effect, which will give us practice using text animation. Many of the same principles apply to motion graphics, but it is easy to create the text so we can focus on the animation. Text effects can be used in the most conservative sites (such as PowerPoint-like presentations) to the most extravagant (say, modeled after the famous green text waterfall in The Matrix).

To perform certain text effects, such as rotating text, the outline of the font must be available at runtime. In such a case, embedding the font is necessary but will also add to the .swf download size. Such text effects won't work with device fonts (those available on the system at runtime) because the outline information isn't available.

To embed the necessary font information in the .swf file:

1. Create a text field.
2. Use the Properties panel to set the text field's type to Dynamic Text.
3. Click the Character button in the Properties panel to open the Character Options dialog box (if you don't see the Character button, make sure your text field's type is set to Dynamic Text, not Static Text).
4. In the Character Options dialog box, under Embed Font Outlines For, select the Specify Ranges radio button.
5. Choose the character ranges, such as Uppercase [A.Z], to embed from the scrolling list. To select multiple contiguous items, hold down the Shift key when clicking. To select discontiguous items hold down the Ctrl key (Windows) or Cmd key (Mac) while clicking.

To create a typewriter effect, letters in a line of text are revealed in succession instead of all at once. To do this:

1. Create a new Flash document and save it as frame_by_frame.fla in the 06 folder.
2. Change the Stage dimensions to 300 x 50 and set the frame rate to 10 fps. Slowing down the frame rate often improves playback performance on slower machines, and in this case, a higher frame rate is not necessary.
3. Activate the Text tool and choose the _typewriter font from the Properties panel's font drop-down list. If you don't have this font, choose any font you like.

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

Animated Transitions

Content preview·Buy reprint rights for this chapter

Creating frame-by-frame animation by hand can be extremely time-consuming, particularly when creating transitions such as shapes that morph into other shapes or illustrations that sharpen over time into photographs. But transitions such as these are an intriguing way to introduce graphical elements to a movie or carry the user from one page, or state, to another. In this section, we'll explore animated effects that can give your movie a professional touch and help maintain a unifying theme throughout a Flash project.

An oft-seen transition technique is one in which an interface appears to draw itself, line by line, until it is complete and filled with content. An example of this can be seen at the American Splendor site (http://www.americansplendormovie.com), where a set of panels for a comic strip is drawn right in front of you and filled with images. This can be done with motion tweens, but it would involve using masks, which we'll talk about in Chapter 10, and would be more complicated than it needs to be. The solution? Shape tweens.

Let's see how it's done by creating line art of a house with a gradient background. First, we'll make a vertical line that appears to extend upward over time:

1. Create a new Flash document and save it as shape_tweens.fla in the 06 folder. Change the frame rate to 18 fps. Use the default Stage dimensions.
2. Activate the Line tool and set the stroke color to black with a stroke weight of 1.
3. Draw a very short and straight vertical line at the bottom of the Stage, toward the right side.
4. Convert frame 5 to a keyframe (by pressing F6).
5. At frame 5, activate the Selection tool and move the cursor over the top end of the line you drew in Step 3. The cursor displays a small right angle icon next to it. This means you are hovering over the endpoint of a line.
6. Click and drag upward to extend the length of the line to the vertical center of the Stage.
7. Select a frame on Layer 1 between frames 1 and 5. Choose Shape from the Tween drop-down list in the Properties panel. The frame span turns light green and an arrow appears between the two keyframes, as shown in Figure 6-3.

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

Timeline Effects

Content preview·Buy reprint rights for this chapter

Speaking of shadows, Flash MX 2004 has the built-in ability to automate the creation of several effects, such as a drop shadow. (Nice segue, huh?)

Let's get familiar with timeline effects by quickly adding a drop shadow to a graphic. After this, we'll take a look at a custom timeline effect.

To implement the drop shadow effect, we'll use the same process I use any time I want to test out a new effect very quickly. I draw a box on the stage, convert it to a symbol, and apply the effect to it. In fact, this process is what sparked the idea for Flash Out of the Box