Flash 8: Projects for Learning Animation and Interactivity

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

In this chapter, you'll gain your first experience with Flash's vector drawing tools. Many of Flash's tools are similar to those available in other applications, so you may be able to apply some of what you already know to Flash. However, some of Flash's tools behave in unique ways. For example, Flash builds everything you draw using vectors. So, although using Flash's Brush tool will feel similar to using a brush tool in a bitmap editing application such as Photoshop, what you draw will actually be a vector shape.

Flash's selection tools also behave a bit differently than those in a typical drawing application. You can select a shape's fill or stroke independently, and even separate the two. Also, using the Lasso tool, you can freely draw a selection path across any shapes and work only with the selected portion of those shapes. This combination of pixel-and vector-based drawing approaches makes creating Flash assets a natural and immediate experience.

If you are comfortable with traditional vector drawing applications, don't worry; you will also find a Pen tool for creating Bezier curves complete with vertices and control points in Flash. However, even if you are unfamiliar with these terms, you'll still be able to jump right in and start creating.

Your first proect is to create a graphic you might use in a psychedelic poster illustration of guitar legend Jimi Hendrix. You'll begin by drawing a box, which is one of the most commonly used shapes in design and a frequently used metaphor in this book. Next, you'll customize your lines and fills, add a vibrant array of colors, and draw Jimi's silhouette. The techniques used in this chapter are the first steps in learning to create assets within Flash, and they are commonly used for animation, illustration, game development, application design, and virtually anything else you'll do in Flash.

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

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

Drawing a box is easy, so in this proect you'll also look at a few ways to enhance your drawing with color and stroke properties. If you're new to Flash, fear not—you'll feel comfortable in no time.

When you launch Flash for the first time, the Start screen appears, as shown in Figure 1-1. This is merely a handy launch utility, and if you find it intrusive, you can disable it in the lower-left corner of the panel. One of the reasons you may want to use the panel is that it keeps track of the last 10 documents you opened (although you can also access this list via the File → Open Recent menu command).

Figure 1-1: The Start screen knows what you've been doing

All of the exercise files in this book are available on the accompanying CD-ROM and from http://www.flash8projects.com. Copy or download the examples, and put them somewhere on your hard drive where you can find them easily. Hereafter, this will be called your "working directory."

The assets you need for each exercise (images, sound files, and so on) have been grouped into numbered folders for your convenience. For example, any assets required for Chapter 1 can be found in the 01 folder. It's a good idea to preserve this directory structure to make it easier to find any referenced files.

In many cases, completed exercise files have also been included. Occasionally, you may want to start with a specific instruction and continue from there. However, you'll benefit most by going through the exercises step by step.

If you haven't already installed Flash 8, a 30-day trial version is also included on the accompanying CD-ROM. Installing the Professional version of Flash 8 will allow you to get the most out of the exercises in this book.

The second column of the Start screen allows you to create a new Flash document. Figure 1-1 shows the Start screen from Flash 8 Professional, which includes additional file types. You'll learn a little more about some of these files later in this book. In Chapter 13, you'll also learn how to use templates. For now, though, you'll focus on your first steps.

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

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

When you're drawing or editing a shape, Flash independently colors fills and strokes. You can change the colors via the Tools panel or the Properties panel when a shape or shape tool is active. In both locations, a small pencil icon indicates the stroke color, and a small paint bucket icon indicates the fill color.

There are two simple ways to change a shape's fill or stroke color. First, you can change the fill color of a selected shape using the pop-up color swatch utility:

Choose the Selection tool from the Tools panel, and click once inside the box on the Stage. The fill area will appear as if seen through a screen, indicating that it is selected.
In the Properties or Tools panel, click on the Fill Color swatch. A palette of colors will pop up, and you'll be allowed to select from the default web-safe swatches. A white box with a red line through it at the top of the pop-up indicates that no fill will be used, allowing underlying assets to be visible within the borders of the shape.
Deselect the box to view the results. You can deselect by using Edit → Deselect All, or by clicking in any unoccupied area of the Stage or Work Area (the area surrounding the Stage). Deselecting is often required to avoid editing an active element, and it will soon become second nature.

Unlike in many other drawing programs, Flash elements are drawn using separate fills and strokes. Although this can take some getting used to, it can also be very helpful. The best way to understand how fills and strokes work is to do a little experimenting. You may want to open a new document so that you can tinker while reading without affecting your ongoing exercises.

