Continued From..

Text Messaging/Buttons

We can also create animations with text messaging, where our keyframes are made of type elements. The following example is a simple trigger button with three keyframes.

1. Select File -> New and create a new canvas 88 x 31 pixels.
2. Select Select -> Select All and select Edit -> Fill using black to fill the background of the button with black.
3. Select New Layer from the layer palette window and select Select -> Select All. Choose a color for your button's stroke color by double clicking the foreground swatch in the toolbar and select your stroke color in the color picker.
4. Select Edit -> Stroke and choose the width of your stroke. In this example we used a value of 2.
5. Choose the Type Tool in the toolbar and click on the canvas area to enter the type message for your button's first frame.

6. Click on the canvas area to enter the type message for your button's second frame.

7. Click on the canvas area to enter the type message for your button's third frame.

8. Save file as psd.
9. Import the layered image file into your GIF software, or export each frame from your image editor as a single gif (button1.gif, button2.gif, etc).
10. Set the frame duration for each keyframe and loop. In this example we used 2-4 seconds per frame.

11. Save file as gif.

Well, those are some of the techniques used in animating graphics for the web. Remember that the more colors and graphic images you use in each frame, the larger your final animated files will be. It will require some experimentation to be able to create animated art that results in professional graphics that don't yield unreasonably large files. One way to assist your animation building is to storyboard your animations.

A storyboard is a rough sketch depicting the events or story unfolding in an animation project. Careful planning of your animation will help you determine your motion and the number of frames required for your beginning animation projects. Until next time, Happy Hunting!

Useful Links/Reference

Animation Factory - Useful resource for web animators.
Animation World Network - Animator's resources
Webmonkey Animation Lessons - Nice beginner's tutorials for creating animations.
GIMP animation tutorials - Layered images for animation with the GIMP.