Creating a Simple Animated Banner with CorelXara

by Gary W. Priester

OK, so you've done the simple tutorial. Now you want to do something more complex. Have I got a tutorial for you. Step right this way...

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.

Next:

• Creating the graphic elements: creating the pieces that will make up the animation.
• Animation mode : putting the animation together.

Creating the banner graphics

I'm going to assume that most of you are new to CorelXara 2.0 and go into more detail than I normally might in such a tutorial. Users familiar to Xara, please bear with me.

Step 1

Open Xara. Click the right mouse button (I did mention that Xara is for Windows only, didn't I?) and select Page Options from the pop-up menu. Select the Units tab and change the units to pixels.

Select the Grid and Ruler tab and change and change the Major Spacing amount to 100pix (type it exactly as it is here, with no spaces) and change the Number of Subdivisions to 10. Before you ask why, let me explain. Web graphics are measured and displayed in pixels (Picture Elements), not inches. When you create Web graphics in pixels--and exact pixel increments as opposed to fractions of pixels--you get graphics with clean borders and no thin annoying outlines.

Step 2

Click on the page again with the right mouse button, and select Snap to Grid from the pop-up menu. Select the Rectangle Tool from the main toolbar on the left side of the screen—the Rectangle Tool's icon is shown top left and drag a rectangle 486 pixels wide by 60 pixels tall.

This is the size of a standard Web advertising banner. As you drag the rectangle, you can see the dimensions on the Infobar (the context-sensitive menu just above the top of the screen). When you're finished, the size will appear in the text entry box on the Infobar, which has now changed to display functions pertaining to rectangles.

Step 3

You'll notice the screen palette along the bottom of the screen has colored squares and colored diamonds, well actually rotated squares like the ones shown here.

The diamond-shaped colors are RGB (red, green, and blue) Web-safe colors, which means they will display clean and nondithered on Macintosh and Windows computers. Drag the scroll button on the color palette to scroll left and right. With the rectangle selected, click on a warm yellow color with the Selector Tool (the arrow). Let your cursor rest over any palette color for a few seconds and the RGB values will appear. The warm yellow color that I have used will appear as RGB 255,204,0.

Step 4

Select the Ellipse Tool on the main toolbar shown below (on the top left). Hold down the Ctrl key (to constrain the ellipse to a circle) and drag a 42 pixel circle. Change the fill color to RGB 204, 153, 255.

You can find the color on the screen palette or click on the small color wheel icon to the left of the screen palette to open the Color Editor  and enter the appropriate RGB values.

Select the rectangle and the circle (hold down the Shift key to select more than one object at a time) and click the right mouse button on the small box with the crosshatches to the left of the screen palette. This sets the line weight to none. (If you clicked on the square with the left mouse button and your colors disappeared, I won't need to tell you that the left button sets the fill to none! If you did this, select Undo from the Edit menu or press Ctrl-Z to undo the last action). Clicking on any screen palette color with the left mouse button sets the fill color while clicking with the right mouse button sets the outline color.

Before we go on, right click on an empty portion of the screen and disable Snap to Grid by selecting it.

Step 5

Reposition the circle so it is about 1/8 inch from the left of the rectangle. Hold down the Ctrl key and drag the circle to the right side of the rectangle. Before you release the left mouse button, click the right mouse button to drop a duplicate. If this proves too hard, simply select the circle and press Ctrl-D (as in duplicate) to create a duplicate circle and position the duplicate about 1/8 inch from the right side of the rectangle. Use the Object Alignment menu to align the two circles. (Select Align Centrally from the Vertical Positions drop-down list.) Notice the preview box in the upper portion of the dialog changes to preview the selected alignment action.

Step 6

Select the two circles and then select the Blend Tool from the main toolbar (shown on the left).

Click on the left circle with the Blend Tool and without releasing the mouse button, drag a horizontal line to the right circle. The result is a five-step blend, as shown. Blends remain dynamic in Xara, which means you can reselect the blend with the Blend Tool and alter any of the settings. Nice as this is, it is not what we want for the next step. So, with the blend selected, select Convert to Editable Shapes from the Arrange drop-down menu. Open the Arrange menu one more time and select Ungroup (or press Ctrl-U ). This disables the blend and ungroups the circles.

Step 7

Select the Text Tool from the main toolbar (shown top left) and click in the left side of the rectangle.

Type "Achieve Fame & Fortune." I've used 24-point Trebuchet MS, a font designed by Microsoft expressly for Web use. If you don't have Trebuchet, use any typeface you want—since the banner is fairly large, even fancy display faces will work. Change the text color to medium green, RGB 51,153,0, by either selecting the color from the screen palette or by mixing it in the Color Editor.

Creating the animation frames

OK, we now have just about all of the elements we need to create our animated banner. Xara has two modes or work screens: Drawing, which we just used to create the elements, and Animation, which we'll use to create the GIF animation. Before we start creating the frames for the animation, name and save your file and take a short eye break.

I'm going to get something from the fridge, and I'll meet you back here in about 10 minutes.

So did you have a snack? Huh? Well, I did. Cheese and crackers. Mmm. OK, go get something now, then. Bookmark this page or print it and finish when your stomach stops grumbling.

OK, feel better now? Let's finish up this puppy.

Step 1

Marquee-select (this means "drag your mouse around the objects"—you'll see a red line as you do) the rectangle, the text, and circles by using the Selector Tool to drag a rectangle around the elements. Press Ctrl-C to copy the selection to the Clipboard. Press the New Animation button (pictured top left)

which you'll find next to the New Page icon at the top left of the Infobar. This opens a new animation screen. Paste the contents into the new window (Ctrl-V).

Step 2

Press the New Frame button to add a new frame (what else?) and once again, paste the contents from the clipboard (Ctrl-V) onto this new frame.

The animation function buttons will now be highlighted. The functions from left to right are: a. New Frame, b. Copy Frame, c. Delete Frame, d. Select Previous Frame, e. Select Next Frame, f. Frame Properties, g. Preview Frame, h. Animation Properties, i. Preview All Frames, j. Export Animation, and k. Preview Animation in Browser. Click the Delete Frame button (with the red X) to delete the current frame. You should now have only one frame, Frame 1.

Here you can see (in the figure below) the 16 frames we will create for the animation. As you can see, we'll need another line of text, "Click Here Now!" We will also need a rectangle, the same color as the background, that we'll use to progressively mask the text.

Step 3

Select the circles and cut them to the clipboard (Ctrl-X). Create a yellow rectangle (the same color as the large rectangle) just large enough to cover the text, and bring the rectangle in front of the text. (Ctrl-F brings a selected object to the Front; Ctrl-B sends a selected object to the Back.) Paste the circles on top using Shift-Ctrl-V (hold down the Shift and the Ctrl keys at the same time and press V) to paste the circles in the exact same position they were in before they were cut to the clipboard. (Ctrl-V does not do this.)

Press the Copy Frame button (b) seven times to copy and paste the contents of Frame 1 into the next seven frames. All of the elements will now be in the exact same position in each frame, so we can now subtract elements from each frame to make the first half of the animation.

Step 4

Press the Select Previous Frame button (d) seven times until you reach the first frame. You'll know you've reached Frame 1 when the Select Next Frame button is grayed out. Press the Select Next Frame button (e) to advance to Frame 2.

In Frame 2, delete all but one circle, and delete the yellow rectangle covering the text. To delete an item, select it with the Selector Tool and press the Delete key. (If you accidentally delete the wrong item, press Ctrl-Z to undo the action).

Step 5

Press the Select Next Frame button (e) to advance to Frame 3.

Remove all but the first two circles. Next, select the yellow rectangle that is covering the text. Select the right middle control handle (the black boxes that surround the selected object are called control handles) and drag the control handle to the left, as shown, until the right side aligns with the right side of the second circle. The letters A, c, and h should be covered by the smaller yellow rectangle.

Step 6

Repeat this process, adding a circle each time, until you reach Frame 8 where all seven circles will be present and all of the text will be covered up. Press the Copy Frame button (b) to make Frame 9. Change the view quality to wireframe by sliding the Set View Quality slider on the top row of the Infobar (as shown) all the way to the left.

Select the Text Tool and highlight the text by dragging the text insertion cursor across the text until all letters are selected. Change the text to "Click Here Now!"

With the text still selected, change the text color to black. Select the text and the rectangle, and from the Arrange pull-down menu, select Alignment. Horizontally center the text on the rectangle. Drag the view quality slider back to the right to return to anti-aliased view ("anti-aliasing" smoothes graphics, so you should make sure it's turned on for your final graphics). Finally, delete the first circle on the left side. Your image should now resemble Frame 9.

Press the Copy Frame button (b) seven times to create seven additional copies of Frame 9.

Step 7

Press the Select Previous Frame button (d) six times to return to Frame 10. Make the modifications shown.

Continue advancing the frame and making the necessary modifications to each frame until you have made all of the changes. Save your work and take another eye break.

Creating the animation

You should now have all 16 frames for your animation. To see what the animation looks like, press the Preview All Frames button (i) to open the Preview All Frames  dialog shown  below.

The animation will loop continuously until you press the button with the black square to stop it, or close the dialog. You can also use the arrow buttons to move through the frames one by one. I think you'll agree that a few pauses would make the animation more dramatic, not to mention, easier to read!

Here's how to add pauses:

Step 1

Open the Animation Properties dialog by pressing the Animation Properties button (h). Select the Frame tab shown here.

In the Display This Frame For text entry box, type 0 and press the Apply button. If you don't press the Apply button, your changes will not be saved.

Step 2

Press the Select Next Frame button (e) on the Animation button bar to advance to Frame 2. The Animation Properties dialog now displays Frame 2. Change the Display This Frame For setting to 200. This adds a 2-second pause to give the reader time to read the text.

Step 3

Press the Select Next Frame button (e) until you reach Frame 14. Here we need to do two things: Change the text color to green, and set the display frame time to 5. Press Apply after you have changed the display time.

Step 4

Advance the frame to #15 and change the text color to red and the display time to 5. Remember to press the Apply button after each change you make in the Animation Properties dialog.

Step 5

Advance to the final frame, change the text color back to green and set the display frame time to 100. Click Apply.

Step 6

Select the Animation Colors tab (still in the Animation Properties dialog) and set the Palette Colors option to Browser palette and the Dithering option to None. Click Apply to apply these changes to the entire animation. Save your file.

There are two ways to preview your animation in CorelXara 2.0. We already saw one when we opened the Preview All Frames dialog. The second is the Preview Animation in Browser. This option accurately previews the animation in real time using your installed Internet browser (Netscape or Explorer). In addition, Xara displays a chart listing file size, number of colors, and display times for a variety of modem speeds. This information is helpful to gauge the success of your banner. Most designers like to keep the file size of a banner under 14K. We've squeaked in at just under 12K.

Step 7

There's one last step. We need to Export the animation. I know you've been saving your file all along, but the file is saved in Xara's XAR vector file format and we need the animation in the GIF file format. Press the Export Animated Gif button (j). Name your animation and press Save.

You're done. You've just created an animated banner, like the ones you see on every Web site you visit. Xara saves all of the frames in a single file with the GIF appended to the end of the file name. So if you exported your animation as "banner" your file will be banner.gif. Of course, you can change the graphics, colors, text, and so forth to suit your needs.

You can place your banner in NetObjects Fusion and add a link to any URL you wish. I do recommend that you also use the Alt comment in NetObjects Fusion when you add the link, to identify your banner with words in case a visitor to your site has graphics disabled or has an older (antique) browser.

I use Xara all of the time to create Web graphics like the animated banner in this tutorial. And Xara 2.0 works hand in glove with NetObjects Fusion, giving you the added power to create your own custom buttons, backgrounds, text headers, and more.

If you're new to Xara and found using this new application daunting, don't worry. This is normal with any new application. Once you get into the rhythm of Xara (or any other application for that matter), everything will become a lot more automatic.

Finally, if you have questions or need help with how to perform certain tasks in Xara, visit the Xara Conference. You'll probably receive an answer in less than a day, and you'll meet some very nice, and helpful Xara users.

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 or visit his web site. © 1999 Gary W. Priester