A fill is the area of color that fills the inside of a stroked shape or constitutes the body of a borderless shape. For example, if you draw a free-form blob on the Stage, the colored area inside its border is its fill. The colored area is called a fill even if no border surrounds 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!

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

So far, you've been using Flash's default Merge Drawing mode. In this mode shapes can interact with one another, merging together when they overlap. For example, if the corners of two squares overlap, the frontmost shape will "knock out" the underlying shape, effectively deleting it, as seen in the top of Figure 1-10. This behavior contrasts with that of the newly introduced Object Drawing mode, which will be discussed shortly.

Figure 1-10: Merge Drawing mode (top) and Object Drawing mode (bottom) compared

What are the implications of shapes merging? If you didn't save your work at the end of the last sequence, do so now, and then try this with your current file:

Activate the Selection tool, select the black fill you just applied to the silhouette, and then delete it. Everything inside the fill area is removed, including the gradient previously behind the silhouette's fill!
Undo the last step. You'll need the silhouette fill for something else in a minute.

At first you may think this is a problem, but it can be very useful, and you can prevent it from happening, if you wish. First, however, look at a few simple examples of how Merge Drawing mode can be advantageous. If you recently saved your work, feel free to experiment.

Select the Line tool and draw a line all the way through your artwork, from outside left to outside right. (This is arbitrary, but ensures that the line goes completely through the box and protrudes on either side.) Now choose the Selection tool and click once in various regions of your art. You'll see that the line has effectively segmented your art, allowing easy selection of smaller pieces.

Next, select the Brush tool. This will show you a good example of how unprotected shapes can be altered in creative ways. In the tool's Options area, experiment with the different Paint modes. Paint Normal will behave the way you likely expect. Paint Fills, however, will paint only fills, leaving strokes unaffected. Try Paint Behind and Paint Inside to see how they work, too.

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

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

You may find that you need to use a graphic several times in one movie, whether it's a box, a logo, or a character. To avoid adding substantially to the file size of the finished project as a result, use symbols.

A symbol is a reusable asset that resides in a Library in every Flash document (see the sidebar "The Library"). When a symbol is dragged from the Library to the Stage, the on-Stage element is called an instance of that symbol. This is because the element is not removed from the Library. Instead, the instance references, or points to, the Library symbol. Multiple instances can be spawned from a single symbol, without significantly increasing file size. On-Stage changes (such as adjustments to width, height, rotation, opacity, etc.) can be made to individual instances of a symbol, and the original symbol will remain intact. However, if persistent changes are made to the symbol in the Library, all instances derived from that symbol will be affected.

Think of symbols this way: a symbol is analogous to an actor in a movie. Each instance of that symbol is analogous to a character played by the actor. The actor can play multiple characters in the movie, simply by changing costume or make-up. However, if the actor is replaced with another actor, all of the characters will also be changed.

This discussion is focused on reusability and file optimization, but in nearly every remaining chapter of this book, you will see that symbols are central to Flash development. Most notably, they are the building blocks within every Flash file that can be controlled by ActionScript. You'll learn more about that throughout this book. For now, take a look at how to create and use symbols.

It's time to create a reusable box symbol that you can use in your designs:

Create a new, blank document using File → New.
Select the Rectangle tool, and in the Properties panel set the stroke weight to 1, the stroke color to dark gray, and the fill color to light gray.

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

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

Think about it: you do your best work in Flash when you're creating, not when you're struggling with the interface. One of the downsides of working with a powerful program with a lot of depth is that the program… er… has a lot of depth. Wading through the interface can be a drag, so it's important to get working comfortably as quickly as possible, so you can concentrate on the good stuff.

The Flash design team has worked hard to organize Flash's many features in ways that are approachable and useful. However, you likely have your own preferred way of working that may not match the out-of-the-box Flash configuration. The good news is that the interface is customizable. This chapter's project is to set up your work environment the way you feel most comfortable.

One of the first things you'll notice when exploring the Flash interface is that a lot of features require a lot of interface elements to manipulate them. Flash has dozens of panels that provide access to design, scripting, and administration settings. Navigating all of these panels can be a challenge, particularly on laptops or smaller or low-resolution monitors. Creating your own panel layout can help un-clutter your screen, making it easier to focus.

The interface layout you are likely to use on a daily basis consists of the main document window, the Tools panel, and the Properties panel. As shown in Figure 2-1, the main document window typically anchors these elements, with the Tools panel on the left and the Properties panel 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!

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

One of the first things you'll notice when exploring the Flash interface is that a lot of features require a lot of interface elements to manipulate them. Flash has dozens of panels that provide access to design, scripting, and administration settings. Navigating all of these panels can be a challenge, particularly on laptops or smaller or low-resolution monitors. Creating your own panel layout can help un-clutter your screen, making it easier to focus.

The interface layout you are likely to use on a daily basis consists of the main document window, the Tools panel, and the Properties panel. As shown in Figure 2-1, the main document window typically anchors these elements, with the Tools panel on the left and the Properties panel below.

Figure 2-1: The basic Flash interface layout: Tools panel, document window, and Properties panel

This layout is entirely optional, however, so you can reorganize at will. For example, if you have a small monitor, you may wish to fill your screen with the main document window and open the Properties panel only when needed.

Note that you can "undock" the timeline by dragging it away from the main window using the standard vertical "grab lines" (seen in every panel) in the upper-left corner. You can then ***"re-dock" the timeline where it was, to show fewer layers and lots of frames, or in a vertical position along the left side of the window, which is helpful when you have many layers and fewer frames. The timeline can also be hidden and restored using the "Timeline" button in the upper-left corner of the main document window.

You can add a variety of additional helper panels to this basic layout. You have experience with some of these panels from your work in Chapter 1, including the Color Mixer, Color Swatches, and Library panels. You'll work with more of them soon, including the Align panel in this chapter and a few ActionScript-related panels in future chapters. To see a list of available panels, browse the Window menu.

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

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

Now that you have a version of the interface that suits your current needs (they may change over time, particularly when you start writing more ActionScript), it's time to talk about customizing your files.

The Stage's size determines the dimensions of your published Flash movie. The default Stage size is 550 x 400 pixels, but sometimes you'll want to work in other sizes. To learn how to change the dimensions, you'll set up a new file for the animation you'll create in the next chapter. It's usually a good idea to set the Stage properties before starting the animation, to avoid having to redo a lot of work later if you decide to change the document settings.

If you do need to change the Stage dimensions after you create a movie, keep in mind that the content doesn't scale or move during the process. Increasing the Stage's height adds pixels to the bottom edge of the Stage, and increasing its width adds pixels to the right edge. However, the content remains in its prior configuration, relative to the Stage's top-left corner.

Start by setting the Flash movie's properties:

Create a new, blank Flash document and save it as animation.fla in the 02 folder.
To set the Stage properties, first click on the Stage's background to make sure nothing else is selected. Then click the Size button in the Properties panel to open the Document Properties dialog box, shown in Figure 2-5.

Figure 2-5: The Document Properties dialog box
Set the Stage dimensions in the dialog box by entering 500 for the Width and 100 for the Height.
Click on the Background Color swatch in the dialog box, and set the background color of the movie to black. If you'd like new Flash documents to always open with a black background, you can click the Make Default button in the dialog box to change the default color as well.

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

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

Laying out your Stage elements well can improve the user experience of most projects and ensure that you're communicating effectively. However, planning and organizing a complex layout can quickly become cumbersome. Fortunately, the Flash designers planned for this possibility and built in several utilities to help you manage your designs.

Create and position the first box in your layout using rulers and guides. In this exercise, you'll also practice some of the drawing principles you've already learned:

Select the Rectangle tool and enable Object Drawing mode. Shift-constrain your drawing, and draw a square on the Stage.
With the square still selected, use the Properties panel to enter a width of 90 and a height of 90.
Use Modify → Convert to Symbol (F8) and choose Movie Clip as the symbol type. Call the movie clip box_mc. You'll learn more about the "_mc" extension later.
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: Rules and guides help you align objects
Zoom in pretty closely on the upper-left corner of your Stage. This can improve accuracy when working with small measurements.
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 5 pixels below the top edge of the Stage (when the ruler measurement mark for 5 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!

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

An important factor in feeling good about your design choices is knowing that you can experiment now and change them later. You've now created several symbols, in a variety of ways, but you may be wondering how to change an existing symbol. As an example, you'll get rid of the stroke in the box_mc symbol you created in your animation.fla file. This will refine the look of your layout and eliminate any possible distraction from distorting lines during your eventual animation.

Pick up where you left off, and edit the box_mc symbol:

Open the animation.fla file you recently finished. For quick access, it should be in the left column of your Start panel; if you have disabled this feature, use the File → Open Recent menu command to access the file.
Select any instance of the box_mc symbol on the Stage.
Choose Edit → Edit Selected.

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 has disappeared. Also, the Edit bar now says Scene 1, box_mc, as shown in Figure 2-9.

Figure 2-9: The Edit bar, while in Symbol Editing mode for the box_mc symbol

If you edit symbols in this way, they appear on their own canvas, without distraction from surrounding elements in your main movie. However, this is a double-edged sword, because your other movie elements are not visible for reference. In most cases, it is helpful to use a different menu command, Edit → Edit in Place. This will bring you to the same editing environment but will merely dim the surrounding elements without hiding them, allowing you to edit the symbol with some degree of visual context. For more information about editing symbols, see the "Symbol Editing Mode" sidebar.

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

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

Having to manually repeat common tasks, such as drawing a box, can slow you down. To speed up development, Flash can automate many of your efforts. One simple way for users of all skill levels to automate repetitive tasks is to save steps from the Undo History as Flash macros called commands. To start, you need to understand the History panel.

The History panel begins as a blank slate and tracks your actions while you are editing your movies. This allows you to undo and redo your actions, step by step. As you'll see, it also allows you to replay single actions and save sequences of actions for later use. To take advantage of these features, you need to make history:

Create a new, blank document with which to experiment. Name it history.fla and save it in your 02 directory.
Choose Window → Other Panels → History to open the History panel.
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).
Use the Selection tool (V) to select the fill, and then change the fill color to light gray.
Select the stroke by double-clicking on any edge, and change the stroke color to dark gray. Then deselect the stroke.
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 you perform in order, resulting in something like the history list shown in Figure 2-10.

Figure 2-10: The History panel

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

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

In this chapter, you learned how to customize your workspace to make your work easier and faster. You know how to use tools such as the Align panel, Timeline Effect assistants, and the History panel to make production more efficient. Now you can get through the sometimes tedious tasks that require a little extra precision, and get on with creating.

To expand on your work so far, replace each box instance in the file you built with custom content. Try text, a logo, or perhaps an animation piece to bring your file to life. If you don't yet feel sure enough to take on a project like this, keep reading—you'll soon feel your confidence grow.

If you're interested in extending Flash, Chapter 15 discuss this briefly. If you can't wait that long, visit the Macromedia Flash Exchange at http://www.macromedia.com/exchange/flash/. The Flash Exchange features many commands, as well as components (pre-made widgets, such as buttons, menus, and other user interface controls) and other extensions (tools, panels, and other utilities) that you'll learn more about later. These add-ons allow you to further customize your workspace, enabling you to do more than Flash can do out of the box and saving you lots of time and energy.

In the next chapter, you'll create your first animation. You will:

Work with layers and the timeline
Learn how to animate symbols using keyframes and tweening
Animate a symbol along a specific path
Add a touch of realism to your animations with custom easing
Write your first ActionScript
Publish your movie for playback in a web page

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

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

Layers and the Timeline
Keyframes and Tweening
Preparing Text for Animation
Staggering Animation
Alpha Effect
Motion Effects
Your First Script
Publishing Your Movie

Flash started as a web animation tool and remains one of the most popular on the market. Now that you have some drawing and organization skills under your belt, you're ready to start making graphics move. The trick is knowing how to do so in ways that are both creative and aesthetically pleasing. Coupling inspiration and restraint can often lead to animation that makes a better first (and lasting) impression.

As your design experience and skills grow, you'll begin using Flash for more than just simple eye candy. Often, animation can be the key to more engaging presentations, effective charts and graphs, and more 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, your project will be to use a few essential techniques to create your first animated Flash movie. You won't need anything more than what comes with Flash, and this ease of use will be emphasized with a theme: "Flash 8 Out of the Box." When the project is complete, you'll publish a Flash .swf file for use on the Web.

The animation itself is straightforward. You'll first draw a series of colored boxes and then add text, as seen in Figure 3-1. Next, you'll jazz it up a little by making the boxes grow and the text slide into place—just enough to catch the reader's attention without being overbearing.

Figure 3-1: The Flash 8 Out of the Box animation

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

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

