Frames

You'll recall from Lesson 1 that the Timeline is divided into Frames, and each Frame represents a snippet of time. How long that snippet of time is depends upon what frame rate you've set in your movie. Each frame in the Timeline is played chronologically, starting with Frame 1 and continuing until your movie's end, unless the playhead is directed elsewhere by a script or user action.

Animation is created by rapidly displaying a series of still images, each varying in position or with subtle differences in appearance. This process simulates movement and gives the impression of life and movement to an image. You manipulate an object on the Stage at different times (frames) in the Timeline by placing the object in different positions. This time-based, or frame-by-frame, animation is the basis of Flash (and traditional) animation.

When you launch a new movie, there's only one frame on one Layer. You add frames to your Timeline by choosing Insert > Frame from the main menu or pressing the F5 key. There's also a contextual pop-up menu for Frames that you can access by Control+clicking the frame (Mac) or right-clicking the frame (Windows) and selecting Insert Frame. To add multiple frames, click ahead in the Timeline (to a higher-numbered frame), and then press the F5 key. The Timeline fills with frames to the frame number you clicked. (You can also add frames to multiple Layers by shift+selecting the frames of adjoining layers first, then performing one of the preceding actions.)

Deleting or removing frames is just as easy -- simply select the frame by clicking it and press Shift+F5, or access the frame context pop-up menu by Control-clicking the frame (Mac) or right-clicking the frame (Windows) and selecting Remove Frames.

use Keyframes

Keyframes are frames that contain new content. Whenever you drag a symbol, button, or other element from the Library onto an empty Stage, the current frame automatically becomes a keyframe. Keyframes are essential to the Flash animation process. They're indicated by a bullet in the Timeline: a solid bullet indicates a frame with content, and an empty bullet indicates a blank keyframe with no content on the Stage, as shown in Figure 2-1. A blank keyframe, however, may contain a label or a script. In fact, for a frame to contain a label, it must first be converted to a keyframe.

Figure 2-1: An empty bullet indicates a blank keyframe with no content on the Stage.

You can create a keyframe in a number of ways -- just select the frame in the Timeline by clicking in it, and do one of the following:

To give a keyframe a name that you can access with ActionScript, you need to create a frame label. To label a keyframe, click in the frame and type a name into the Frame Label text field in the Property Inspector, as shown in Figure 2-2. If your Properties panel isn't showing, choose Window > Properties, or press Command+F3 (Mac) or Ctrl+F3 (Windows).

Figure 2-2: The Frame Label text field in the Property Inspector.

Blank keyframes, or keyframes with no content on the Stage, are indicated by an empty bullet. To create a blank keyframe, choose Insert > Blank Keyframe, press the F7 key, or Control+clicking (Mac) or right-clicking (Windows) the frame and selecting Insert Blank Keyframe from the pop-up menu.

To clear a keyframe and blank keyframe, click the keyframe to select it and perform one of the following:

You can also move a keyframe or a blank keyframe by clicking the keyframe and dragging and dropping it into another frame number.

add comments

