by Gary W. Priester

There are dozens of Web animation applications that can create animations. What sets Xara 2 apart, however, is Xara's full complement of drawing tools and awesome fountain (gradient) transparency capabilities. In this article, I'll show you how to create an animated banner that replaces one message with another with a sophisticated fade/wipe accomplished with Xara's Linear Transparency. While this example can be placed on your Web page to convey holiday spirit, the techniques can be used for any number of commercial projects as well.
November 16, 1999

To begin, let's configure Xara 2 for Web design work. Click on an empty section of the screen with the right mouse button and select Page Options from the pop up menu. In the Units tab, set the Units to Pixels and the Color Units to 0-255. Select the Grid and Ruler tab and set the Major Spacing to 100pix (key it in exactly like this) and the Number of Subdivisions to 10. Click OK to close the Page Options dialog.

Click the screen again with the right mouse button and select Snap To Grid.

Tip: You can save these settings as a Template so you don't have to go through this drill every time you want to create Web graphics. Configure a blank page with the settings detailed above, then select File > Save Template. Name your template (I call mine Web Graphics), and save it. Do not select the Use as Default Template option. To use your new template, select File > New… and select your template from the list of templates. If there are special items you use all the time, logos, colors, etc., save them with your template as well.

Using the Rectangle Tool, draw two rectangles 440 pixels wide by 80 pixels tall. Enabling Snap to Grid will make this easier and ensure your rectangles are in even pixels. Set the outline weight to None. Using the Text Tool, key in Merry Christmas (or a holiday of your choice), on one of the rectangles and Happy New Year! (or a holiday of your choice), on the other. The fonts I have used are Shelly Volante Script and Poster Black. If you do not have these fonts, use something similar. Scale the text to fit as shown in Figure 1.

Select the top rectangle and apply a solid green fill. Select the text, then select the Fill Tool, and apply a Linear fill using pale yellow and gold as shown in Figure 2. (Select Linear from the Fill Type drop down list on the Infobar. Drag the directional fill path arrow as shown. Click on either end node, then click a color on the screen palette to add a color to the fill).

Select the second rectangle and apply a solid fill using a color that looks like butterscotch (golden yellow). Select the Fill Tool, then select Fractal Plasma from the Fill Type drop down list on the Infobar. Resize the fill as shown in Figure 3 by holding down the Ctrl key and dragging one of the small squares at either end of the fill path arrows. Rotate the fill as shown to minimize repetition in the fill pattern. From the Fill Effect drop down list, select Alt Rainbow to make the fill more festive. Apply a red violet colored fill to the text, make a duplicate of the text (Ctrl K), apply a white fill and move the white text up and right as shown.

From Banners to Bitmaps

In this step we'll convert the vector art into bitmap. Marquee select the elements from the first rectangle (Merry Christmas - or your holiday of choice). To marquee select an object, or objects, use the Selector Tool (the arrow cursor) and drag a rectangle around the objects. With the objects selected, right click on the objects and select Create Bitmap Copy from the pop up menu. You can also select this from the bottom of the Arrange pull down menu. This brings up the Create Bitmap Options dialog shown in Figure 4. Leave the color depth at 24-bit. Click the Bitmap Size tab and make sure the resolution is set to 96 dpi. Click Create A to close the dialog and create the bitmap copy. You can leave the second group of objects (Happy New Year-or your holiday of choice) as they are but you will want to group them (Ctrl G).

A lady in Sandusky, Ohio wants to know why we need to make the bitmap copy when we have the original objects? Well, when we apply transparency, which we will be doing in a few moments, we want to have only one object. This will be more apparent in a few moments so please bear with me.

Select the bitmap and bring it to the front (Ctrl F). Center align it directly over the Happy New Year group of objects. (Arrange > Alignment).

Tip: With the group of objects and the bitmap selected, and the Object Alignment menu open, click in the center of the preview window to specify center vertical and horizontal alignment. The proxy objects in the preview window will graphically depict the effect of the alignment. Click in other corners to see how quick and intuitive this method is.

We want to apply transparency in several steps. To make this easier we can add equal-spaced lines to guide the process. Make a vertical line using the Pen Tool. Click the first anchor point for the bottom of the line. Now click the top anchor point and the line will be placed between these two points.

Tip: Xara does not support the use of a constrain key when drawing horizontal, vertical, or angled lines. But it does after the line has been drawn. With the Pen Tool still selected, hold down the Ctrl key and drag the top control point upwards (on in any other direction) with the Pen Tool cursor and the line will constrain the values set in the Page Options menu.

Resize the line to about a half inch in height and align it below, and to the left of the rectangle. Make a duplicate of the line (Ctrl K) and align it to the right side of the rectangle. Now select the Blend Tool and drag the cursor from one line to the other. When you release the Blend Tool cursor you will have a 5-step blend. Change the number of Blend Steps on the Infobar to 6 and press Enter to apply the change as seen in Figure 5.

Note: There are two keyboard shortcuts used to duplicate an object in Xara 2: Ctrl D and Ctrl K. By default Ctrl D will create a duplicate and offset the duplicate to the distances specified in the Page Options dialog. Ctrl K, also known as Clone, is used to place a copy directly on top of the original objects. A third method of duplicating an object or group of objects is to drag the object(s) and press the right mouse button before releasing the left mouse button. This last method is known as drag and duplicate.

Animating the Message

Select the group, the bitmap, and the blend, and copy them to the clipboard (Ctrl C). Click the New Animation button on the Infobar or select New > Animation from the File menu. Paste the objects into the animation window (Ctrl V).

Note: Just as there are two keyboard shortcuts for duplicating an object, there are two keyboard shortcuts for pasting an object from the clipboard. Ctrl V pastes the contents of the clipboard in the center of the screen. Shift Ctrl V pastes the objects in the same position from which they were copied.

Press the Copy Frame button 7 times to make 7 copies of the current frame and its contents (for a total of 8 frames). Nothing will appear to have changed but the Next Frame and Previous Frame buttons will be enabled. Press the Previous Frame button until you come to the first frame. Press the Next Frame button to go to frame 2.

Select the bitmap image, then select the Transparency Tool (the wine glass icon), and select Linear from the Transparency Shapes drop down list on the Infobar. Drag the fill path arrow as shown in Figure 6 so that the start and end points of the path align with the first two lines in the blend. Press Ctrl C to copy the bitmap.

Press the Next Frame button to go to frame 3. Select the bitmap and press Shift Ctrl A (Paste Attributes). This pastes the same transparency as used in the previous frame onto the bitmap. With the bitmap still selected, select the Transparency Tool and extend the fill path to the next set of lines as show in Figure 7. Copy the bitmap, press the Next Frame button, Paste Attributes (Shift Ctrl A) and advance the fill path arrows to the next set of lines. Repeat this until you reach the last frame. Delete the bitmap (the Delete key) leaving the Happy New Year group of objects. You now have all the frames for the animation. Select the blended lines and delete them. Press the Previous Frame button, to move to the previous frame, and delete the lines. Continue until you have reached the first frame and all the lines have been deleted. Name and Save your animation.

Note: The animation exists in its own page. The elements we created for the animation are on another page. It is important to save both pages.

Previewing and Editing the Animation

There are two ways to preview your animation in real time before actually creating the animation file: Preview All Frames and Preview Animation in Browser. The former is accomplished by pressing the Preview All Frames button, shown in Figure 8. This opens the Preview All Frames dialog, which is in reality, an animation player that plays your animation in total, or frame by frame. The second preview method is accomplished when you press the Preview Animation in Browser button shown in Figure 9. This launches your browser and not only shows you how the animation will appear in real time and in your browser, it also presents a useful chart including file size, color depth, image size, and a list of download times for a variety of browsers. As most Web surfers have modems in the 33-57.6k range, a download time of 12.2 to 7.1 seconds is not an unreasonable amount of time. This is providing the rest of your page is reasonably fast loading.

The Animation Properties button launches the Animation Properties dialog shown in Figure 10 and Figure 11. There are four tabbed sections that give us additional control over the final animation. In Figure 10, we see the Animation Colors tabbed section. This section lets us determine the best use of colors in relation to ultimate file size. The Global Browser Palette option is the safest choice for creating an image that will be viewed in any browser on any computer platform. When used with the Error Diffusion dithering option, however, the result is a rather large file size of 80k and a loading time of 11 to 19 seconds. Nice thought or no, your visitor will probably be gone by the time the animation has loaded. Selecting None for the dithering option greatly reduces the files size-37.5k-and greatly shortens the download time-6-9 seconds. The tradeoff is quality. The smooth gradation on the gold script letters becomes grainy and inelegant.

The Global Optimized Palette option when used with 32 colors and Error Diffusion, as seen in Figure 10, produces a clean animation but with a file size that could be lower. Raising the number of colors to 64 and selecting None for the dithering option, produces the best of all worlds, a clean image, a file size of 36K, and an average download time of 5-9 seconds.

Note: The difference between Browser Palette and Optimized Palette is this: the Browser palette uses a fixed palette of the 216 web-safe, non-dithering colors and will display consistently on all browsers and all computer platforms. Because of the limited number of colors, however, the image is often dithered or grainy. An Optimized palette uses between a handful and up to 256 of the best possible colors to create the image/animation. So it is not uncommon that with a limited palette of 32 or 64 colors, one can often come up with a very clean looking image/animation and a manageable file size. On older computers with monitors limited to a fixed palette of 256 colors, however, the results may be less than attractive. Given the fact that most people have computers and graphics cards capable of displaying between 60,000 and 16 million colors, this is not as much of a consideration as it once was.

Now that we've squared away our palette, there are a few more improvements we can make to the animation. As it stands now, the animation plays non-stop with each of the frames displaying for 1/10th of a second (10 1/100s), the default display time per frame. It should be noted that the actual display time per frame will vary according to the speed of your visitor's computer, the amount of RAM on your visitor's computer, the amount of traffic on the Internet at the time the animation is being viewed, and several more related events. If we select the Frame tab in the Animation Properties dialog, shown in Figure 11, we can adjust the time that each frame is displayed. Press the Previous Frame button on the Infobar until you reach frame 1. Change the Display This Frame For: setting to 100 and press Apply. Press the Next Frame button on the Infobar until you reach the last frame, and change the time to 200 and press Apply. This adds a pause to the first and last frames and imparts a tiny bit of drama to the animation.

Important: Any changes that are made in the Animation Properties dialog will only take effect if the Apply button is pressed before exiting the dialog. Otherwise the changes are not made. So be sure to always apply each and every change as you make it.

And here is the final animation:



Variations on this theme include using Xara's Circular Transparency or Conical Transparency. And of course you don't have to restrict this technique to holidays.

If you have any questions or comments, you can e-mail me at themook@slip.net I'm always keen on a little animated discussion. If you are not a Xara owner, but I have piqued your curiosity, visit the XaraXone at http://xaraxone.i-us.com or visit Xara's home page at http://www.xara.com. Unfortunately, Xara is a Windows-only application.

More articles from Gary W. Priester

Creating Image Maps with Corel Xara 2

Creating Tiling Background Images with Corel Xara 2

Optimizing Images for the Web with Corel Xara 2