Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Book VII

Flash Professional CC

Chapter 3: Symbols and Animation

In This Chapter

image Understanding symbols and the library

image Creating and editing symbols

image Working with frames and keyframes in the Timeline

image Creating animations with tweens

image Understanding frame-by-frame animation

image Working with the frame rate

After you get familiar with the Flash drawing tools, you’ll want to dive in to what Flash is best known for: animation. In this chapter, you bring your creations to life with movement, interactivity, and sounds. In an effort to bring motion to the mobile masses, Flash CS6 introduced new options for publishing your animation to HTML that took Flash in a new direction as a multi-platform animation and rich media tool.

Before beginning with animation, it’s essential to explore two central concepts in Flash: symbols and the library. Because the symbol is an essential part of creating animation in Flash, we show you how to create and modify symbols before you dive in to your first animation tasks.

Visiting the Library

Each Flash document contains a library, a repository of reusable graphics, animations, buttons, sounds, video, and even fonts. As you build your Flash movie, you can add any piece of artwork you’ve imported or created on the stage to the library, where it’s stored as a symbol, as shown inFigure 3-1. You manage your library from the Library panel, which is visible in the default workspace. If you don’t see your Library panel, choose Window⇒Library to open it.

What makes symbols powerful is that you can reuse them as many times as necessary. Simply drag and drop a copy (an instance) from the Library panel onto the stage anywhere in your movie. You can add many instances of the same symbol on the stage. Most importantly, each instance remains linked to the original in your library. Any changes made to the original (or master) automatically updates any instances of the same symbol used throughout the movie.

image

Figure 3-1: The Library panel houses symbols that you create from graphics you’ve created as well as sounds, images, and font files that you import into your movie.

Symbols are broken down into three main categories: graphics, buttons, and movie clips. You can find out more about button and movie clip symbols in Chapters 6 and 7 of this minibook.

Creating and Modifying Graphic Symbols

Most common animation sequences in Flash require the use of symbols, so you should become familiar with the most basic symbol type: graphics. You can convert any object on the stage into a graphic symbol, which allows you to take advantage of additional features that are unique to symbols. You can also create empty graphic symbols from the Library panel or by choosing Insert⇒New Symbol and adding content to them afterward.

Follow these steps to create a graphic symbol:

1. Choose InsertNew Symbol or choose New Symbol from the Panel menu in the upper-right corner of the Library panel.

The Create New Symbol dialog box appears.

2. Assign a name to the symbol, select Graphic from the Type drop-down list, and click OK.

You see a blank slate on the stage, where you can add to your symbol.

3. Within the new symbol, use your drawing or type tools to create some interesting artwork.

4. Choose Scene 1 from the navigation bar above the stage to exit the symbol and return to the main Timeline.

You see your new symbol listed in the Library panel. Note: The symbol won’t appear on the stage until you place it from the library (discussed later in this chapter).

Follow these steps to create a graphic symbol from existing artwork on the stage:

1. Create some interesting artwork using the drawing tools.

2. Use the Selection tool to select the artwork on the stage.

3. Choose ModifyConvert to Symbol.

The Convert to Symbol dialog box appears.

4. Enter a name for the symbol, choose Graphic from the Type drop-down list, and click OK.

Your new symbol is now listed in the Library panel.

image  Whenever you convert existing graphics to a symbol, the graphics remain on the stage, enclosed inside a blue bounding box. (See Figure 3-2.) The Property inspector confirms that the selection is now a graphic symbol (indicated by the icon), and this is your first instance of that symbol ready for use.

image

Figure 3-2: A graphic symbol appears enclosed in a bounding box, and the Property inspector (right) shows the symbol’s name and type.

imageDon’t confuse symbols with drawing objects: Both display artwork inside a bounding box, but drawing objects don’t have the same capabilities as symbols, nor are they stored automatically in your library. Use the Property inspector to determine whether an object is a symbol or a drawing object if you’re unsure — a distinctive icon and description appear for each one at the top of the Property inspector.

Adding symbols to the stage

If you need to reuse a symbol after you add it to your library, you can simply drag a copy from the Library panel and drop it on the stage. (See Figure 3-3.) Each copy of a symbol is referred to as an instance in Flash. Although all instances of a symbol remain linked back to the original in the library, you have the flexibility to scale, transform, and rotate each instance individually.

image

Figure 3-3: Drag and drop a symbol from your library to the stage to add as many instances as you want.

Follow these steps to add symbols to the stage:

1. Locate in your library a symbol that you want to add to the stage.

2. Drag a copy from the Library panel to the stage; repeat this step a few times so that you have several instances on the stage.

3. Select each instance individually and experiment with different scales, transformations, and rotations for each one.

Modifying symbols

After you create symbols, you can modify them from within the library or directly on the stage. Changes made to a symbol are applied to all instances of that symbol throughout the movie.

To edit a symbol from within the library, follow these steps:

1. Select a symbol in the Library panel and choose Edit from the panel menu, or double-click any symbol in the Library panel.

To see the true effect of editing the master symbol, use a symbol you dragged previously to the stage.

The symbol appears on the stage in Edit mode.

2. Make some changes in color, shape, or size.

3. Exit the symbol by selecting Scene 1 from the navigation bar above the stage to return to the main Timeline.

Instances of this symbol on the stage reflect the changes you’ve made to the symbol in the library.

Editing a symbol in place on the stage can be more intuitive, and you may want to modify it to work better with other artwork on the stage. You can directly edit a symbol from any of its instances on the stage (as shown in Figure 3-4), but keep in mind that regardless of which instance you edit, all instances are affected.

image

Figure 3-4: Double-click a symbol instance to edit the symbol in place on the stage.

To edit a symbol in place, follow these steps:

1. Select and double-click any symbol instance on the stage.

You’re now in the symbol’s Edit mode, but you can still see other objects on the stage in the background. Flash dims objects in the background so that you can see your changes in context.

2. Make changes and exit the symbol’s Edit mode by selecting Scene 1 on the navigation bar above the stage.


A closer look at the Library panel

The Library panel is the main storage location for all your symbols, and much like any library, it has essential organizational tools that make managing your symbols easy.

The most basic and common functions are made easy by using several icons found along the bottom of the panel, as shown in the sidebar figure:

check.png Panel menu: All panels have panel menus, which offer additional options or modify the view of the panel itself. The Library panel’s panel menu carries out additional symbol and library-related tasks.

check.png Pin Library: Clicking this icon ensures that the current library stays active even when you switch between other open documents. Normal behavior (unpinned) is for library views to switch automatically when moving between open documents.

check.png New Library Panel: Click this icon to create a duplicate Library panel in case you want multiple, distinctive views of your current library. You can also open a new Library panel to view libraries from other documents that are open in your workspace.

check.png Search: The text box and magnifying glass under the preview panel can help you search for symbols by name in the Library panel, which is especially helpful for large libraries. Simply type a full or partial name, and the panel displays matches, if any exist.

check.png New Symbol: Create a new symbol, identical to the command found by choosing Insert⇒New Symbol.

check.png New Folder: Create folders you can sort your symbols into for easy categorization. You can create folders within folders for even finer sorting capabilities.

check.png Properties: If a symbol is highlighted in your library, clicking the Properties icon opens the Symbol Properties window. From there, you can redefine the symbol’s name, type, or registration point.

check.png Trash Can: Yes, you guessed it — this symbol deletes (trashes) the highlighted symbol in the library. Be careful: No warning is given before the deed is done. However, you can choose Edit⇒Undo to reverse this action, if necessary.

image


Sorting symbols

Symbols in a library can be sorted using any of the column headers at the top of the symbol list. You may be able to see only the Name and Linkage columns at first glance, but if you use the horizontal scroll bar at the bottom of the panel, you can see additional columns labeled Use Count, Date Modified, and Type.

