Kaye and Geoff's web page documentation 

Introduction

Animated pictures can be created for a web page in a variety of ways:
  • Server push - using a server-side CGI
  • Client pull - using meta tags to continuously refresh the page
  • Special programming tools such as Flash and Shockwave
  • Video/movie sequences displayed by QuickTime or a similar multimedia plugin
  • Javascript
  • SVG combined with SMIL (Synchronized Media Integration Language)
  • Animated GIFs
In most cases you will need to create multiple images which will be displayed in sequence to give the appearance of movement, just as in the movies. The first two methods were used in the early days of the web but are inflexible and not often used now. Shockwave involves using specialist proprietary software and also requires that the browser has the appropriate plugin, or that it has the intrinsic ability to play Shockwave files. Much the same applies to Quicktime. Follow their links if you want more information on these products and how to use them.

Javascript is a web-friendly programming language which is often used for relatively complex animation, for example our web-based kids games, but it is not easy to master without a background in computer programming. If this is what you want to try then you can look at the code for the games, and also check out the froggy technical notes or the Javascript documentation to see what you are getting yourself into. Good luck!

Scalable vector graphics includes mechanisms for animation and can be combined with Javascript for more complex effects. However, despite being a standards-supported format, SVG has only been incompletely incorporated into the recent versions of the common browsers, or requires a plug-in, so if you are aiming for a wide target audience this is still not a reliable way to present animations.

The easiest way to create a simple animated picture is as an animated GIF. This requires no knowledge of programming and the animation is self-contained in a single file which all browsers can display without requiring any plugin. Utility software is available to help you put your animation together, which makes the process relatively straight-forward. If you do not want to make your own there are sites on the net from which you can download animated GIFs made by others - see the graphics documentation for links.

Please reflect carefully before adding animation to your web pages. They can take a long to download, since lots of frames means big file sizes. If you make people wait too long before the image displays then they may well give up and go looking for something more immediate.

Furthermore, lots of things wizzing and moving can be very, very irritating and extremely off-putting to people viewing your pages. Animations catch the eye, drawing attention to themselves, so if the animation isn't highlighting or indicating the most important part of your page, then the page may be better without it. You should look at limiting the number of loops the animation goes through, so that it only plays a few times before becoming a static image. You should also think very carefully before putting more than one animation on a page. Often just a minimum of movement which the user "discovers" is more effective and much less intrusive that something which flashes ten different colours at one second intervals. For example compare this friendly frog (from our froggy game page)
with this more colourful but truly awful example [move your mouse over it to stop it].

A garish animation may draw the viewer's attention to your message, but their feeling about it is most likely to be annoyance (or even possibly an epileptic fit, as has happened with some TV advertisements) - not what you want. Also, it can be difficult to concentrate on and read text close to intrusive flashing images.

Multi-image GIFs

Multi-image GIF animation allows you to create a single GIF file with mutiple images. The individual images can have their display timing and method of overlay specified within the GIF, and the animation can loop once, a specified number of times, or indefinitely. This gives a lot of flexibility to the animation. Animated GIFs require no plugins or programming, and are supported by all browsers. There are a number of graphics programs that will allow you to build animated GIFs, and including them in your web pages is no different from including any other non-animated picture.

How is it done?

  1. You still need to create all the different individual GIFs (not JPGs) - for example:

         

    They must all be identical in size (ie. in the number of pixels in both the vertical and horizontal directions). Sometimes we start with a base picture, then copy that as many times as we need to produce the right number of frames, and then modify each picture to be the next step in a series. In this way we always have identical static bits of the picture, with the same colour palette.

  2. You need a utility to create a GIF89A image which incorporates all the single GIF images into a multi-image GIF. We have no experience of this on the PC, but have used GifBuilder under OS9 on the Mac. You can pick up suitable software from The Toolbox section of the Gif animation on the WWW pages or try GIFfun. Most of the programs are easy to use and allow you to preview your work as well as set all the animation parameters.

  3. Load your composite GIF up to your server, and invoke it from your html page using a standard image tag; for example: <img src="world.gif" border="0">
The result of the example above (set to 1/10th second delay on each frame and continuous looping) is:

Note that a very limited number of frames can still give the impression of reasonably smooth movement, although this animation would be improved with a few more intermediate frames.

More information
Top
Previous
Next
Index
Home