GIF Animation

Animation is a powerful tool. While GIF images aren't hard to create (particularly when using tools like Fireworks), they are hard to use effectively.

We'll discuss principles and uses of animation on the web, and then discuss creation and optimization of animated GIFs using Fireworks.

In-Class Exercise: GIF Animation

Overview Animation is a means of drawing attention and emphasis to your web materials by leveraging the power of movement. Creating movement requires the use of time. Frames are the critical component in Fireworks to create animation because Frames control time. The amount of time a frame remains visible is called the frame delay. The number of times the frame sequence repeats is called the loop.

Part 1: Frames

1. Open Fireworks and choose File->New to create a new graphic. Set the dimensions to 400 pixels wide by 80 pixels high.

2. Choose the Text Tool and click on the new graphic canvas you have just created. Type in your first (and, if it will fit, last) name. Use Verdana, 50pt, Black as the beginning settings.

3. Open the Frames Window (Window->Frames). You should see Frame 1 already.

4. Use the duplicate frames command to make n-1 copies of your first frame where n=the number of letters in your text. Each frame should be an identical copy of the first. (You can find the command by clicking on the arrow in the top right corner of the Frames Window.)

5. Click on Frame 2 to make sure you're working on the second frame. Change the color of the first letter of your name (choose a bright color).

6. Now go through each individual frame and change the color of the subsequent letter in line. By the time you finish, you will have changed the color of all the letters (except letter 1).

7. Use the play buttons at the bottom of the Canvas Window to preview your work. Keep tinkering with it until you have a set of frames that turn each letter in into a different color.

Part 2: The Animated GIF

1. Use File->Preview in Browser to look at your file. Did it play? If not, read on before you panic!

To make sure your animation works, you need to save it in Animated GIF format, not standard GIF format. If you don't, nothing will happen when you load the image. That's why all you see is the first image right now.

1. Go to the Optimize Tool (Window->Optimize) and change the format setting to animated .gif.

2. Try File->Preview again. Does the animated .gif work? If not, now would be a good time to ask for help.

Part 3: Timing and Loops

You may have noticed that your animation played through endlessly and the timing of the animations was evenly spaced. You will want the animation to play through more than once on the web but endless animation isn't good. Since some animations might be better if played more than once, you will want to change the looping. Additionally, the even rate of frame delay may not accent parts of your animation in the way you want. Let's change that and add some zip to your animation.

1. The Frames Window contains options for you to experiment with looping and with timing. Change the .gif so that it loops 3 times. Use File->Export to save the file, and then open it in a browser to test it.

2. In Fireworks, go back to the Frames Window and adjust the frame speed so that first letter of each word stays on the screen exactly 3 seconds. (How do you know how long to set the frame speed to get a 3 second appearance? HINT: the numbers measure 100ths of a second)

3. Use File->Preview in Browser to make sure your animated .gif works correctly. If it still doesn't work, keep trying until you do make it work. Do not discard this file yet.

Part 4: Layers and Animation

It makes sense that you can use Layers and Frames together. All you need to do is make sure your layers are applied in the desire frame(s).

1. Highlight Frame 1.

2. Use Window->Layers or choose the Layers tab at the top of the Frames window to open the Layers Window. Rename Layer 1 to Name (do not change the text component of Layer 1). Now, add a new layer. Rename it as Box.

3. Make sure you've highlighted the Box Layer. Using the Rectangle tool, draw a rectangular colored box over the first letter of your name (use a color that constrast with the letter). Notice that it now obscures the letter. To correct this you will have to switch the order of the layers. Remember that layers at the bottom are not visible behind layers at the top.

4. Move the Name Layer to the top of the vertical stack of layers.

5. Now File->Preview in Browser. Does the colored background appear BEHIND the letters in both frames? If not, correct it and check again.

6. Use File->Preview in Browser. Does the animation play correctly. If it does, you should see an animation sequence that changes the colors of each letter one at a time AND the first letter stays on the screen longer with a red background.

7. Congratulations, you've just mixed and matched layers with frames!

Part 5: Transforms and Animation

1. Create a new image with File->New and set it to 300 pixels wide by 300 pixels high.

2. Use the Polygon Tool and create a 5 pointed star in red.

3. Open the Frames Window and make 7 copies of this frame.

4. For each frame, Select the star and use Modify->Transform->NumericTransform to decrease the size of the image. You are trying to make an animation where the image shrinks and then gets bigger again.

5. Use File->Preview in Browser. What do you think?

Part 6: Putting It All Together

Using this airplane.gif file, create an animation that shows the airplane as it goes up and down, from Los Angeles to Rochester (by way of Chicago). Put the completed animation up in your imm directory, and post a link to it as a comment to the weblog entry for this in-class assignment.

If you want more of a challenge, figure out a way to incorporate my face in a window (remember, you can find a photo of me on my personal web page).