Creating animated GIFs and APNGs from videos

Linux Setup

For this project we will need two or three tools. We will need avconv to pull frames from a video file, and we will need gifsicle if we want to created animated GIFs and apngasm if we want to create animate PNGs. If you are on Debian, you can install libav-tools (which provides avconv) and gifsicle in the normal way, but see my previous post on how to install apngasm from source (you will also find an explanation of the differences between animated GIFs and PNGs, and when to use each). If you use another Linux distribution, check your package management system.

Windows Setup

To get this to work similarly on Windows, we will need some extra tools and the setup is a bit more complicated. To get glob expansion and redirection, we will install Cygwin. Cygwin provides a Linux-like environment on Windows, including the Bash shell and the GNU coreutils (basic commands like ls, cp, rm, mv, etc). The installer also serves as a package manager, allowing you to select the various software packages you want to install or upgrade. If you are not sure what you want, just install the default packages. This will provide a lot more than we need, but you will have a useful environment if you need it later. You can always run the installer again later if you want to install more packages.

You will need to install 7zip, since Libav binaries come in a .7z archive you will need 7zip to extract them. When using the most recent version of Libav (0.9.7) on Windows, all of the GIFs came out in grayscale, so I tried the same version that was included with Debian Wheezy (0.8.6) and found it to be working on Windows (YMMV).  Gifsicle and apngasm come in .zip archives. Gifsicle and apngasm both contain a single binary you can extract to wherever you would like. Libav is a bit more complicated, you will need to extract the bin, lib, and share directories. For simplicity, you could extract all of these directories to C:\, and then put the gifsicle.exe and apngasm.exe in C:\bin (or choose whatever directory structure seems suitable for you).

Now, it would be nice to put  the directory (or directories) containing our new tools in the system path variable, so Windows (and Cygwin) will know where to find them without us having to type the full path to the command. You can do that in cmd.exe like this:

setx path "%PATH%;C:\bin"

Now, for any of the following commands, we will use the Cygwin Terminal. If you are from a Windows background, you will notice that all of the paths are separated with forward slashes instead of back slashes (C:/Users/Name/Documents, rather than C:\Users\Name\Documents). If you have used Cygwin before, you will need to note that these are not Cygwin binaries we are using, so the path arguments they take will use Windows drive designations (C:/Users/Name/Documents, rather than /cygdrive/c/Users/Name/Documents). However, this only applied to arguments passed to the commands, if you are giving the full path to the command, you will be using the Cygwin form (/cygdrive/c/bin/avconv.exe).

Essentially, when you are running the following commands in Cygwin terminal on Windows, you will just add the drive letter (C:) in front of the file paths, and the commands will end with the .exe extension.

Extracting Images from the Video

The first step is to convert our video to a series of image files. Now when we do this, we need to know what frame rate we want our animation to run at, and how if we want to make it faster (or slower) than the original video. If we want it to run at the same speed, we will use the same frame rate when extracting the images as we will use when we create the animation. If we want to alter it's speed or playing time, we'll want to do a little math. For instance, suppose I want to make an animation of these roses blooming from youtube. The video runs for about a minute and a half, but let's say we want to see the whole process in about ten seconds in our animation. If we want our animation to run at 30 frames per second, then we need 300 frames for a 10 second animation. To find the frame rate we want to pull from the video, we take 300 frames divided by 90 seconds, which gives us a frame rate of 3.33 fps.

Now that we have chosen the frame rate, let's look at the command:

avconv -i /path/to/rosesblooming.mp4 -r 3 -vsync 1 /path/to/rosesblooming%03d.png

Of course, if you are creating an animated GIF, you will use the same command with a .gif extension. Now you should have a collection of PNG and/or GIF images extracted from your video.

Putting together an animated GIF

Now when we create the animated GIF, gifsicle takes a delay in centiseconds (or hundredths of a second) rather than a frame rate. So a frame rate of 30 fps is equivalent to 1 second divided by 30 and multiplied by 100, or about 3 centiseconds.

Here is the command:

gifsicle -d 3 -l /path/to/rosesblooming*.gif > /path/to/rosesblooming.gif

Putting together an animated PNG

When we create the animated PNG, apngasm takes a delay as two integers composing a fraction of a second, so if we have chosen a frame rate, the first integer is one and the second is the frame rate.

Here is the command:

apngasm /path/to/rosesblooming.png /path/to/rosesblooming*.png 1 30

Creating a thumbnail in an animated PNG

The APNG format allows you to specify that the first frame will be skipped during the animation so it is only shown in viewers that don't support animation. To those viewers, the APNG we just created with look like a bunch of leaves. If we want them to see the fully opened roses instead, copy the last frame to /path/to/rosesblooming000.png and add the /f option to the command, like this:

apngasm /path/to/rosesblooming.png /path/to/rosesblooming*.png 1 30 /f

Looping

The above commands create animations that repeat indefinitely. This is the default for apngasm, for gifsicle the -l option specifies this behavior. If you want the animation to play through only once, you can just omit the -l for gifsicle since this is the default, but for apngasm you will add /l1 to specify this. For apngasm, you can use any number in place of 1 to play through a given number of times. For gifsicle, the -l option will take a number as well, but it is separated by a space.

Conclusion

Now you should have all of the tools you need to create your own animated GIF and PNG images. And you can always learn more by reading the documentation for these tools.