How to Animate Your Web Site

Introduction

This page provides a step-by-step guide on how to create animations for your web pages. The page is of most use if you have The Complete Animator by Iota Software, but, even if you don't have it, this page may still be of use.

Create an Animation

Either create a new animation in the complete animator (see following section), or produce one in some other way. The Complete Animator is also well suited to previewing and editing animations created by other means.

Creating an Animation with The Complete Animator

To start with, just load the animator so that it's main window is open. It automatically creates a new animation. However, if you know the dimensions you want the final animation to have then you'll have to create a new one. On Acorn machines chose Create... from the icon bar, on PCs use File->New. This opens the window shown here. Choose the size and number of colours that you want for your animation, then click OK.


Draw the first frame. You may want to bear in mind that people with web browsers that don't support animated GIFs might see this frame as a still picture, so designing it so that it makes sense on its own may be a good idea. The Complete Animator provides several powerful drawing tools to help you design the frames your animation, I recommend experimenting with these to learn what they can do. The title animation at the top of this page was created almost entirely with just the text tool (see screen shot), apart from a bit of tidying up using copy and paste .


Once you have created the first frame; click the add frame button and Animator will add a blank, new frame following the current one. Continue adding and drawing frames in this way until you have a full animation.

The Complete Animator has many features to help you produce better animations, including:

Copy and Paste
These two tools are very useful for effects that would otherwise be impossible. By using the copy tool on one frame and then pasting the copied section to other frames in subtly different positions you can make things move without them changing shape and without having to redraw them. It is also useful If you decide to add something to all the frames, for example a logo in the top left corner of the animation could be copied and pasted onto other frames. If you want the same background on several frames the Edit menu provides Cut, Copy, and Paste options. So draw your background, copy the frame, then whenever you want a new frame use Paste from the Edit menu and the frame will appear with your original background!
Inbetweening and Ghosting
Inbetweening and Ghosting are powerful utilities. They display adjacent frames behind the one currently being edited. These adjacent frames are faded out, to make it easier to distinguish between them and the current frame. Inbetweening mode displays the previous frame and the next frame, whereas ghosting displays the previous two frames (see above picture). One of the many advantages of switching one of these functions on is that you can stop things 'jumping'. Ghosting can also be used to move things at a steady rate, in the title animation I positioned the words 'to Animate' by putting them down so that the right hand side of the 'o' I was pasting was just touching the left hand side of the hole in the 'o' from the frame before (see picture below).

When you have an animation you are happy with; save it in a form that can be converted to GIF, this depends on your machine (see below).

Make your animation work on the World Wide Web

To do this you need to make it into an animated gif, as this is generally supported by web browsers. An easy way to check if your browser supports animated GIFs is to look at the top of this page, if there's an animation there then your browser can do animated GIFs.

The Complete Animator cannot export animated GIFs (as they use a patented form of compression). However there is a non-commercial Public Domain program called InterGif for Acorn machines. PC users can use the shareware GIF Construction Set. Both of these programs' web sites explain how the programs can be used to make animated GIFs, users of InterGif can use Complete Animator films whereas PC users will need to export their animations from Animator as AVIs.

Put it on your page.

You can put it onto your page in just the same way as you would a normal gif, using all the same tags. in general:
<img src="location of the image relative to this page">
is sufficient, though you can use much more complex forms (as with normal images).
e.g. for the animation at the top of the page I used:
<img src="title.gif" width=320 height=192 alt="How to Animate Your Web Site" border=1>



Screen shots taken from Acorn version of The Complete Animator, though the text is applicable to all versions.


Top of page