Introduction to Animations


Animations Fundamentals



An animation is a series of images that scroll or pass one immediately after the other. The process is usually done so fast that it gives the impression of movement. To make it effective, there are some principles that should be applied.

A certain number of images should scroll during a specific amount of time.

Practical LearningPractical Learning: Introducing Animation

  1. Start Adobe Flash
  2. In the opening dialog box, click Flash File (ActionScript 3.0)
  3. To draw a line based on what we learned in the previous lesson, in the Tools window, click the Line Tool Pen Tool
  4. Draw three subsequent lines as follows:


The Timeline

The time during which the images should scroll is referred to as timeline. Each image inside the timeline is called a frame. To assist you with organizing these aspects of an animation, Adobe Flash is equipped with the Timeline window. By default, it is positioned in the lower-left section of the interface:


The Timeline is made of various sections, starting with the layers on the left side.

The Frames

The top-right side of the Timeline shows a series of numbers with short bars under them. Under these bars, there are small vertical rectangular boxes. Each of these boxes represents an image that, from now on, we will call a frame. The numbers allow you to identify the frames.

One of the numbers is surrounded by a pink rectangle.

To work on a frame, you can first click or right-click it in the Timeline, which gives focus to a frame, or selects the frame. When a frame receives focus or is selected, it get a navy color:


You can also select more than one frame:

  • To select a range of frames, click a frame on one end of the range and drag to the other end
  • Click a frame on one end. Press and hold Shift. Click a frame at the other end of the range. Release Shift
  • To randomly select frames, click one frame. Press and hold Ctrl. Click each of the desired frames. Release Ctrl

Sometimes while working in an animation, you may want to make some change(s) in the sequence of images. One way you can do this consists of adding a frame inside some existing frames. This is also referred to as inserting a frame.

To insert a frame:

  • Right-click a frame and click Insert Frame
  • Click a frame. On the main menu, click Insert -> Timeline -> Frame

If a frame has something you want to replicate in another section of the timeline, you can copy that frame. To copy a frame, right-click it and click Copy Frames. To replicate it, right-click the target frame and click Paste Frames.

The gray section under the frames is used by other layers if you decide to use more than one (layer).

Practical LearningPractical Learning: Creating a Frame

  1. In the Timeline, right-click the box under 1 and click Copy Frames
  2. Right-click the box under 20 and click Paste Frames

Previewing an Animation

While or after creating an animation, there are various ways you can view, review, or preview it:

  • At any time you can press Enter
  • On the main menu, you can click Control -> Test Movie or press Ctrl + F5
  • In the Timeline, you can click a frame to see what displays on it
  • In the Timeline, you can drag the pink rectangle from left to right and vice-versa


A keyframe is a frame used as an orientation where something significant should occur. For example, you can make a symbol appear or disappear in such a frame.

To create a keyframe, you can:

  • Right-click a frame and click Insert Keyframe
  • Click a frame. On the main menu, click Insert -> Timeline -> Keyframe

A blank keyframe can be used to create an whole or empty area in an animation. It can also be used as a temporary object that hold one or more symbols.

To create a blank keyframe, you can:

  • Right-click a frame and click Insert Blank Keyframe
  • Click a frame. On the main menu, click Insert -> Timeline -> Blank Keyframe

A motion is a change that occurs from one frame to another.

Practical LearningPractical Learning: Creating Keyframes

  1. In the Timeline, right-click the box under 10 and click Insert Keyframe
  2. Right-click the box under 30 and click Insert Keyframe
  3. Click the box under 10 to give it focus
  4. In the Tools window, click the SubSelection Tool SubSelection Tool
  5. Click the left line to select it
  6. Drag its most left end and position it symmetrically to the top
  7. Click the right line to select it
  8. Drag its most right end and position it symmetrically to the top

  10. Tu see the animation, on the main menu, click Control -> Test Movie


Between the Frames

The section between two frames is called a tween. This is what mostly controls an animation. The fundamental purpose of an animation is to have something happening between two frames. We saw that a motion is a change between two frames. For this reason, an animation is fancily called a motion tween. In fact, Flash can assist you with quickly creating an animation if you simply ask it to create a motion tween.

To create a motion tween, after drawing




Previous Copyright © 2009-2019, FunctionX, Inc. Next