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. I'll talk about other formats later. GIF animations are frame based, so the first thing one needs, of course, 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 the method described below). Assuming you have the images, they should be named 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:

• ImageMagick

  ImageMagick is practically a platform-independent tool, because you can get it for Mac, Windows and UNIX. Use the convert command to create a single GIF image. Input files can be, e.g.: PNG, JPG, GIF, BMP, or any other that the program can import. An example command with PNG input would be

  convert -set delay 3 -colorspace GRAY -colors 16 -dispose 1 -loop 0 -scale 50% *.png Output.gif
  

  (delay 3 is the shortest inter-frame delay possible). On a Mac, you can get ImageMagick for X11 from fink. See also my general installation instructions.

  Instead of creating a gif movie, mpeg encoding can also be done by simply calling convert -quality 100 *.png Outputfile.mpeg

• iMovie HD On the Mac, we of course also have iMovie HD, and dragging a group of images onto the timeline may be the most convenient way of making a move that can then be exported in various formats via the Share menu. One limitation is that the minimum frame duration by default is .03 seconds which may be too slow sometimes. Fortunately, there is a work-around that allows to go down to 0.01 second duration.
• GraphicConverter

  There are two simple ways of creating animations with GraphicConverter, the powerful graphics editor that used to be bundled with OS X and is now shareware.

  1. Choose File ⇒ Convert&Modify .... Follow the instructions in Chapter 9 of the GC Help document, to end up with an animated GIF.
  2. Choose File ⇒ Export Slide Show to Movie .... You'll have to navigate to the folder containing the images. After choosing some settings, GraphicConverter will create a file with the extension .mov. This file format is suitable for inclusion in Keynote, for example.
• Other routes

  Here are some other alternatives for creating bitmap-based frame animations:

  1. To create a gif movie from an image sequence, there is also the free utility GIFFun.
  2. GIF movies can be created, viewed and manipulated with gifsicle, too.
  3. Use the command-line tool ffmpeg, which can handle almost any conversion task imaginable. I actually have ffmpeg installed from fink, and use it from the command line. Some examples:
     • To convert a movie to a GIF animation:
       ffmpeg -i file.mov -pix_fmt rgb24 -s qcif -loop_output 0 output.gif
       The option -s qcif could be omitted, it sets a small output size. A -loop_output 0 parameter causes infinite looping.
     • To convert an image sequence to a movie, first make sure the images are strcitly named in a consequtively increasing numerical order, starting with 1 (for example, a1.jpg, a2.jpg etc.); then do, e.g., ffmpeg -f image2 -i a%d.jpg b.mp4. The numerical part of the files has to start at 1. If you need multiple digits, say 001 and so on, then replace %d by %03d. To maintain the exact quality of the input images, do ffmpeg -sameq -i %03d.jpg output.mp4.
     • On Mac OS Leopard, the built-in Python interpreter has the ability to call the Quicktime (QTKit) functions via PyObjC. Using this, you can build your own movie programs in Python without downloading anything. Of course, this has been done already, and the result can in turn be downloaded as an AppleScript Application (the script doesn't work without modifications on Tiger).
  4. To convert from Quicktime .mov to .mpeg, one can use QT amateur, a free movie player for Mac OS X which can export various movie and image file formats (even in batch mode). It requires Quicktime 7 to be installed on your machine.
  5. Apple's Quicktime Pro application has more flexibility but it's not free.
  6. If you are comfortable with command-line UNIX tools, there are the free packages mpeg2vidcodec or mpegencode, available for Mac from the porting system fink.
  7. Many mathematical software packages like Mathematica and Maple are able to create image sequences that can be exported as animations. However, I usually want more flexibility and therefore export the individual frame images from those programs, followed by movie conversion using one of the tools mentioned above.
  8. To assemble image sequences into movies or deconstruct movies into images, you can also use the 3D design program Blender. This requires overcoming a rather steep learning curve because the main purpose of this program is 3D modeling. In Blender's Video Sequence Editor, select Add and Images, and multiply select the desired images. Under Scene ⇒ Anim, activate "Do Sequence", and under Scene ⇒ Format select a movie output format such as QuickTime. Set the start and end frames appropriately and press "Anim". A disadvantage of Blender is that the resulting movie has an inflated file size because it doesn't come with video compression codecs.

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.

---

Jens Nöckel <noeckel@uoregon.edu>

Last modified: Fri Apr 24 22:22:10 PDT 2009