Jens Nöckel's Homepage

Computer notes home

Creating Animations for Presentations and the web

Elsewhere on this web site, I discuss how to create presentations and embed movies in PDF files; one question that comes up in both contexts is: how do you create animated content? One can classify animations by the same two main categories that apply to images: bitmap versus vector graphics.

Bitmap movies

The easiest and most platform-independent way of delivering animations is probably still the GIF89 movie. Other formats that are quite common are .mpeg, .mov etc. GIF animations don't require a player plugin and are therefore especially popular for web pages. The downside is that GIFs don't rpovide a play button that lets you start, stop and repeat the movie at will.

The first thing one needs is a way to produce the individual frames as bitmap images. They should preferrably be of the same dimensions (although that isn't strictly necessary in all methods described below). It is a good idea to name the frame images sequentially so that they appear in your folder listing in the order in which they are to be incorporated into the movie.

Then, we have various options to create a movie:

Vector animations

Vector formats are especially practical when you're interested in objects that can be described efficiently using strokes, fills, gradients using only a few control points. The main formats for vector-based movies on the web are SWF (Flash) and SVG (Scalable Vector Graphics). If you have Adobe Illustrator, both of these file formats can be created quite easily. Here is an example I created by drawing a mere four shapes and telling Illustrator to calculate a blend between them:

With these interpolation capabilites, Illustrator is very useful for creating hand-drawn animations.

All you need to know is how to blend your key sketches together and make a movie sequence out of the intermediate steps: The Make Blend command in Illustrator creates a compound object that needs to be disassembled by choosing Expand from the Object menu. This creates a number of objects that may still have to be ungrouped, and each of these then represents one frame in your animation. The next step is to place all these objects into one otherwise empty layer, select that layer in the Layers palette, and choose Release to layers. This creates a sequence of new layers, one for each animation frame. Finally, choose File ⇒ Export for Web and select SWF as the file format. The option Layers to SWF makes the SWF into a movie.

The file size of the Flash animation above (8 kB) is still significantly smaller than even the reduced-size GIF movie shown below (36 kB):

Interactive vector animations

With Flash, one has a format that allows much more than movie playback. The Flash Player engine is used for internet games and user interfaces.

Here's a piece of art called "Don't Stick":

It was created using Flash and ActionScript 3 by my son James Nöckel (December 24, 2007). Try to keep the vehicle from touching the walls by steering with the arrow keys. If you manage to get to a double-digit score, you're a master.

There has been some controversy over Flash, partly over security concerns and partly because it is perceived as the medium responsible for most of today's web advertising nuisance. However, security concerns also exist with other, "newer" technolgies that are being incorporated into browsers, such as WebGL. Flash ads are annoying, but to dismiss Flash because of this would be a naive fallacy: any technology that can replace Flash will also eventually be used for advertising. Browsers can block Flash ads from sites you don't like, but are powerless against ads based on HTML5/CSS/JS animations. In the near future, we may well find ourselves longing for the good old days whan ads were confined to Flash objects.

The main valid objection to Flash is that it requires a plugin that can put additional load on the processor. This is true because all vector graphics, and especially Flash files, are more or less complex programs that must be executed by the plugin. The tradeoff between higher processor load and small file size for Flash objects means that bitmap animations may sometimes be preferable.


Jens Nöckel <noeckel@uoregon.edu>
Last modified: Sat Jan 26 22:42:46 PST 2013