Motion tweens and frame-by-frame animations

Animation is a key concept in Flash and Flash Lite. Generally, it refers to graphics that move and transform over a period of time. Animation is more or less an illusion created by displaying the contents of different frames very quickly. The content in each frame will have a slightly different appearance or position than the contents of the frame before it, causing the eye to think that the graphic is physically moving or changing shape. The way in which you animate objects in Flash is to change the state of the object using frames and keyframes in the Timeline.

There are several ways you can animate within Flash:

• Create the starting and ending states of an animation and let Flash create the in-between states using a motion tween
• Manually create a frame-by-frame animation, creating every state of the animation

Note: There is a third type of animation, shape tweening, where you define the beginning and ending of the animation and Flash draws the animation by morphing from the starting to the ending shape. However, this type of animation is processor-intensive and not recommended for use in mobile applications.

Introducing the Timeline

The Timeline provides structure to a Flash document (see Figure 1). The following is true about Timelines:

• The Timeline is divided into frames
• The playhead determines what currently appears on the Stage in the FLA or onscreen in the SWF
• By default, the playhead starts at Frame 1 and moves forward through frames until the document's last frame
• By default, the playhead continues to loop through the frames
• Layers are also part of the Timeline; each layer has its own timeline

Figure 1. Flash Timeline

Creating frame-by-frame animations

Frame-by-frame animation is another way to create animation in Flash. The main benefit of frame-by-frame animation is that it gives you complete control over your animations, which means that you can make both complex and subtle changes to them.

The downside to this method is that creating individual animations in each frame can be time-consuming and tedious. It can also result in very large files if symbols are not used. To understand frame-by-frame animation, you must use the Timeline.

Frame-by-frame animation and symbols

Although you can modify many attributes of a symbol when you create an instance of it, you cannot change the basic shape of the symbol upon which the instance is based. So while you can create frame-by-frame animations of both symbol- and non–symbol-based elements, you cannot create a frame-by-frame animation of a symbol-based element if you need to change its basic shape in the course of the animation.

Onion skinning

The onion skinning feature shows an outline of the content in a range of frames (see Figure 2). For example, if you create an animation of a ball moving across the Stage, you can see where the ball is in each frame by using the onion skinning feature.

Figure 2. Using the onion skinning feature

Creating motion tweens

Instead of creating a unique drawing for each frame on a Timeline, you visually represent how a graphic should appear at the animation's starting and ending points. Applying a motion tween fills in all the frames between the starting and ending points. The process of drawing the in-between steps is referred to as tweening. Motion tweening is an efficient way to create animations. A motion tween animation is also referred to as a motion tween transition.

To create motion tween animations in Flash, you'll typically use:

• Symbols
• Keyframes
• Motion tweening

You will always use keyframes when you are producing animations on the Timeline because keyframes are the only frames that can be edited. In the creation of an animation you might also be required to add frames to the animation (see Figure 3).

Figure 3. Inserting keyframes

Using symbols

Only symbols can be animated using a motion tween. Typically, you'll animate a graphic or movie clip symbol by placing and modifying instances of it on different keyframes that you insert on a Timeline.

You can tween only instances of the same symbol; the symbol instances must be the only assets in the animating keyframes throughout the life of the animation. For instance, you cannot have a symbol and a text asset on the same keyframe in the same layer. The text asset must occupy a keyframe in a different layer if you want it to be visible.

Page 3 of 5

Previous Page

Next Page