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

---

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.

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

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

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

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

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

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

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

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.

If 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 Insert⇒Timeline⇒Blank 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 Insert⇒Shape 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

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.

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

Choose Modify⇒Document.

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

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

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

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