To sort by any column, click the column name. If the arrow next to the column name is pointing up, the sort is ascending, with the highest value at the bottom. If the arrow is pointing down, the sort is descending, with the highest value at the top.

Organizing symbols with folders

As with any workspace, folders can help sort an otherwise large and unwieldy group of items. You can create folders within the Library panel to sort symbols, imported images, sounds, and other assets as you see fit.

You have a number of ways to group symbols into a folder:

1. At the bottom of the Library panel, click the New Folder icon to create a new folder.

2. Inside the Library panel, click to select the symbol you want to move into a folder.

Shift-click to select several symbols at a time.

3. Drag the selected symbols into the new folder.

Or, follow these steps instead:

1. In the Library panel, click to select the symbol(s) you want to group into a folder.

Shift-click to select several symbols at a time.

2. Right-click (Win) or Control-click (Mac) and choose Move To from the contextual menu that appears, as shown on the left in Figure 3-5.

3. When the Move to Folder dialog box appears, select New Folder and enter a name for the new folder in the text field.

4. Click Select to create a folder and group selected symbols into it.

image

Figure 3-5: Keep your library organized by grouping symbols into folders by using the Library panel’s Move To command.

imageYou can also sort symbols into folders as you create them. The Convert to Symbol and New Symbol dialog boxes provide an option to sort new symbols into existing folders or to create new ones as you go. The default destination for new symbols is always “Library root,” which means the top level of the library and outside of any existing folders.

Duplicating symbols

You may want to create a variation of one of your symbols that goes beyond what you can do on an instance-by-instance basis. A good example is two birds that are similar in appearance, but one has different-shaped wings or a different base color. This instance is a good case for duplicating an existing symbol so that any changes can be made to the copy and treated as a new symbol.

To duplicate a symbol, select from the Library panel the symbol you want to copy and choose Duplicate from the panel menu in the upper-right corner of the panel. You’re given a chance to name the new version of the symbol when the Duplicate Symbol dialog box appears.

imageYou can rename any symbol directly from the Library panel. Select the symbol and choose Rename from the panel menu, or double-click the symbol’s name, and the text becomes editable.

Getting Started with Animation: Frames and Keyframes

One of Flash’s most beloved staple features is the capability to create fluid, fun, and eye-catching motion graphics. Whether it’s making things fade or glide across the stage, or morphing between distinctively different shapes, Flash can do it with ease.

The Timeline, located below the stage, is where your animation is created. Be sure to take a detailed look at the components that make the Timeline tick: frames, keyframes, and the playhead.

The Timeline is composed of a series of consecutive frames (see Figure 3-6), each of which represents a point in time (much like a historical timeline). When Flash Player plays your movie, the playhead moves from left to right across the Timeline. The playhead is represented by a red, vertical line in the Timeline panel. The numbers above the Timeline represent specific frame numbers.

image

Figure 3-6: The Timeline is composed of frames and keyframes.

Think of historical milestones represented at specific points on a timeline with prominent markers. On a Flash timeline, significant events (such as the beginning and end of an animation sequence, or where a different tint color is applied) are represented as keyframes. Flash interpolates (animates) the object between these keyframes that you set up to create the animation. Every time you want to place a graphic, an animation, or a sound, first create a keyframe at the specific point on the Timeline where you want it to occur. When you create a new document, a single keyframe is automatically created on Frame 1. Keyframes look like standard frames, except with a hollow or black circle inside.

Add more keyframes as necessary to create animations or have graphics appear and disappear at specific points along the Timeline. Each layer can have its own keyframes.

Creating Animation with Motion and Shape Tweens

When you understand the basics of the Timeline, as we describe in the preceding section, you’re ready to create your first animation. The good news is that Flash does a lot of the hard work for you.

Flash can automatically create animation sequences from nothing more than a starting point and an ending point, figuring out everything else between them. This method of creating animation is known as tweening. Motion and shape tweens are the two types of tweens you work with on the Flash Timeline.

Creating a motion tween

