Creating a Simple Animation

A step-by-step tutorial to making your first animated GIF file.

by Gary W. Priester

You see them on a lot of sites (even on the home page of this one). Animations. They catch your eye. Sometimes they're so annoying you can't see anything else on the page. But mostly, they're fun. They add movement to a page, not unlike what you see on TV (and have you noticed that more animations on TV are looking like simple Web animations?). They also add a dimension not possible on the printed page.

These animations are almost always GIF files. GIF (Graphic Information Format) is one of the most common formats on the Web (to read more about Web graphics, click here). They can be played on virtually every browser, they can be small and download quickly, and they're easy to make. I'll show you how, step-by-step.

• First: Download CorelXara. This Windows program makes it fast and easy to create the best web graphics. It's what we use here at eFuse.com. Click here to read more about what makes Xara so good. Click here to read a review of Xara by the editor of eFuse.com.
• Overview: what this tutorial will help you accomplish.
• Next, Follow the directions you read here.
• A quick intro to Xara
• Creating the graphic elements: creating the graphics and frames that will make up the animation
• Animation mode: putting the animation together.

Project overview

In this article, you'll learn how to create a simple animated banner, like the ones found on many Web sites. Our animation features some simple text, a pair of animated eyeballs, and a call to action. As many of you may be new to animation, I'll keep it simple and basic. In coming weeks eFuse.com will add intermediate, and advanced GIF animation features.

We'll use CorelXara 2 to create the graphics and animation. In my humble opinion, Xara 2 (pronounced zar-rah too) is the gods' gift to the Web graphics designer. It's quick and responsive and handles like a dream. It also lets you create graphics and assemble them into animations. To read more about why I think Xara is so great, click here.

A fully functioning version of Xara 2 is available for a free 15-day trial. Click Here to download the trial version. If you have questions or need help with how to perform certain tasks in Xara, visit the Xara Conference.

The quick tour

Figure 1 shows Xara's main window. The area across the top is called the Infobarand is context sensitive—it changes to reflect options and information pertaining to the current operation.

The second row of buttons contains the context-sensitive buttons that apply to the current action, including size boxes and percentage boxes. The bottom row is the Animation Button Bar, which is grayed out until you open the animation window. On the left of the screen is the Main Toolbar.

The Screen Palette contains two kinds of colors, named colors (the squares) and Web-safe colors (the diamonds). We'll be using the Web-safe colors. That's the quick tour. If you need more information, use Xara's excellent Help menus.

Creating the graphics and frames

Step 1. Choose File/New/Animation or click the New Animation button located in the upper left corner just under the Edit pull-down menu. This opens a new animation window and enables the animation buttons on the Infobar.

When working on the Web, you want to work in pixels. So choose Utilities/Options (or press Control-Shift-O), click on the Units tab, and choose Page Units: Pixels. Click on OK.

Step 2. Select the Rectangle Tool and drag a rectangle 380 pixels wide by 145 pixels tall. The middle row of buttons on the Infobar changes to options related to rectangles. The size of the rectangle is displayed on the Infobar in the H and W (height and width) boxes.

Step 3. The diamond-shaped colors along the bottom of the screen palette represent Web-safe colors. They should be used for text and large areas of flat color, such as our rectangle. With the rectangle selected, pick a warm yellow color and click on the color with the left mouse button to apply the fill to the square. Clicking on a color with the right mouse button assigns the outline color.

Clicking on the square with the cross-hatching sets the fill (left button) or outline (right button) to none. Clicking on the small color wheel opens the Color Editor where you can enter the RGB (Red, Green, Blue) values you want.

Step 4. Select the Text Tool; click in the middle of the square; and type:

LOOKING FOR
A COOL SITE?

I've used 36-point Verdana (you can use any font for the Web when the type is this big). Highlight the text by dragging the text cursor across the letters, and change the font and point size on the Infobar.

Step 5. Choose Edit/Select all (or select the text and the rectangle by holding down the Shift key and clicking on both items to "multiple select"), and select Arrange/Alignment from pull-down menu. Select Align Centrally from the Horizontal and Vertical drop-down lists, and click Apply.

Step 6. Using the Ellipse Tool, draw two white ellipses slightly larger than the inside of the O's in LOOKING, as shown. Make two small red circles for eyeballs and position them looking straight ahead (centered inside the "O"'s).

Click on the Selector Tool (the white arrow) or press F2.

Click on the typed words and press Ctrl-F to bring them to the front.

We now have the first animation frame.

Step 7. Click the Copy Frame button four times to copy the contents of this frame to four new frames.

Press the Select Previous Frame button until you return to Frame 1.

Select the red eyeballs and, using the arrow keys on your keyboard, move the eyeballs to the left as shown.

Step 8. Click the Select Next Frame button to advance to Frame 2; select the red eyeballs and move them to the right.

Advance to Frame 3 and move the eyeballs to the top.

Advance to Frame 4 and move the eyeballs to the bottom.

And, finally, advance to Frame 5 and move the red eyeballs to the center.

Step 9. Press the Copy Frame button to create Frame 6. Click on the Text Tool; then click on the text. Use the delete or backspace key to remove the existing text and type:

CLICK HERE!

Press F2 (or click on the Arrow Selector Tool) and click on the white square at the bottom to change the text to white. Click on the background rectangle; then click on a Web-safe purple diamond.

Creating the animation

To preview the animation, click the Show All Frames button (show_all_frames_button.gif) to open the Preview All Frames dialog (preview_all_frames.gif). The animation will play either in a continuous loop or one frame at a time. Our animation looks pretty cool, but it moves too fast. We can adjust the length of time each frame is displayed to make it easier to view.

Step 10. Click the Animation Properties button to open the Animation Properties dialog.

Click the Select Previous Frame button until you reach Frame 1. Change the Display This Frame For: value to 25, and press Apply.

Press the Select Next Frame button to advance to Frame 2. Change the value to 25, and press Apply. It is important to press Apply after each change; otherwise the changes will not take place.

Repeat this process and change the values for Frames 3 and 4 to 25. Change Frame 5 to 150 and Frame 6 to 100. Now, open the Preview All Frames player again and see how much better this looks.

Step 11. Press the Animation Properties button. Select the Animation Colors tab.

Change the setting for Palette Colors to Global Browser Palette and set Dithering to None. This will ensure that your animation displays the same on Mac or Windows computers. Because the colors are all solid, setting Dithering to None will reduce the file size of the animation.

Saving the animation

Step 12. We've made all of the changes we need to make to our animation. One step remains, and that is to Export the file as an animated GIF. To do this, click the Export Animated GIF button. Name and save your file.

That's all there is to it. Now you can place your animated GIF into NetObjects Fusion and make it a link to anything you want.

Want to get more animated? Read Gary's more advanced article.

About the Author

Gary Priester is a partner in The Black Point Group, a Northern California graphic design company. He is the author of Looking Good in Color, Ventana Press and CorelDRAW Studio Techniques, Osborne/Corel Press. E-mail Priester at or visit his web site.
© 1998 Gary W. Priester