Lab on Animation

How Animation Works

Based on the same idea as movies, television, flip-books and so forth: an animation is a series of still pictures (frames) with the sequence displayed quickly enough that your eye/mind perceive it as motion rather than a set of still pictures.

Only GIF can do animation; JPG and PNG cannot. Examples:

Want to see more examples of animations by cs110 graduates? Here is a very simple example of text animation drawn from scratch. One can also use images from animator's notebook. Here is an example (click anywhere on the image to start the animation):

an animation of a worm moving across the screen

How to do it?

Three major ways:

Draw (using, say, Fireworks) an image for each frame
Use Fireworks to create and assign properties to "animation symbols"
Paste, from some other source, an image for each frame

Most of the effort, of course, goes into the drawing. Because of time constrains, we will create animations using only the last two techiques above.

Paste images from other sources

In this part, we will copy/paste some images from an animator's notebook, to create an animation similar to the "willie" animation above

Directions

Thanks to the wizards in IS, there is documentation on the CWIS for Creating an Animation with Macromedia Fireworks. The basics for today's demo are:

Save an image series from the animator's notebook onto the desktop.
Launch Fireworks and open the image
Create a new image that we will copy/paste to. Then, repeatedly:
- Select the big image window
- Select the "Marquee" tool
- Select the desired region and copy it
- Select the animation window
- Create a new frame in the frames/layers window
- Arrange to see the new frame and a shadow of the previous frame, using the little triangles connected by lines on the left of the frames/layers window.
- Paste the region, switch to the black arrow pointer, and carefully position the region with respect to the previous region.

Exporting

When you're happy with the animation, you should save it (in PNG format) and then export it:

Select animated GIF as the type
Optionally, select transparency
Switch to the animation tab to select looping behavior. You can also preview it there.
export it

You can check out the result by looking at it with a web browser.

Timing

You can get some nice effects by playing with the timing. By default in Fireworks, each frame takes 20 units of time (hundredths of a second), so 1/5 of a second. (Compare with 1/24th for film or 1/30 for TV.)

Layers

Often, we want something to move against a fixed background: think about the Flintstones in the Willie animation above. This is a perfect application of layers.

Open the "Layers" window (Window --> Layers)
Create a new layer, name it and share it across frames (The "upper" layers are closer to the viewer than the "lower" layers, in the "Layers" window.)
Double-click the current layer to rename it.
The "eye" icon to the left tells whether a given layer is currently visible. By default, you see all layers, regardless of which one you're editing, so it's easy to get confused!

Here is an example of an animation that is using a couple of layers.

Using Fireworks animation objects

Here is a simple example created using this technique. To start out on such an animation:

Create a new Fireworks document
Use the Vector Text Tool to write a piece of text
Having the text object selected, choose Modify --> Animation --> Animate Selection
In the properties dialog box, set the Animation Parameters as you wish
Proceed to add more objects, layers, etc
Save and export as usual