motion tween is a type of Flash-generated animation that requires the use of symbols and is best for creating movement, size, and rotation changes, fades, and color effects. All you need to do is tell Flash where to change the appearance of a symbol instance, and it fills in the blanks in between key changes in the symbol’s appearance to create an animation sequence.

imageOnly one object at a time can be tweened on a layer. If you want to tween several objects simultaneously, each object needs to live on its own layer and have its own tween applied.

To create a motion tween, follow these steps:

1. Drag a symbol from your library to the stage on a new layer.

The symbol is added to Frame 1. For example, position the symbol to the left of the stage, if that is where the motion will begin.

2. Right-click the first frame of the layer your symbol is on, or the symbol instance on the Stage, and choose Create Motion Tween from the contextual menu that appears.

A shaded span of frames — a tween span — appears on the Timeline, and the layer is converted to a tween layer. A tween layer, as the name suggests, is a layer that contains one or more motion tweens.

To create animation, you can move the playhead to different points along the tween span and make changes to your object’s appearance or position.

3. Drag the playhead to a new frame and then reposition your symbol instance.

For this example, we dragged the instance to Frame 12 and repositioned it in the middle of the stage, slightly toward the top.

A new keyframe (which appears as a bullet point) has been created automatically at this frame to mark the change. In addition to another keyframe, a motion path is created on the stage to show the path of animation the symbol will take.

4. Drag the playhead to another frame and move the symbol instance to another location on the stage, as shown in Figure 3-7.

For this example, we dragged it to Frame 24 and repositioned the symbol in the lower-right corner of the stage.

5. Press Enter or Return to play the Timeline and preview your animation.

For the motion tween we created, the symbol moves from left to right.

image

Figure 3-7: A motion path is created to show the trajectory of your tweened object.

image  To see all frames of your animation at one time, select the Onion Skin option underneath the Timeline. This option lets you select and show several frames at once so that you see the frames that the Flash tween created for you.

You’re just scratching the surface of what Flash can do. Feel free to experiment further with different symbols and positions and to alter the length of your animations by placing starting and ending keyframes closer together or farther apart.

Resizing tween spans

If you want a tween to play out longer or shorter or have more time for additional keyframes and motion, you can expand the number of frames in a tween span. By default, the length of each new tween span is based on the frame rate. A frame rate of 24 frames per second (fps) creates a 24-frame tween span every time, a frame rate of 30 fps creates a 30-frame tween span, and so on.

To expand or trim a tween span, follow these steps:

1. Locate and select a tween span on the Timeline and select the last frame in the span.

2. Move the cursor over the last frame of the span until a double-arrow icon appears.

3. Click and drag left or right to trim or lengthen the span, respectively.

imageIf you resize a tween span after animation already has been created, existing keyframes shift from their original positions on the Timeline, which causes certain animations to begin or end at different times than you originally intended. This “stretches” or “compresses” the animation, making it seem faster or slower depending on how far you trim or lengthen the tween span. Press Shift and then drag the end of the span to change the length of the tween without affecting the speed of your animation.

Creating a Shape Tween

You can easily see how Flash can open up new worlds for creating quick, sleek animation without much effort. After experimenting with motion tweens (see the preceding sections), you may find working with symbols a bit limiting, especially if your goal is to modify the shape of an object from start to finish, such as morphing a star into a circle. In this case, you should take advantage of shape tweens.

For the most part, shape tweens are created in quite a similar manner to motion tweens. However, unlike motion tweens, shape tweens must use raw shapes instead of symbols.

In addition to morphing between distinctively different shapes, shape tweens can morph color. As with motion tweens, you can tween only one shape at a time on a single layer. If you want to create multiple shape tweens simultaneously, isolate each one on its own layer.

Follow these steps to create a shape tween:

1. Create a new Flash document.

2. On an empty layer in the Timeline, draw a shape (for example, a star or polygon with the Polystar tool) on Frame 1.

You can include a stroke and a fill, because the shape tween can handle both.

3. Click Frame 8 and choose InsertTimelineBlank Keyframe.

