Feb. 20, 2011, 3:15 a.m.
posted by daemonhell
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:
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: