Flash Animation Timeline Lesson 2

NOTE: Before reading this article make sure you have read Part 1.

There are several components used in this program that one must become familiar with before you can create a Flash Animation. The most basic of these are layers. If you have worked with programs like Adobe Photoshop, Illustrator, and so on, then you should be used to working with layers. Think of Layers as invisible sheets that stack one on top of the other. Just like a traditional animator will stake sheets of paper one on top of the other. This is how various components, text, and so on can be arranged to flow around and on top of each other.

Layers

When you first create a new flash file, you begin with one layer, Layer One. Most designers use a separate layer for each main component of the Flash movie. Thus, each sound, each graphic, each title or sentence, each button has it’s own layer. Organizing components according to layer makes editing and revising much easier. With this program, you want to learn as many shortcuts as possible. It is easy to edit one layer without interrupting any other layers.

Image

 

Adding Layers

Add layers to your flash file by selecting “Add – Layer” on the toolbar. Each layer will be numbered consecutively, “Layer 2”, “Layer 3” and so on with new ones arranged on top of the original layer.

Image

 

Image

 

These titles, can be renamed to clarify the contents. To rename a layer, simply double click the text and type in the new name for the layer. You can also rearrange the position of your layers. Remember, the layer at the top of the stack will be in the foreground. Similarly, the bottom layer will be in the background of your finished movie.

Image

 

Modes

Hidden mode: This is the mode to use when you don’t want to see specific layers as you work on another layer. This type of layer is identified with a big “X” next to the layer name. You can make a layer visible or hidden by selecting the “eye” symbol dot within the layer’s area.

Image

 

Locked mode: This is the mode to use when you wish to protect a layer’s content – it prevents you from altering the contents. Symbolically, it can be identified by the little lock to the right of the layer name. You lock and unlock a layer by clicking on the dot beneath the lock symbol, within the layer’s area.

Image

 

Outline mode: When you are working on a layer, use this mode to see the rough shape but not to see the colors and fills.

Image

 

Guides

A guide layer is used within a Flash movie to help keep all of the layers and objects in their rightful places. To turn a layer into a Guide layer, right click on the layer and select “Guide” from the popup menu.

Image

 

You’ll notice that the icon before the layer name changes to a Guide Layer one. It’s easiest to put your guide layers at the bottom of the layer heap to prevent mixing them up and to help you feel in control of the movie.

Image

 

The point of the guide mode is to allow you to have “guides” on stage without have to erase them. Example. Say you want to have objects appear in a circular form. You draw a circle the guide layer, then on the other layer you can now draw whatever you want in a circle. Now when you export or publish your file guide layers do not show. That is the point of guides.

Image

 

Key Frames

Frames and Key frames are what allow an animation to come alive. Key frames allow a frame to change to a different pose or different drawing completely. Key frame make objects move across the screen, or make a facial change of a character. To expand the timeline you can highlight the layer you wish to expand and hit F5 on the keyboard.

Image

 

You can also add Key Frames to your layer. Key Frames allow you to change the content of the specific frame as below. To add Key Frames hit F6 on the keyboard.

Image

 

Onion Skin

Onion skinning is a term for a technique used in creating animated cartoons and editing movies to see several frames at once. This way, the animator or editor can make decisions on how to create or change.

In traditional cartoon animation, the individual frames of a movie were initially drawn on thin onionskin paper over a light source. The animators would put the previous and next drawings exactly beneath the working drawing, so that they could draw the ‘in between’ to give a smooth motion.

This mode allows you to see frames before and after your current frame. (see below)

Image

 

This mode allows you to see frames before and after your current frame as outlines. (see below)

Image

 

This mode allows you to see and edit multiple at once. (see below)

Image

 

This is where you edit how many frames to see or edit. (see below)

Image

 

Masking

Masking is revealing portion of your picture or graphic in the layer below.

Image

 

To make a layer into a mask right click that layer and click mask. (see below)

Image

 

As you can see now only the circle shows. The layer changes to a masked layer and locks the current layer you selected and the layer below it.(see below)

Image

 

If you unlock the layers you can edit the mask and drawing that you are masking. (see below)

Image

 

You can change the mask itself. Click the mask layer and delete the circle and make a happy face. (see below)

Image

 

Once you lock the layers the mask shows up. (see below)

Image

 

Playhead

The playhead allows you to select the frame to be altered. It also allows you to view the movie by scrubbing, or dragging the playhead across the timeline ruler.

Image

 

Current Frame

The current frame indicates the frame number whose contents are directly visible on the stage and is the current position of the playhead. So, what you see on the stage, when there is no movie playing, is the current frame.

Image

 

Frames per second

Frames per second (or Frame rate) is the actual frames per second setting for your movie, when the movie is not playing. When the movie is playing, it dynamically shows the actual playback speed. However, frames per second and actual playback speed can differ dramatically based on the processor of the computer being used. Frames per second will always stay the same, but with a slower processor a user will view slower actual playback.

This animation is set with 12 frames per second or 12fps. As you can see in the timeline there are only 8 frames is this animation. (see below)

Image

 

Image

 

This animation is set with 24 frames per second or 24fps. To make the same animation that was set at 12fps animate at the speed of 24fps you must adjust the frames, because now it is 2x faster then originally. (see below)

Image

 

Image

 

If you adjust the frame rate, but do not adjust the frames in the layers you timing will be off, as you can see here. The original animation was 12fps, then edited to be 24fps. (see below)

Image

 

Image

 

There are many components to learn when using Flash, but getting the basics of layers down pat is a wonderful first step. Practice moving layers around, changing modes and creating guide layers. Remember, practice makes perfect!

NOTE: Be sure to check out Part 3

Leave a Reply