Your Design Needs | All you need for creative work

All Free Design Resources

Flash Animation

51xrwbdj3gl_ss500_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 does 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 Flash 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 summaries 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 colors 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 Flash 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 Macro media’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 recognized 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 Shock wave animations, already developed for Web playback, even more compact and accessible by people with slow modems. Shock wave is still very much alive and well, and in many cases leaves Flash way behind in terms of visual quality, interactivity and multifunctional. There’s even a lively market for cartoons and games using Shock wave and its offline player Shock Machine. Unlike Flash, however, the Shock wave 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 Shock wave 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 alternativesLOGO DESIGN

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 Animation Design Training , 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 Cyber Spot. To all intents and purposes, a Cyber Spot 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 Cyber Spot 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 street map 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 recognized or not. With a widening range of design products now capable of exporting to Flash, including Illustrator and Free Hand, not to mention Live Motion, Flash is where the action’s at for the next couple of years at least, if not indefinitely.


April 10, 2009 - Posted by | flash animations | , , , , , , , , , , , ,

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: