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.
The easiest and most platform-independent way of delivering animations is probably still the
GIF89 movie. Other formats that are quite common are
.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:
GraphicsMagick (fast and modern) or ImageMagick (slower but ubiquitous) are practically platform-independent tools, because you can get them for Mac, Windows and UNIX. Use the
convert command to create a single GIF image. Input files can be, e.g.:
BMP, or any other that the program can import. An example command with
PNG input would be
(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.
convert -set delay 3 -colorspace GRAY -colors 16 -dispose 1 -loop 0 -scale 50% *.png Output.gif
Instead of creating a gif movie, mpeg encoding can also be done by simply calling
convert -quality 100 *.png Outputfile.mpeg
.mov files that can be displayed by Quicktime Player, you can use the Python script that I list on the page "Frame-by frame animation as Quicktime with variable frame duration". The special feature of that script is that it lets you set individual frame durations for each image in the sequence. Such a variable frame rate is useful for animations when you want to slow down or pause at certain frames, without copying the corresponding image and thereby increasing the file size.
On the Mac, we of course also have
iMovie. The main obstacle with all versions is that there is a minimum frame duration that is too long for most animations. For
there is a work-around that allows to go down to 0.01 second frame duration. That's more than enough for normal applications. Instructions for how to use iMovie '09 are on a separate page. The
.01s frame duration seems to be unachievable with
iMovie '09: whereas it lets you freely speed up or slow down movie clips, the frames in a slide shows are limited to
.05s with my settings. The way to get around this is relatively simple: just export a slow version of your animation first (dictated by the minimum still image duration), then re-import the resulting movie clip and change its overall speed by an arbitrary factor.
To assemble image sequences into movies or deconstruct movies into images, you can also use the 3D design program Blender. This linked page explains how to utilize Blender's Video Sequence Editor.
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.
File ⇒ Convert&Modify .... Follow the instructions in Chapter 9 of the GC Help document, to end up with an animated GIF.
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.
Here are some other alternatives for creating bitmap-based frame animations:
ffmpeginstalled from fink, and use it from the command line. Some examples:
ffmpeg -i file.mov -pix_fmt rgb24 -s qcif -loop 0 output.gif
-s qcifcould be omitted, it sets a small output size. A
-loop 0parameter causes infinite looping.
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
%03d. To maintain the exact quality of the input images, do
ffmpeg -sameq -i %03d.jpg output.mp4.
.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.
An important limitation of GIF movies is that they only permit up to 256 colors, and a one-bit alpha channel (for transparency effects).
That's why in Firefox 3 (as well as Opera 9 and Camino 2) support an extension of the
PNG format that allows multi-frame animation. Demos of these animated PNGs show that gradients in colors and opacity are rendered very well. Browsers that don't support the new format will see only the first frame of the animation. To create
animated PNG, a nice tool has been implemented in Java: JAPNG. An easy-to-use online application is the APNG Assembler. Of course there are also Firefox add-ons, e.g.,
Animat. Even more than with GIFs, the problem with this animation format is that the file size gets very large.
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: