Animations in web pages

Animations are a very useful resource for the web designer. But, also, they are the most evident sign of bad taste in many, many pages. There is nothing worse than to punish the visitor with a pile of ugly animations that little (or nothing) contribute to the contents. If we use them selectively, the animations can solve many necessities, but let’s not use them mindlessly.

There are two main systems to incorporate animations in web pages: animated GIFs (the simpler and more extended solution) and Flash movies. There are some other formats for multimedia, and animation workarounds, but they are not used as extensively as these two.

Animating with GIF

An animated GIF consists, simply, in a series of images, inside a file in the GIF format, of course. Those images are stacked for sequential display they are shown in screen during a certain time interval; each photogram or frame may have its own settings. When finishing the series of frames, the animation can restart (loop) a certain number of times, or indefinitely. Pretty simple.

With this format, admitted by any browser program, the main advantage is a fast download, selective use of transparency... but we also find the limitation of a fixed number of colors in each frame (up to 256). And being a bitmap format, if the animation is very big, the size of the resulting file can be excessive. This means an animated GIF would not be practical for a long animation using photographies or sophisticated effects. Another evident shortcoming is the lack of sound or any possibility of user interaction in the GIF animations.

Tricks for GIF animations

An animated GIF can be prepared with a dedicated program (GIF Construction Set, Ulead GIF Animator, Animagic,etc.; there is no shortage of solutions) our you can export animations from other more generic graphics programs, such as Xara, Fireworks, Imageready... To create the animated GIF implies a previous preparation, even more important than the production of the frames. We must consider which parts of the object move and which stay fixed, and draw the minimum number of frames so that the animation is compact but convincing. See some japanese anime to understand this: how to use the minimum drawings! In the case of gif animations, however, most of them are something else, not exactly movie-like. Animated GIFs are widely used for banners (the advertising of many web pages.) It is a way to display more information in the same limited area of the screen. We can link, for example, a series of slogans one after another one, so that they appear gradually.

This picture shows the main controls in a typical program to edit and build GIF animations.

With any of the applications mentioned earlier, creating an animation is rather simple. The individual images for each frame must be prepared first. The invariable parts can be copied from a frame to the the next one; the time for each frame is indicated, normally in milliseconds, and it is decided if all the animation will be looped, a finite number of times or indefinitely. The final file size of the GIF can be considerable if there are many images, with many different colours and complex forms. In order to reduce this file size, you can try to apply a common colour palette, a shared colour list to all the series of single images. The example that we show above, is an animated example of GIF which takes advantage of the possibilities of the format: our funny gossipmonger is only a 5k file.

Flash

A limitation shared by GIF, JPEG and PNG is being bitmap files, with a fixed resolution. It is not possible to change the dimensions of the image within the browser, and if we do it, inevitably we lose some quality: jagged borders (pixelation) appears. The solution in this case would be to use a vectorial format, but the navigators haven’t supported vector formats natively so far. Different proposals have been tried, among them a very interesting one from Xara (the .WEB format), but most have failed. Without a practical, official standard, a format has spread like gunpowder and it has prevailed: Flash.

If you want to include images in which it is possible to be zoom in and out to see the details, include interactivity (pull-down menus, links...) and sound, you consider the Flash format (or Shockwave Flash). With any modern browser there is no problem, since they often incorporate the necessary plugin, which, anyway, is free: you can download it very quickly from the Macromedia Website (http://www.macromedia.com). Certainly, Flash is more than a vector format, and even more than an animation format: it is used for interactive animations, and it has incorporated very advanced scripting capabilities, which introduce randomizing effects, database connections, and many more sophisticated features. But you can still use it for a basic film with frame-by-frame animation or simple tweening animations (our examples are rather in this last category.)

Flash has become the de facto standard for vectorial graphics, but there is an emerging format, recommended by the W3 Consortium, the SVG (Scalable vector graphics). The SVG graphics seems to have a bright future: read more about SVG in our detailed article.

Flash movies can be generated with a rather different method from that of GIF animations. Although Flash is not indeed an example of an easy to learn program, in some aspects, due its vectorial objects handling, creating certain kinds of animation is a simple task. For example, the effects of changes in luminosity and movement, or changes that affect a single object are simplicity itself in Flash. In order to create static images, or to prepare the base images for the animation, it is also possible to use Freehand or Illustrator. The option to choose is file|export... then selecting shockwave flash (swf).

One of the bigger advantages of Flash is its handling of symbols: a symbol is an object of the animation; once defined, it will be stored in the panel of symbols of the program, and we can use as many copies of it as we wish, altering its colour, size, visibility, distorting it, blending with others... without an increase in the file size, since the program looks for the information to generate the object in a single, central definition, the one in the symbol library.

Flash, from Macromedia, is a somewhat complex program, which allows to create interactive animations in a specific format, with the SWF. Its handling of vectorial graphics means the objects may be resized with no quality loss; it’s also possible to interpolate between tho shapes, and other effects. And yet the files are compact, well suited to internet traffic.For example, visiting the Macromedia page, we’ll see a quite typical example of what is possible to do with Flash. The top navigation bar, with nice effects and submenus (again with some special visual effects) that appear when we mouse ove the main tabs, is a Flash movie.

Using Flash

Given the special characteristics of Flash, it’s probably overkill if you only have to create a small animated banner; you should invest a lot of time learning how to use the program. Anyway, the program has a good help system, and it’s not that complicated aftef the first miles of its steep learning curve. For some kinds of effects, Flash is the solution, faster and more convenient than an animated gif. Let’s see some examples:

Animations with lots of movement of a few symbols: for example, the example show here. Flash solves this apparently complex animation with amazing simplicity, quality and with a very small file size. The example you can see here is a mere 5K file, a fraction of the size of an equivalent animated frame-by-frame gif. Even better, creating this kind of animation is very easy in Flash; trying to do it image by image would be nearly impossible, a very complicated and labour-intensive work.
Bigger animations. The screen size of a Flash movie isn’t really important (unless bitmaps are included in the movie): this means you can create large or full-screen animations and still get away with a small file size. Again, an animated gif would’t be a viable solution in this case.
For logotypes displayed as an animation, starting from a diffuse shape; this effect can be as complex as you want and the final SWF file is really small.
To display a zoomable image, where the user can enlarge any detail. A very good solution for maps, vectorial image catalogues, font specimens...
Of course, the most advanced uses, like those in some fancy websites, probably will involve scripting and other development techniques — definitely not for newcomers to Flash. But for eye-catching presentations, Flash is unique, and probably the only realist alternative these days.

Remember that Flash needs a specific plugin to play the movies back. Remember that a plugin is an additional component for certain applications (you can learn more about plugins in a separate article of the manual.) For an individual user, this means that if the plugin isn’t installed, he will be prompted to download and install it, but it may be a serious handicap for intranets and other networks where the users cannot install software or change settings. The Flash plugin is a very modest download, which takes only seconds and once set up, it will detect if there’s a new version available; in this case, again, the user would get a message telling that he can install an update.