Flash AnimationFlash Animation
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
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.