An animation is made from a series of framed images displayed one after the other to create the illusion of motion.
Flash provides several methods for creating animation.
- You can create an animation using frame-by-frame method, in this procedure the content is redrawn on each frame with slight differences from the last frame. When these frames are played in sequence, there is an illusion of movement.
- Another method is to use computer-generated tweens (Classic Tween, Shape Tween and Motion Tween), you create the first and the last frame, then the Flash aplication makes the connection between them, creating the other frames automatically.

Frames and Timeline

The main tool used in Flash animation is the Timeline Panel.
In Flash, Frames are the little rectangular cells in the Timeline, they are numbered at the top of the Timeline.
You don't draw into a frame on the Timeline, you draw onto the Stage. The current-frame marker (Playhead) indicates the frame whose contents are currently onscreen.
A Layer is a row with frames in the Timeline. You can create multiple Layers.
In the image below is the Timeline panel with its main elements:
Timeline and frames
- To create Frames in the Timeline, use one of these three ways:
When you insert a Keyframe, in the Stage of this frame is copied the content of the previous Keyframe.
When you insert a Blank Keyframe, it creates a frame with a blank Stage.
Keyframes can be Selected, Moved, Deleted, Copied, and Pasted to and from any Timeline in your Flash movie or between different Flash documents.
You can perform these operations from the options which appear when you right-click on a keyframe (or from Edit -> Timeline): "Remove Frames", "Clear Freames", "Cut Frames", "Copy Frames" and "Paste Frames".
- The "Remove Frames" option deletes the selected frame(s) from Timeline (including their content on the Stage), but the "Clear Frames" option deletes only the content on the Stage, the frame still remains in the Timeline.
- "Copy Frames"-"Paste Frames" copies the frames in Timeline along with their content on the Stage, while the "Copy"-"Paste" copies only the contents on the Stage.

To select multiple continuous frames, click on the first frame you want to select, hold down the Shift key and click on the last frame you want to select.
To select multiple frames which are not continuous, hold down the Ctrl key and click on each frame you want to select.
To select all frames on a Layer, click on the name of that layer.

Creating a Frame-by-Frame Animation

You can animate any visible object you place on the Stage.
Frame-by-Frame animation is the traditional animation technique which consists in manually drawing each frame.
Draws a picture on the Stage and then draws the same thing on the Stage of the next frame but with slight changes made to the drawing. Static parts of the scene (such as a background) are copied and only the objects that change are redrawn.
When you export your movie, Flash will play these frames in succession at specific intervals depending on the frame rate you set (FPS).

In this example we animate a circle, creating the illusion of a bouncing ball.
  1. Open a new Flash document, select the "Line Tool", and draw a horisontal line at the bottom of the Stage.
  2. Click the "Oval tool" on the "Tools panel". To draw a shape without border lines, click on the "Stroke Color" and chose the "No color" icon.
  3. Draw an oval over the line (this will represent the ball).
  4. In the Timeline panel, Select the Frame 5 (click on it) and create a Keyframe (by pressing F6 key, or right-click on it and choose "Insert Keyframe").
    The contents of the Frame 1 (which is also a Keyframe) are copied on the Stage in the Frame 5.
    - We create the keyframe at Frame 5 (not 2) to let free the frames 2, 3 an 4, which become static frames, to add more time to this animation and make the changes on it more visible.
  5. Select the "Free Transform Tool", click on an empty area on the Stage to deselect the objects, then click on the oval. Make its high a little bigger and move it up a bit.
  6. In the Timeline, click on the Frame 10 and create another Keyframe (press F6). The content of the previous Keyframe is copied in this Frame. The Frames 6, 7, 8 and 9 become Static Frames.
  7. Click on an empty area on the Stage to deselect the objects, then click on the oval. Make its high a little bigger (but to not reach a circle) and move it up a bit.
  8. Click on the Frame 15 and create another Keyframe. Click on an empty area on the Stage to deselect the objects, then click on the oval. Make its high a little bigger (this time to reach a circle) and move it up a bit.
  9. Right-click on Frame 10 and choose "Copy Frames", then right-click on Frame 20 and "Paste Frames".
    - In this way, the Frame 10 with all its contents is copied into Frame 20.
  10. Right-click on Frame 5 and choose "Copy Frames", then right-click on Frame 25 and "Paste Frames".
    - This animation has 5 Keyframes and a total of 25 Frames.
  11. Now we test the animation. Click Control -> Test Movie -> Test (or Ctrl+Enter). Flash will open an window in which runs the animation frames, and plays them continuous.
In the presentation below you can watch this example.

Example Frame by Frame animation

- You can download the FLA file with this example from -> Frame by Frame animation.

Playing an Animation

There are various ways to test /play an animation created in a Flash document.
You can test in a separate window or directly on the Stage.

- Directly on the Stage:
- In a separate window:

Daily Test with Code Example

Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
Click on the "echo" correct instruction.
echo "" echo ""; echo """;
echo "Address URL:";
Animating in Flash - Frame-by-Frame Animation

Last accessed pages

  1. PHP getElementById and getElementsByTagName (35754)
  2. Highlight Images on click (4102)
  3. Add Pause in JavaScript script (12981)
  4. Contact page - CoursesWeb (36729)
  5. Tabs effect with CSS (37366)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2283)
  2. Contact page - CoursesWeb (2188)
  3. Tabs effect with CSS (2176)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (884)
  5. PHP getElementById and getElementsByTagName (794)