Instead of applying a name to a keyframe, you could apply a comment. Sometimes in larger or more complicated movies, writing comments on frames allows you to keep track of changes to objects or to scripts in a particular frame. To add a comment to a frame label, type two forward slashes (//) at the beginning of each line of text in the Frame Label text field in the Property Inspector, as shown in Figure 2-3.

Figure 2-3: Type a comment by inserting two forward slashes (//).

assign named anchors

In Flash MX, you can assign Named Anchors to keyframes. You couldn't do this in Previous versions. Named Anchors allow you to use your browser's Forward and Back buttons when playing back your Flash movie in HTML. To use the Named Anchor keyframe function, you have to publish your movie with the Flash with Named Anchors template setting. You'll learn more about publishing your movie in Lesson 6.

Layers

Frames are one important part of Flash animation; the other critical aspect is Layers. Recall from Lesson 1 that the Timeline is divided from top to bottom into transparent Layers that you can stack and rearrange to produce different spatial effects and visual depth.

Other reasons to use layers:

TIP
For quick access to the Layers Properties box, double-click the Layer icon (to the left of the Layer's name).

create motion guides

Guide layers are layers that can be used to align objects when you're drawing on the stage with the Snap to Guides feature on (select View > Guides > Snap to Guides). To use guides for drawing, make sure the Ruler is visible by choosing View > Ruler. Then, just click your mouse on either the horizontal or vertical Ruler, and drag and drop your guide wherever you want, as shown in Figure 2-4.

Figure 2-4: Drag and drop your guide.

Depending upon your stage's color or the color of the objects on your stage, you may need to change the guide's color for better visibility. To change your guide's color:

1. Select View > Guides > Edit Guides.
2. Choose a new color from the Color pop-up list.

TIP
You can use guide layers to create a Motion Guide by selecting a layer and clicking the Add Motion Guide icon in the Layers panel (between the Add Layer icon and the Add Folder icon). You'll see how to use a Motion Guide later in this lesson's assignment.

create mask layers

If you've used masking in other graphics applications, you'll find the process is the same in Flash. Basically, any solid filled shape on a masked layer is transparent (completely see-through, like a pane of glass), whereas any blank or empty space on that layer is opaque (a solid shape you cannot see through). Using a mask layer to create a spotlight effect (where you create a hole through which you can view underlying layers), or using letters as a mask with a bitmap file in a layer below, are two popular examples of how masks are used in Flash Web sites.

To create a mask layer, first make a solid, filled-in shape with the drawing tools place it on a layer. This shape will be used as the mask. Then link the underlying layers you want the mask to show by setting their Layer property to Masked. The mask layer hides any other unlinked layers beneath it.

animate in Flash

As you know, animation is created by rapidly displaying a series of still images, each varying in position or with subtle differences in appearance. In Flash, you can animate objects two different ways: by frame-by-frame animation and by tweened animation.

Animate

To create your first frame-by-frame animation, follow these steps:

1. Open the Flash file FlashMX01_solution.fla. The symbol you created in Lesson 1 should be sitting on the Stage in a keyframe in frame 1, as shown in Figure 2-5.

Figure 2-5: The symbol in frame 1.

2. Click and drag your symbol to the left edge of the Stage.
3. Click in frame 5 of the Timeline, and press the F6 key to insert a keyframe.
4. Drag and drop your symbol halfway across the Stage.
5. Click in frame 10 of the Timeline, and press the F6 key to insert a keyframe.
6. Drag and drop your symbol to the right edge of the Stage.
7. To view your animation, select Control > Play, or simply press Return (Mac) or Enter (Windows) on your keyboard.

To create a motion-tweened animation, follow these steps:

1. Undo the frame-by-frame animation you just created by clicking in frame 5 of the Timeline and pressing Shift+F7 to clear the keyframe, or right-clicking the keyframe and selecting Clear Keyframe. You're left with a keyframe in frame 1 and a keyframe in frame 10.
2. Click the Layer to select all of its frames by clicking any empty space in the Layer, not on one of the buttons.
3. In the Frame Properties panel, click the Tween pop-up menu and choose Motion, as shown in Figure 2-6. Notice that an arrow appears between your keyframes in the Timeline, indicating you've applied tweening to those frames.

Figure 2-6: Choose motion.

4. To view your animation, choose Control > Play, or click back on the Stage and simply press Return (Mac) or Enter (Windows) on your keyboard.

The Frame panel's Tween pop-up menu (Step 3) has a couple of other options: None, which removes tweening, and Shape, for shape tweening. To the right of the Tween menu is a Scale checkbox, in case you want your tween's size to scale.

Below, there's the Ease text input field, which enables you to control the rate of change between your tweened frames. Simply type in a positive or negative integer or use the Ease slider bar to create a slower tweened start or faster tweened start.

If you want Flash to rotate your object while tweening, choose a Rotate option from the Rotate pop-up menu (your choices are None, Auto, Clockwise, or Counterclockwise), and enter the number of rotations you'd like in the Times input text box. The Synch (Synchronization) checkbox synchronizes the playback of any symbols that may differ from the main movie's Timeline. The Orient to Path and the Snap checkboxes aid in motion tweening on a path, which we'll explore next.

To create a motion tween to track a specific path, follow these steps:

1. Continuing with the file you've been modifying, click the Add Motion Guide icon in the bottom of the Layers panel, as shown in Figure 2-7.

Figure 2-7: Add Motion Guide Icon.

TIP
You can also right click the layer and choose Add Motion Guide from the pop-up menu.

2. Choose the Pencil tool from the Toolbox, and click Smooth in Options pop-up menu, as shown in Figure 2-8.

Figure 2-8: Choose Smooth.

3. Click in the Motion Guide layer, and draw a wavy path with the Pencil tool up and down across the Stage. (You can also draw a path with the Pen or Line tool, or you can create a path using an empty -- no fill -- Circle or Rectangle.)
4. Click back on Layer 1 in the keyframe of frame 1.
5. In the Frame panel, Motion is still selected in the Tween pop-up menu from our last exercise. Check the Orient to Path box, and the Snap box in order to snap the center (registration point) of your symbol to the motion path.
6. Back on the Stage, click your symbol and drag it to the beginning of the motion path until a small circle appears, indicating that your symbol is recognizing the motion path. Snap the center to the beginning of the path.
7. Click your ending keyframe in frame 10. Click back on your symbol on the Stage and drag it over the other end of the motion path until the small circle appears in the center of your symbol. Snap the center to the end of the motion path.
8. Make sure the Orient to Path and the Snap boxes are checked for this keyframe, too. (Is this necessary?)
9. Hide the Motion Guide layer by clicking its bullet in the Eye icon column.
10. Press the Return key (Mac) or Enter key (Windows) or choose Control > Play to watch your tweened symbol following the motion path.

To see a completed example of motion tweening or motion tweening on a path, download and open the Flash file FlashMX02.fla .

The last kind of tweening we'll learn in this lesson is shape tweening, in which you take one shape and morph it into another shape. You'll do this in the assignment for this lesson.

Onion Skins

There are four useful icon buttons at the bottom of the Timeline (from left to right):

To move a block of frames using Edit Multiple Frames:

1. Make sure all layers containing the frames you want to edit are not locked. Be aware that if these layers are locked, you won't be able to use Edit Multiple Frames or Onion Skins.
2. Click the Edit Multiple Frames button in the Timeline. Drag the Onion Skin Markers to cover the frames you want to edit.
3. Shift+select the frames you want to move by clicking the first frame while pressing and holding the Shift key on your keyboard, and then clicking the last frame.
4. Click and drag the block of frames you selected and drop them where you want to in the Timeline.

moving on

So we've finished Lesson 2 and you've already created some animations. Now try shape tweening in the assignment for this lesson, and then take the quiz just to check your new knowledge.

Assignment: Shape tweening

Go ahead and open Lesson 2's Flash file, FlashMX02.fla. You'll use it as you work through the assignment.

You'll recall from this lesson that to tween a shape, you take one shape and morph it into another shape. Although motion tweening requires your object to be a symbol, in shape tweening, your object must be a simple shape -- not a symbol, and not grouped.

To tween a shape:

1. On the Stage, in Layer 1, keyframe 1, choose your symbol and break it apart by choosing either Modify > Break Apart twice (once to break apart the symbol, and once to break apart the Group). Or, press Command+B (Mac) or Control+B (Windows) until you can see your circle's fill and outline shapes selected separately.
2. In the same Layer, click in keyframe 10, choose your symbol and delete it. You should now see an empty bullet in the Timeline, indicating a blank keyframe.
3. In keyframe 10, draw a second shape with the Rectangle tool. Give it a different stroke and fill color.
4. Click back on Layer 1 to select all the frames.
5. In the Frame panel, choose Shape from the Tween pop-up menu. From the Blend pop-up menu, choose Angular (for blending shapes with angled corners and straight lines), or Distributive (for preserving rounded shapes). Since we're going from a circle to a square, choose either option.
6. Press Return (Mac) or Enter (Windows) to watch your shape tween in action. In the Timeline, notice the slight color tint indicating the tweened frames.

Quiz