You may have noticed in the previous exercises that you placed everything on the Stage within a single layer of the timeline. Layers are used to determine which elements appear in the foreground and which appear in the background, creating a visual stacking order for objects on the Stage. This is in addition to the visual stacking order of graphics within each layer, discussed in Chapter 1.

While a single layer is sufficient for static graphics, computer-assisted animations require their own layers. To create multiple animations, you need multiple layers. Layers appear above the Stage in the main Flash document window, in a timeline. The timeline actually resides in its own panel (Figure 3-2), which is anchored at the top of the main document window by default.

Figure 3-2: Layers in the timeline

If you don't like the default position of the Timeline panel, you can move it. To do so, grab and drag the panel using the small textured grab handle to the left of the expandable arrow in the panel's title bar. If you want to see more layers but minimize the number of panels you must juggle, you can anchor the Timeline panel to the left of the Stage by dragging it to the lower-left side of the window. This is especially handy when you have many layers that you would like to see all at once, without scrolling. If you need to switch back to seeing fewer layers so that you can see many frames at once, simply drag the timeline loose again, or re-anchor it to the top of the Stage window.

It's time to get started working with layers:

Pick up where you left off in the last chapter by opening the animation.fla file. If you didn't create this file, you can find it in the 02 folder in your working directory.
To get ready to animate the boxes, move each box to its own layer. Select all five boxes and choose Modify → Timeline → Distribute to Layers. This command automatically adds five layers to the timeline and places each box instance on its own layer. Each layer will be named with the name of the instance that appears on that layer, or the symbol name if the instances are unnamed. In this case, all five layers are named

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

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

Now it's time to animate the boxes. The first step in doing so is to add a second keyframe in each layer. A keyframe is essential to all timeline-based animation techniques in Flash. While not a perfect analogy, perhaps the easiest way to understand keyframes is to think of each one as a place where you can define new information about the layer.

For example, every item placed on the Stage on a unique layer creates at least one keyframe. Why? You, the animator, have dictated at least one piece of new information—the position, or x- and y-coordinates, of the asset. If you want to move the asset across the Stage or, as in this case, increase its size, you'll need to define at least one new keyframe to add that new information.

Once you have at least two keyframes, you can create a tween. A tween is an instruction to the computer to fill in all the interim frames between (hence the name) the two keyframes you've defined. The computer will calculate the changes in each relevant characteristic and automatically adjust the animating elements in all the interpolated frames.

The biggest benefit of computer-assisted animation is that it's a big timesaver. In this case, many steps can be applied to all five boxes at once. The first part of the animation will feature your boxes scaling and changing colors, so get started:

To make this animation last approximately one second on as many machines as possible, use Flash's default frame rate of 12 frames per second (fps), and add a keyframe for each layer at frame 12. Click in the top layer at frame 12 and drag down, selecting all five layers at once. Use the Insert → Timeline → Keyframe menu command to create a new keyframe in each selected layer. The content will be duplicated in the new keyframes so you can easily make changes.

You can also insert an empty keyframe by using Insert → Timeline → Blank Keyframe. However, when tweening, it usually helps to start with keyframes populated with content

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

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

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 your animation, the text "Flash 8 Out of the Box" appears one section at a time, moving in from different directions. In this project, 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. Be mindful of the fact that too many fonts can be distracting. Try to use as few fonts as are required to get the idea across—preferably no more than two or three. Make sure they are dissimilar enough that the user can appreciate the difference instead of merely viewing the choices as byproducts of inconsistent design.

Later, when you start using ActionScript to control text in text fields, you will learn that you must embed fonts in your file to make sure they display correctly on any machine. Reducing the number of fonts used will help to keep the .swf file size down.

Next, add the text to the movie:

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 the boxes folder is open or selected at the time, the new text layer folder may appear inside it. If this happens, practice rearranging the timeline by dragging the text folder outside the boxes folder.
Add a new layer and drag it into the text layer folder.
Activate the Text tool from the Tools panel, shown in Figure 3-7, and click once on the Stage to create a text field. Set the value in the Field Type drop-down list in the Properties panel to Static Text, pick an appropriate font, and set the size to 30, as shown in Figure 3-7. Return to the text field on the 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!

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

The animation you have is getting there, but it's still slow and pretty boring. One way to spice it up easily, and simultaneously speed up the text tweens a bit, is to stagger the animation of the words. The word Flash should appear first, then Out, and so on. When you're done, you'll cap it off with a little flourish using the 8. To stagger the words in time (i.e., start them in succession), you need to shorten the animation span for each text segment and adjust the positions of the keyframes:

Starting with the Flash layer, click once on the ending keyframe, and then click again and drag the selection to frame 26.
On the Out layer, select the first keyframe and drag it to frame 22. Select and drag the last keyframe to frame 33. You'll start this movement a frame or two later than the others to give the 8 a little extra time to show itself. You'll get to that in a second.
Select and drag the starting keyframes of the of, the, and Box layers to frames 28, 34, and 40, respectively.
Select and drag the ending keyframes of the same layers to frames 37, 43, and 48 (where it should already be), respectively.
Leave the starting keyframe for the eight layer where it is, but select and drag the ending keyframe to frame 32.
Play the animation (Enter/Return). In the revised animation, each word moves onto the Stage at a different time. The staggered animation guides the eye from the first word to the last.
Save your work. Your timeline should now look like Figure 3-11 and mirror the animation_07.fla file.

Figure 3-11: Staggered text animations

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

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

The final step to complete the first version of your animation is to add an alpha effect. Currently, the 8 just pops in immediately, and it's a little jarring. If you make one small adjustment, it will fade in nicely:

Move the playhead to frame 14, which is the frame that contains the first keyframe of the 8 animation.
On the Stage, click on the 8. In the Properties panel, choose Alpha in the Color effect menu, and enter a value of 0.
Play your animation again. Now the number 8 fades in nicely.
Save your work.

When you click on a timeline frame with content in it, all the Stage elements in that frame are selected. Sometimes that's handy, but it may be easier to select items on the Stage if you don't first click in the timeline frame. To move to a frame without selecting anything, click on the frame number in the top span of numbered notches (above all the layers, rather than in a specific layer).

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

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

Successful designers communicate in myriad ways. Themes are communicated through type, blocking, pacing, color, and movement. Combining these elements can have a powerful effect. Convoluted intros on web sites are virtually extinct now (fortunately), but motion design is still alive and well, as it should be. How, then, can motion help bring your files to the next level?

So far, your animated sequences have been linear and fairly conventional. True, you've added some color changes and an opacity fade, but mostly you've focused on scaling and sliding along straight lines. Now it's time to add a little spice by leading an asset along a stylized path:

Using a motion guide, it's possible to draw a path for an object to follow. Motion guides are lines that guide an asset where you want it to go but aren't visible when the file is rendered. Next, you'll add a motion guide to the eight layer, so that it waves in with a bit of punch.
Select the eight layer, and then click the Add Motion Guide button at the bottom of the timeline. Its icon resembles a red arc guiding a shape, and it sits between the Insert Layer and Insert Layer Folder buttons you used earlier.
Insert a keyframe in frame 14 of the motion guide layer so it starts at the same time as the eight layer.
Using the Pencil tool, or the Pen tool if you prefer, draw a flowing line that resembles a sideways S, as seen in Figure 3-12. Be sure it starts off Stage bottom and ends in the lower-left corner of the first box. If you want to start with a predrawn line, open animation_09.fla in the 03 folder in your working directory.

Figure 3-12: The motion guide for the eight layer

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

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

To prevent the movie from looping, you need to add an ActionScript method (also sometimes called a command or action). You'll use more ActionScript later, but for now, just add a simple stop( ) method and publish the movie again.

In the timeline for animation.fla, add a new layer and drag it above the text and boxes layer folders.
Rename the new layer actions. It is a good practice to keep the actions layer above all others in the timeline.

Placing your ActionScript on the top layer and naming the layer actions is a convention often used by Flash developers to make it easier to find the ActionScript in a movie (some developers name the layer "scripts" instead of "actions"). To follow best practices, don't put any content other than scripts in this layer.
To prevent graphics from being added accidentally to the actions layer, lock the layer by clicking the second dot to the right of the layer name, under the lock icon.
In the last frame of the timeline, insert a keyframe in the actions layer. (Locking the layer prevents you from adding graphics to the Stage for that layer, but you can still add keyframes and ActionScript to the layer.)
With the last frame still selected, open the Actions panel by choosing Window → Development Panels → Actions, or by pressing F9.
Type stop(); into the Script pane of the Actions panel, as shown in Figure 3-15. The stop( ) method tells the playhead to stop when it reaches this frame, instead of looping. A frame script is often used to execute instructions without having to rely on user input (such as pressing a key or clicking a button). See the "Frame Scripts" sidebar for more information.

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

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

