An Introduction to Animated Graphics

1. Introduction

This document will introduce you to animated graphics - what they are, where they are used, how you can use them, what software is available, and which file formats are used for what.

The scope of this document covers animated graphics produced using computers and delivered primarily on the Web (including intranets and VLEs) or in presentation software. It does not cover computer games, delivery via film, TV, DVD or video.

2. What are animated graphics?

Animated graphics are essentially a series of still images displayed in quick succession, giving apparent movement to otherwise inanimate objects and images.

The term 'animation' has come to be most commonly associated with animated films, from cartoons such as Tom and Jerry and stop-motion animation such as Wallace and Gromit, to full-blown computer-generated animations like Toy Story.

Whilst such sophisticated examples are beyond the scope of this document, it is worth noting that all types of animation, regardless of their complexity, are based on the same fundamental technique: putting together successive still images to produce the effect of motion. So for the purposes of this document, the terms 'animation' and 'animated graphics' are interchangeable.

Our definition of animated graphics also includes interactive two- and three-dimensional immersive technologies, such as QuickTime VR, VRML and x3D.

What our definition does not cover is film and video 'motion pictures' - i.e. real-time footage captured on film, tape or digital video cameras. Further information on this type of media is available from the British Universities Film and Video Council (BUFVC).

If you are unfamiliar with JISC standards, the Standards and Guidelines to Build a National Resource (PDF, February 2001) provides "guidelines and practices critical to developing, managing, and delivering digital resources online".

The JISC Standards Catalogue, developed to support the Digital Repositories Programme, also provides a useful summary of some relevant standards.

3. Animated ubiquity

Animated movies and television cartoons have been around for decades, but it is only in recent years that animated graphics have become commonplace in other areas.

Perhaps not surprisingly this has coincided with the digital revolution, and animation has made its mark all over the Internet (advertising, logos and icons, avatars and 'emoticons', online tutorials and VLEs, email, online games and cartoons), as well as in desktop software, mobile phones and PDAs, computer games and virtual reality environments, CAD, simulation and visualisation.

This ubiquity has been accelerated by the ready availability of affordable user-friendly software, smaller file sizes, and faster network connections. The fact that animation is the first choice for online advertising has also played its part.

Producing animated graphics used to be limited to highly-skilled professional animators, and of course at the professional level (film-makers, designers), it is still a highly-skilled craft. However, just as handheld camcorders and free software have brought movie-making and video production to the masses, so readily available animation software has given everyone the means to create animated graphics. It is now possible for anyone with a little imagination and some cheap software to produce basic animated graphics for a Web site or an onscreen presentation (e.g. PowerPoint).

4. File formats

There are a number of different file formats for animation, each suited for particular results. Here we will look at the most common formats and highlight the main features, uses, pros and cons for each one.

4.1 Animated GIF

Perhaps the simplest type of animation to get to grips with from a novice's point of view, animated GIFs have been around for a relatively long time.

Before the current dominance of Flash, animated GIFs were the most common way of displaying animated graphics on the Web and they are still widely used. An example of the type of animation that can be produced using the animated GIF format can be found at: http://www.tasi.ac.uk/advice/using/tl_raster2.html

Main features, uses, pros and cons of Animated GIFs

Animated GIF software

Plenty of affordable software is available. Shareware (free or trial versions) can be found at Download.com or Tucows.com. Other popular GIF animators include:

4.2 Flash

The industry standard animation software, Flash can be used for everything from simple 2D animations to interactive 'rich content' Web sites, video, and mobile device content. An example of a simple 'interactive' Flash movie can be found at: http://www.tasi.ac.uk/advice/using/images_education.html

Main features, uses, pros and cons of Flash

Flash Software

Macromedia Flash, currently Flash 8 available in Basic and Professional versions, is the main authoring tool.

There are a number of third party applications that can create Flash animations, or export to the Flash format. Some of these concentrate on specific areas e.g. animated Web menus, Flash Web templates, simple animations. Shareware (free or trial versions) can be found at Download.com or Tucows.com.

4.3 SVG

Scalable Vector Graphics, a non-proprietary open standard based on XML. SVG is widely seen as the open source equivalent to Flash, but browser support is still patchy. Those browsers that do support SVG require an SVG viewer plug-in, such as Adobe SVG Viewer.

Even with the plug-in installed, not all features are supported depending on the platform/browser/plug-in combination. This means SVG is not being exploited to its full potential on the Web in comparison to Flash. Currently it is more widely used and supported, as SVG Tiny and SVG Basic, to create animated and interactive content for mobile devices.

Freelancer India guide to Vector drawing software for details of SVG authoring programs.

Freelancer India Vector graphics resources has links to other useful SVG resources and examples of SVG in use.

4.4 QuickTime VR

QuickTime VR (QTVR) is used for 360° panoramic shots that users can navigate around, and 'object movies' where users can view photos of 3D objects from all angles. QTVR can be classed as an animated format, as files are produced by 'stitching' together a series of still images. The free QuickTime Player browser plug-in is required to view QTVR files.

QTVR Panoramas

The still images used to produce QTVR files are usually photographs, and it is possible to create a basic panorama using any digital camera and a simple image editing program. However, for more professional results you will need to invest in some specialist software and hardware, e.g. a sturdy tripod preferably incorporating a spirit level, and a panoramic tripod head with a calibrated disk allowing you to shoot the panorama in equal sections. A wide angle lens is also useful as it means you will need to take less shots to create the panorama. A nondistorting 'rectilinear' lens will also help.

A list of manufacturers of QTVR software and related hardware is available from the Apple QuickTime Tools page.

QTVR panoramas can be relatively simple panoramic images which allow the user to pan from left to right and back again, either within a fixed angle or around a full 360°.

More complex panoramas make it possible to tilt vertically 180° up and down, giving users more of a sense of being in the middle of the scene. It is also possible to include audio in QTVR files, which gives you the option to provide commentary, background music or sound effects to a scene.

Additionally, QTVR can be used to display 'multinode panoramas', which include hotspots that link to further panoramas or object movies. These allow users to click on one part of the image to take them to another scene - useful for providing a virtual navigation around a building. Hotspots can also be used as hyperlinks to any URL.

A large number of QTVR panoramas can be seen on the panoramas.dk site.

QTVR Object Movies

Like panoramas, object movies can be relatively straightforward to produce. The type of software used for creating panoramas usually allows you to make object movies too. By stitching together a few shots of the object in question, a very basic 'single-row' object movie can be produced. A single-row movie is one showing the object on one horizontal plane.

If you want your object movies to look more professional, specialist equipment is required: the main piece of kit you'll need is a turntable to place the object on. In addition, if you intend to make a 'multi-row' object movie, where users can view the object from all angles, you will need a rig to move the camera vertically over the object. See Apple's list of manufacturers of QTVR software and related hardware.

Pennsylvania State University's Meteorology Department has a few examples of some simple object movies, as well as some panoramas.

Photographer Scott Highton's site includes "one of the world's largest man-made QTVR object movies" of San Francisco's Golden Gate Bridge.

Further information on the QTVR format is available on the Apple QuickTime VR page.

Apple also have a comprehensive developer's guide to QTVR. As well as containing some helpful illustrations, the guide includes useful tips on the equipment and planning required for preparing, shooting and creating panoramas and object movies. The guide is available in HTML and PDF format.

4.5 VRML/X3D

Taking QuickTime VR's panoramas a step further, VRML (Virtual Reality Modelling Language) and X3D (Extensible 3D) allow users to explore 3D scenes and animations via the Web.

X3D is the 'enhanced successor' to VRML, but VRML (or more accurately VRML97) and many VRML tools remain in use. Both are non-proprietary open standard formats that are used to display interactive immersive environments that let users 'walk' or 'fly' through virtual worlds (albeit in front of their computer screen - no fancy headgear required, though the minimum system requirements will stretch older computers).

The user can navigate and control their viewpoint and movement within the scene with tools such as zoom, pan, tilt and rotate. Both VRML and X3D require users to install a free browser plug-in such as Cortona (VRML) or Octaga (VRML/X3D).

Software for creating VRML and X3D files is readily available, but the learning curve for producing such graphics is steep. A useful list of links to authoring tools (some open source and free) and other 3D player plug-ins is available on the Web3D Consortium site: VRML, X3D.

Some examples of virtual reality environments:

XML.com has a useful article on the X3D format, Extensible 3D: XML Meets VRML.

The VRML Plugin and Browser Detector includes a chart identifying which VRML/X3D plug-ins work with which browsers on which platforms.

4.6 Acrobat 3D

At the time of writing Adobe has just released Acrobat 3D.

Interactive 3D content created using Adobe 3D or converted from other CAD applications can be embedded in a PDF file and accessed by anyone with the latest version (7 or later) of the free Adobe Reader.

Examples of 3D content within a PDF can be viewed here: http://www.bentley.com/en-US/Products
/MicroStation/Interactive+3D+PDF.htm

Adobe Reader is available from: http://www.adobe.com/products/acrobat/readstep2.html

4.7 Other software for creating animated graphics

Although aimed at the home movie making market, both Windows Movie Maker (free with Windows XP) and Apple iMovie (free with Mac OS X) can also be used to combine video and/or still images together to create stop-frame animations.

5. Accessibility and usability

With all animated graphics, whatever the format, it is important to make them as useful and usable to your users as possible.

Web accessibility specialists WebAIM have further advice on making animated images more accessible.

6. Further resources