Creating a Web Animation

You should consider three principals when using animation for your Web page. It must be simple, small and relate to the overall design/theme to be effective. Even if your animation doesn't load properly you should still be able to view the rest of the page. The other factor you need to consider is the down-loading time. Until the majority of users are connected to Telstra's ADSL or cable the file size of your Web page is critical so make the JPG or GIF files as small as possible.

A. Figure 1

1. Load the GS logo then click the "type" layer name to make it active. Right click then select "duplicate" from the drop down menu. Double click the duplicate layer name and in the layer properties dialogue menu insert "type 1" in the name box.

Repeat this step to create "type 2" layer. You should now have "type", "type 1" and "type 2" layers.

B. Figure 2 1. Make the "type 1" layer active". From the Image menu highlight Effects and select "mosaic-antique". 2. In the "grid setting" use 41 for both values. For the "mosaic settings" use 50 for the "glass curvature" and set the remaining values at zero. 3. With "type 2" layer active repeat step 2 with the "grid setting" values at 86 and use the same values for the "mosaic setting" in step 2. We need to create 3 separate graphic files for our animation. Turn off the visibility for both "type 1" and "type 2" layers so only the "type" with "circle" and "background" layers are showing. From the File menu click "save copy as" and select Compuserve Graphic Interchange gif file format. Name the new file GS. Repeat for "type 1" and "type 2" layers and name the new files GS1 and GS2 accordingly. From the File menu click "run animation shop".
C. Figure 3 1. Click the Animation Wizard button on the top tool bar in Animation Shop. Select, "same size". 2. Select, "opaque". 3. Select, "centre in the frame" and "with canvas color". 4. Select, yes for "repeat the animation". 5. Click "add images" and from the folder where you saved the GS.gif files, select GS.gif, GS1.gif and GS2.gif and then click finish. The 3 gif files will load and appear on the screen as a filmstrip.
D. Figure 4 1. Click the Run Animation button to view how the cells play in sequence and if the display time needs to be altered to give the desired effect. The display time is set at default 10. We need a longer pause between the GS cell and cells GS1 and GS2. 2. Click the GS cell to make it active. 3. Then right click and highlight "properties". Click "properties " to open the "display time" properties box. Change the value from 10 to 40. Once the animation is running as you want the next stage is to save the file in the smallest possible size without losing quality.
E. Figure 5 1. Highlight File and click "optimisation wizard" 2. The "animation quality versus output size" box enables you to choose the number of colours in relation to the file size. It's graded in 4 levels with 4 using the original colour palette. Set the slide 2 levels down then click "next". 3. The resulting file size will appear in the "optimized file" box. You can resize the file by clicking "back". Once you have fine-tuned the file optimisation, the animation will be saved as a gif.

Web page animation adds that extra degree of interest that hopefully will hold the visitor's attention (about 10 seconds) to read the rest of the page. If you have any questions about this month's tutorial or computer graphics in general then come along to our monthly Graphics SIG meeting held every 3rd Monday.

Reprinted from the November 2000 issue of PC Update, the magazine of Melbourne PC User Group, Australia