Animated conversation Developing decent web animations has been more like a climb up the Eiger than a walk in the park. However, the latest breed of software available has been built to capture the designer's imagination without killing off the muse. Alistair Dabbs goes through the motions.
Let's face it, the Web is a disappointment. It's that tiny little screen, the narrow bandwidth and the uncertainty that vast numbers of your audience might not be able to see what you want them to. Everything to do with Web design is about downsizing. And if it wasn't bad enough having to make all your static graphics 72dpi, any attempt at animation involves considerable cramming effort. What this means, at least until large screens and fast Internet connections become the norm, is you can't yet do much with video. You can stream QuickTime, but without a leased line connection it's terrible. Thankfully, you still have a range of choices when it comes to graphics animation. So, let's take a look at the main techniques, and their drawbacks, for getting your site animated today.
In the beginning
Back in 1994, the backroom boys in commercial Web development came up with an extremely basic form of animation by sending consecutive GIF images live to the browser. Advertisers had been using this method to change ad banners every 30 seconds or so without waiting for the user to refresh the page. By sending a sequence of frames on a constant basis, an elementary animation effect was possible. The drawback, of course, was that graphic data was constantly being downloaded over the line after the page itself had loaded.
On a 14.4K modem, this meant the browser was always flickering and the hard disk churning, and frames were usually interspersed with blanks as each subsequent frame loaded. Soon after, the animated GIF was born, effectively packing the GIF frame sequence into one file which downloaded once. The animated GIF has been a staple of ad banners and simple attention-grabbing effects ever since. Even sites which promote and showcase Flash and Shockwave interfaces still use animated GIFs because designers know that it's the one animation technology supported in every Web browser that lets you see graphics at all. The limitations of animated GIFs are well-known, but let's summarise them anyway. GIFs are bitmap images, so come at a fixed size regardless of browser window size.
They can reach quite exciting sizes if they include more than 10 frames or so, because compression is based on the number of different colours in each image. They also tend to appear in a jerky fashion during the download, leaving the user staring at a seemingly inexplicable sequence running at one frame every five seconds the first time round. More recently, designers have been able to produce basic path motion for static images using DHTML. Instead of running an animation in one fixed place, DHTML techniques let you take a single image and move it around over the top of your page as an independent, floating object. The nice thing about this approach is that the animation, for what it is, starts almost immediately and the movement is perfectly smooth, not being frame-based. The graphic can also have a transparent background just like any GIF. The big drawback is that it doesn't do anything else terribly interesting. As a result it can come across as just plain annoying or tacky. And it's not really animation.
All in a Flash
While the World Wide Web Consortium squandered most of the 1990s considering some proper animation technologies, Macromedia just went for it. The result was Flash, a system of playing back self-contained movies containing vector-based graphics and text within a Web page or independently running in a Web browser. The advantages of the Flash approach are considerable, and getting more compelling as time goes on. In the first instance, the vector nature of Flash movies allows you to include quite complex graphics and sequences in the confidence that they'll compress down to almost unfeasibly small file sizes.
In practically every test, from simple rollover type and button effects to complete sequences, you'll find that Flash files are smaller than animated GIFs and load up faster than Java actions. Vectors also mean that the movies can resize themselves automatically to fit the browser screen, anti-aliasing on the fly. Better still, Flash movies can incorporate events and react to user input, making it terrific for developing custom Web page interfaces which HTML couldn't hope to imitate. Not least, Flash can include embedded audio. And perhaps best of all from an experienced designer's point of view, the movies can be set to start running as soon as the download commences without waiting for it to complete. There are two principal drawbacks to the Flash format. First, it requires your audience to have a plug-in Flash player installed. However, to Macromedia's credit, the Flash plug-in is a relatively small and speedy download at just a couple of hundred kilobytes.
You should also be aware that Microsoft 3 intends dumping most of the plug-ins it currently ships with Internet Explorer in future - but Flash is the very notable exception. The second drawback might not concern you, but it's that Flash isn't actually a standard in the same way as HTML, GIF, JPG, PNG or something like Java. Flash is a 100 per cent proprietary format owned by Macromedia and licensed out to other graphics software developers on a commercial basis. In practice, of course, it doesn't matter that Flash isn't an officially recognised standard because well over 90 per cent of Internet users already have the plug-in installed: we're talking about hundreds of millions of people, ready to go with your animation content. Fun and sexy though Flash is, it's not a complete multimedia environment.
Originally, Flash arose from a project at Macromedia to make Shockwave animations, already developed for Web playback, even more compact and accessible by people with slow modems. Shockwave is still very much alive and well, and in many cases leaves Flash way behind in terms of visual quality, interactivity and multifunctionality. There's even a lively market for cartoons and games using Shockwave and its offline player ShockMachine. Unlike Flash, however, the Shockwave plug-in is a long download and requires a somewhat fiddly installation process which includes exiting your Web browser at one point. The big limitation of both Flash and Shockwave from a graphic artist's point of view is that the really clever interactive features depend on scripting. Or to choose another word, programming. If you're happy about scripting, indeed if you have some JavaScript experience, you'll find Flash is reasonably approachable; if not, you'll be limited to more conventional animation tasks.
Hot new alternatives
Inevitably, everyone is always on the hunt for a Web animation system that doesn't expect the audience to locate and install third-party plug-ins. These exist, but they do so with solutions that are even more proprietary than Flash, and usually protected by their creators with ridiculously extreme caution. One example of an alternative to Flash that doesn't require a plug-in is CyberSpot. To all intents and purposes, a CyberSpot sequence looks a bit like a basic Flash movie with audio but it loads up in an instant without any preliminaries.
The problem with it is that CyberSpot is marketed as a bespoke service by the company that developed it. You commission them to create a 30-second movie on your behalf, rather than create your own using standard software packages. As you can imagine, this is of limited use except as standalone ads. The hot technology everyone is talking about at the moment that could rival Flash at some point in the future is Scalable Vector Graphics, or SVG. It began life as a concept proposed by Adobe to the World Wide Web Consortium and, from the start, Adobe proposed SVG as an open standard in the hope that this will encourage its adoption.
The idea behind SVG is to provide the Web with a vector graphics standard in the same way that GIF, JPG and PNG are bitmap standards. But more than this, it supports animation and user interactivity. And further, it is navigable with pan and zoom functions. This means you could use SVG in a number of different ways to suit the desired result, whether that be a detailed diagram you can zoom into without losing definition (a streetmap is a classic example), Web page interface elements or an interactive animated movie.
SVG supports visual filter effects applied in real time rather than just being frames, and can include audio. One of the reasons so many people are getting interested in SVG is that it is based on XML, which is generally regarded as the next step in Web functionality. XML support in a dynamic vector graphic or animation can link it intelligently to all kinds of data, which in turn could radically alter the way Web content is delivered. As ever, there are drawbacks. One is that SVG, though accepted as an official standard, still requires a plug-in for your browser to display. Although Adobe hopes that one day, SVG support will be built into all browsers, for the immediate future it involves a download of well over 2Mb.
Another limitation is that precious few graphics packages can yet export to SVG other than Adobe Illustrator 9 and Photoshop 6. And this leads to the biggest drawback of all: not many people are using SVG yet and most Web users have never heard of it. All this certainly lends credence to Macromedia's claim that Flash is the real Web animation standard, officially recognised or not. With a widening range of design products now capable of exporting to Flash, including Illustrator and FreeHand, not to mention LiveMotion, Flash is where the action's at for the next couple of years at least, if not indefinitely.