Rather than choose the motion tween, choose a blank keyframe because you don’t want a copy of the shape drawn on Frame 1 to be carried over to the new keyframe. However, you can choose Insert⇒Timeline⇒Keyframe instead to create a copy of the shape and adjust its shape or color on the new frame.

4. Draw a distinctively different shape on the new, blank keyframe (on Frame 8, in Figure 3-8).

5. Select Frame 1 and choose InsertShape Tween.

You see an arrow and a green shaded area appear between the starting and ending keyframes, indicating that you’ve successfully created a shape tween.

6. Turn on the Onion Skin Outlines option below the Timeline (see Figure 3-8) to see the frames that Flash has created for you.

7. If necessary, use the sliders that appear on the Timeline ruler to show Onion Skin Outlines across the entire range of frames from beginning to end.

8. Press Enter or Return to play back your animation.

The original shape transforms into the final shape.

Try using these steps to create a tween between two type characters. Create the letters using the Text tool. Break the characters into their raw forms before creating a shape tween by choosing Modify⇒Break Apart

image

Figure 3-8: A shape tween with Onion Skin Outlines (for visual aids).

Tweened versus Frame-by-Frame Animation

If you come from a traditional animation background, you may want to create animation the old-fashioned way: frame by frame. Flash easily supports this method, but you should decide which method you want to use based on the type of animation you want to create.

Both methods have advantages: Although motion and shape tweens give you the power to create sleek animations quickly and easily, you may find that they’re limited. Frame-by-frame animation is significantly more time-consuming and complex to create but can afford some detail and flexibility that you can’t otherwise achieve.

To create a frame-by-frame animation, follow these steps:

1. Create a new Flash document to work in.

2. Create a blank keyframe for each frame you want to include in your animation. You can do this easily by clicking a frame and using the F7 shortcut key.

Frames don’t have to be consecutive; you can leave space between keyframes to control the time that elapses between each one.

3. Draw (or insert) a graphic for each state of your animation on the appropriate keyframes.

4. Play back your animation by pressing Enter or Return.

Repeat the process above, but this time start by creating a single drawing on a new frame. After you are finished, select the current frame and press F6 to insert a new keyframe. This command copies your drawing onto the next frame on the current layer in the Timeline. Now, adjust your drawing slightly and repeat the process until your animation is complete.

imageIf your goal is simply to move an object from one location to another, to create fades, or to transform size and rotation, it makes sense to use motion tweens and let Flash do the thinking for you. If you’re trying to create highly complex animations that tweens can’t handle (for example, a person running), you may want to try the more traditional frame-by-frame approach. Many Flash animators combine all three styles of animation in their movies to achieve the effects most efficiently.

In some cases, you can break artwork into individual moving parts (like wheels on a bicycle) across several layers to achieve effects similar to frame-by-frame by using motion tweens. You can explore these effects in Chapter 4 of this minibook.

Understanding Frame Rate

The frame rate, which plays an important part in the performance and appearance of Flash movies, dictates how many frames are played back per second by Flash Player, in turn affecting the speed and smoothness of your animations.

You can modify the frame rate in one of three ways:

check Choose ModifyDocument.

check With nothing on the stage selected, use the Property inspector. You see your document properties.

check Click and drag over the frame rate value displayed at the bottom of the Timeline panel.

imageThe frame rate is based completely on the result you’re trying to achieve. Although the default frame rate in Flash is 24 fps, you may also want to consider a rate of 30 fps. It’s consistent with broadcast and digital video frame rates and should provide a good starting point for smooth, consistent animation. To keep this topic in perspective, remember that a film projector (like the one at your local movie theater) runs at 24 fps.

If you want to increase the overall speed and smoothness of an animation, you can try increasing the frame rate gradually until you find one that’s right for you. Flash can support frame rates of as much as 120 fps and higher, if you set the frame rate using ActionScript code.

imageChanging the frame rate affects the playback of your entire movie. If you’re trying to adjust the speed of a specific animation, consider modifying the tween itself.