The animation is done, but your work cannot be shown outside the Flash authoring environment until you publish the movie.

Publishing a Flash movie is the act of exporting the completed version of a .fla file as another file type. The .fla format is used only for editing within the Flash application; it is too bloated with excess information (and too unprotected) to be appropriate for distribution. When you publish Flash content for the Web (for use with the Flash Player browser plug-in), the .fla file is compiled into the aforementioned self-contained .swf file format. You can publish other file formats too, some of which will be discussed later in this book.

Flash can also automatically create an HTML page in which to display your SWF file. Users don't ordinarily browse directly to the URL of a SWF file. Instead, developers typically publish an HTML file in which the SWF file is embedded (using the HTML <object> and <embed> tags).

Publish your movie and see how it performs:

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-16.
Your current movie will play in older versions of the Flash Player, but realistically, most people use at least Flash Player 5 or 6. In fact, as of June 2005, Macromedia doesn't even track installed versions prior to v5 (see http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html for more information). Publishing using the minimum required version helps improve compatibility for your files, but there's no compelling reason to date back prior to Flash 5. Therefore, under the Flash tab, choose Flash Player 5 from the Version drop-down list. Be sure to set the version back to a more current player, though, when creating Flash movies that use features not supported in earlier versions.
Once you've specified the desired publishing settings, click Publish to publish your movie. This generates the SWF and HTML files, but doesn't literally publish the file on the Web. (In this case, "publish your movie" effectively means "generate a file," rather than the more traditional meaning of "make the file publicly available.") Both files will automatically be placed in the same folder as the

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

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

It's time to get interactive! Flash can be a rewarding design and animation tool, but you won't be using the application to its fullest potential unless you include elements of interactivity. In Chapter 3, you wrote your first script, to prevent your animation from looping by default. In this chapter, you'll give your audience some control through the use of buttons and ActionScript.

The easiest way to add interactivity to Flash is to use a button to run ActionScript. The projects featured in this chapter will all focus on button use. One project, for example, will be to modify the animation you created in Chapter 3, adding one button to replay the animation and another to open a web page.

You may be thinking, "Big deal, I can do those things with HTML." True, but Flash buttons can be more powerful, and sometimes even easier to create, than their HTML counterparts. With Flash, it's easier for buttons to contain animations and sound, to be activated or dimmed dynamically, and to be repositioned automatically when, say, the browser window is resized.

Of course, buttons are just the beginning. ActionScript is a powerful scripting language, and it can be implemented in a variety of ways. Fortunately, the Flash development community is one of the most generous collectives on the Web, and there are many resources available to help you learn more about ActionScript when you are ready. Appendix A contains a very brief list of such resources to get you started, but half the fun is exploring.

In earlier chapters, you learned about graphic symbols and movie clip symbols. Next, you'll see how to create the third type of symbol, a button. Buttons are similar in many respects to other symbols, but there are two important differences.

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

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

In earlier chapters, you learned about graphic symbols and movie clip symbols. Next, you'll see how to create the third type of symbol, a button. Buttons are similar in many respects to other symbols, but there are two important differences.

The main difference is that, by default, a button doesn't have a full timeline, like a graphic or a movie clip. Instead, it has four distinct frames in which you can place the various button "states" (the default appearance of the button, as well as the way it looks when the mouse is hovered over and clicked down on the button).

The second difference is that a button will automatically update its appearance upon user interaction. That is, the button will automatically change its state, and switch the system cursor between the default selection arrow and a "pointing finger," to respond to corresponding mouse movements. Although the button must still be programmed with ActionScript to affect your movie, the button state and cursor feedback are handled for you.

Multiple button states are not required, and sometimes you just need a quick "hot spot." Soon, you'll see how to create more complex buttons (and even an invisible button), but your first project is to start with a basic button symbol.

To create a button with the word Button on it:

Create a new Flash document to experiment with and save the file as simple_button.fla in the 04 folder.
Draw a rectangle (choose any color you like) and resize it to 100 x 50.
Use the Text tool to create the word Button. Center-justify the text using the Properties panel, and center the text object itself within the rectangle. (Hint: Try using the Align panel.)
Click and drag to select everything on the Stage, and then press F8 to convert the image to a symbol.

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

Content preview·Buy PDF of this chapter|

Table of Contents