Animating in Flash - Frame-by-Frame Animation

Flash Course

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:

• Keyframe - a frame with content on the Stage. This frame marks the begining of an animation or a place with changes in animation.
• Blank Keyframe - a keyframe with no content on the Stage (its stage is blank).
• Pause frame - is added as last keyframe in a sequence of static frames.
• Playhead - represents the frame which content is displayed on the Stage.
• Static Frames - represent a unit of time. They add time to an animation. For example, if you want an image to remain on screen for a longer period of time, then you insert frames (static frames) into the timeline.
• Frames not in animation - are the cells beyound the last frame of the animation. You can't move the playhead beyond the last frame in your animation.

- To create Frames in the Timeline, use one of these three ways:

• Right-click on a cell in Timeline and choose: Insert Frame (for static frames), Insert Keyframe or Insert Blank Keyframe
• Or, click on a cell in Timeline, then click Insert -> Timeline and choose one of these options: Frame (for static frames), Keyframe or Blank Keyframe
• Or with shorcut keys, click on a cell in Timeline, then press: F5 (Static frame), F6 (Keyframe), F7 (Blank Keyframe)

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:

• The simplies way to test an animation on the Stage is by pressing the Enter key, or click Control -> Play. Flash will run the frames in Timeline. If the Control -> Loop Playback option is enabled, will run the frames continuously.
• Another way is by click the Playhead and move it across the frames.
• A third way is by using the Controller panel , which can be opened from Window -> Toolbars -> Controller.

- In a separate window:

• Press the Enter key (or Control -> Test Movie -> in Flash Professional, or Control -> Test Movie -> Test). Opens an window that uses the Flash Player to display the presentation.
• Another option, click Control -> Test Scene. This will play only the animation created in the current scene.
  - A Flash document can contain multiple scenes.

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net