Keyframes and Tweening -CodeIdol

Keyframes and Tweening

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

Creating and Moving Keyframes

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.
Note: 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.
Currently, your two keyframes contain the same information, so when you animate your file, no change will be visible. To scale the boxes and include a color fade, you must first change the starting keyframe. (Remember, keyframes are a chance for you, the animator, to dictate information the computer will use in the tweening process.) Click in frame 1 and select box 1.
Use the Info panel (Window Info) to change the size of the box. In the center of the panel, you'll see a nine-point grid, allowing you to change the point around which the box is transformed. Click the center of this grid, placing the black box in the center to indicate your selection, so the transformation will be centered instead of relative to the registration point of the box. (Later, you'll learn how to use the Free Transform tool to set any point around which to transform the box, not just the center or upper-left.)
Enter 10 for the width and 10 for the height.
Use the Properties panel to change the color tint, as you did in the previous exercise. Choose any color that might look good fading to the color you started with, again trying to stay with lighter hues that might contrast well with black superimposed text.
Repeat steps 3 through 5 for the remaining four boxes.
Save your work.

Sometimes it's helpful to be able to move a keyframe to make an animation longer or shorter. Practice this by first single-clicking to select any keyframe in the timeline, and then reselecting it and dragging it to another frame. (If you immediately attempt to drag a frame, you will instead select the frames you drag your mouse over.) You want a one-second segment, so don't save your experiment. Undo your changes and move on to create your first tween.

Your First Motion Tween

Now that you've set up your first and last keyframes and varied the content to cause a change (in this case, in both scale and tint), you can add a tween and see the results. For the desired effect, you want to create a motion tween.

In simple terms, a motion tween is applied to symbol instances (such as the movie clips in your current example) or other non-shape assets, such as groups or text elements, and is used to vary properties of these assets over time:

Shift-select all the layers in the first frame.
Choose Motion from the Tween drop-down list in the Properties panel. An arrow appears on each layer in the timeline, starting at the first keyframe and ending at the second keyframe. The frame span (everything from one keyframe to the next) turns blue, indicating a motion tween has been applied, as shown in Figure. You may need to deselect the layers to see this color change in the timeline.
Play the animation by pressing Enter/Return. You should see the colors change gradually over the second or so the animation plays, and the boxes should grow larger until they reach their final size in frame 12.

Motion tweens applied to each layer
Save your work and compare your file to animation_03.fla.

Feb. 20, 2011, 3:15 a.m.posted by daemonhell

Keyframes and Tweening