Home >> Production >> Flash and ActionScript >> Understanding Frames and the Timeline

Flash Basics: Understanding Frames and the Timeline

A frame is one moment of the animation. Dictating each segment of time and movement, frames are at the core of any animation. The number of frames in your movie and the speed at which they're played back will determine your movie's overall length. A movie set to play at 12 fps will display 12 frames in one second, 24 frames in 2 seconds and so on. A twenty second animation would have 240 frames.

You can adjust the properties of your move by going to Modify-->Movie


Here you can adjust the frame rate, (how many frames your animation displays per second), and the dimensions of your stage (dimensions of final swf file) as well as background color.

 

 

 

 

The timeline is full of different kinds of frames, that represent different kinds of animation

 

Placeholder Frames:

Placeholder frames are not really frames but spaces where frames can be placed. They are indicated by the timeline grid. Devoid of content, these frames make up the majoritiy of the timeline when you begin your Flash project.

Because your movie needs real frames on at least one layer of the timeline to keep playing, the animation will end once it reaches a point where all layers contain only placeholder frames.

This movie will stop playing at frame 20

 

Keyframes:

Keyframes are moments when the animation is to undergo a visual change, or as you'll learn later on, when you want an action to occur, or want to add a label.

This example has 7 keyframes, demonstrating the different uses of keyframes in the timeline.

 

You can define every frame of your animation by hand. This is called frame-by-frame animation and it requires numerous keyframes since each frame is edited individually.


frame-by-frame animation

 

A tweened animation on the other hand, requires only two keyframes-- one begins the tween and one that ends the tween. Changes that occur between the beginning and ending keyframes are calculated by Flash and thus do not require additional keyframes.

Although most keyframes contain content that is visible on the stage, they can also be blank-- usually the result of removinga movie element from the animation. Every new project you begin in Flash starts with a blank keyframe on Frame 1 of Layer 1.

A regular keyframe is identified by a solid black dot.

A blank keyframe is identified by a small black vertical line

A keyframe with an attached action is identified with a small a.

 

Regular Frames:

Regular frames always follow keyframes and contain the same content as the last keyframe on the same layer.

A keyframe on the timeline denotes a change, regular frames proceeding a keyframe denote the duration of that change.

In this example, after the motion tween, the content will still be visible on the stage from the end of the tween at frame 14 through the end of the animation at frame 20.

 

Tweened Frames:

As mentioned above, a tweened animation requires only 2 keyframes and Flash calculates the changes in between them. Tweened frames are always part of a tween sequence consisting of two keyframes and any number of frames in between. The frames between the two keyframes represent computer-calculated graphics.

There are two types of tweening:

motion tweening- used to tween the size, position, rotation, alpha, etc. of symbols, groups or text blocks in your animation.


This is the timeline for the above motion tweening animation.

 

Important Note:

shape tweening- used to morph one simple shape into another-- for example, smoothly transforming a blue circle into a red square.


This is the timeline for the above shape tweening animation.

 

Go on to Symbols, Tweening and Properties: Creating a Simple Motion Tween