How to create animation (Linux)?


Jump to: navigation, search


Animation using a ffmpeg on a series of images

We use the program ffmpeg. It allows working with any format of images (except ps, eps and pdf).
It can be installed both on Linux (via the package manager) and Windows systems

Some Linux distributions provide avconv which is mostly compatible with ffmpeg.

Installation from source

Latest release from source:

./configure --prefix=/usr/local/ --enable-libx264 --enable-gpl
sudo make install

You may have to install yasm to complete the installation.

File numbering

ffmpeg requires to have the files numbered sequentially, similarly to the following example:

image_001.png, image_002.png, image_003.png

If it is not the case, the small script below can do the trick:

let k=0
# Loop on the files of the directory
for ii in `ls $imagedir$imagebasename*`
  let k=$k+1
  # Zero padding
  kk=$(printf '%06d' $k)
  # Create Symbolic link
  ln -sf $ii $imagedir$imagebasenameout$kk$filetype

where the four lines after #!/bin/bash have to be adapted according to your files and directories.

Size reduction

ffmpeg prefers not too large files, so it is sometimes necessary to resize them. The command

mogrify -resize 640 *.png

will resize all the png files, so that they have a length of 640 pixels. If only one argument is put after -resize, then the aspect ratio of the image is kept.


It is also possible to crop and scale image frame directly with ffmpeg:

ffmpeg -y -r 1 -i  frame-%05d.png  -vf crop=1050:309:22:81,scale=iw/1.1:ih/1.1  -vcodec libx264 -preset medium -crf 35 -threads 0 westernSST.mp4
where x,y are the coordinates of the top left corner
reduce width and height (after cropping) by a factor of 1.1.

The height and width of the frames must be a multiple of 2.

Border removal

In some cases, the figures produced with matlab or octave have large white borders that are not necessary.

Crop tool

The first step is to determine what are the position and dimensions of the rectangle where the cropping has to be done. It is easily done using Paint or the software Gimp: use the rectangle selection tool, and note the size and location of the rectangle drawn around the figure. Once these numbers are known, just type

mogrify -crop {Width}x{Height}+{X}+{Y} *.png

where X and Y are the coordinates of the bottom-left corner of the rectangle. This command will crop all the images with the suffix .png


Trim tool

A quicker solution is to use the trim option of mogrify:

mogrify -trim *.png

Here the box is automatically computed.

Creation of the animation

The command to be run looks like this:

ffmpeg -r 5 -i image_%3d.png  animation.mp4


  • -r 5 specifies the number of images per second.
  • -i ... tells the input figures to wortk on (image_001.png, images002.png, ...)

A more complete and recent example:

ffmpeg -r 20 -f image2 -i image%05d.png -vcodec mpeg4 -b 5000k animation.avi


  • -r 20 : frames per second
  • -f image2 : force input file format (not needed in most cases)
  • - i image%05d.png : input image sequence
  • -vcodec mpeg4 : Video codec
  • -b 5000k : Video bitrate
  • animation.avi : output file


The temperature at 10 m obtained with the ROMS model is shown in the region of Canary Islandes and Azores.

Conversion from animated gif to avi format

The conversion can be done in two steps:

  1. transform the animated gif into a series of jpg
  2. merge the jpg into an avi file
convert test.gif test%05d.png
ffmpeg -r 5 -i test%05d.png -y -sameq test.avi



  • The convert program is a member of the imagemagick suite of tools.
  • The option -sameq forces the video to have the quality as the source.
  • When using convert, other format of output can be selected: jpg, gif, etc.

Formats and Codecs

Platform Command Comment
webm Linux/Firefox 4+/Chrome ffmpeg -y -i <in> out.webm royalty-free/very good compression
ogg Theora Linux/Firefox/Chrome ffmpeg -y -i <in> out.ogv royalty-free/good compression
H.264 Win7+/Mac/IE9+ ffmpeg -y -i <in> -vcodec libx264 -vpre medium out.mp4 patented/very good compression
MS MPEG 4v2 Win/Powerpoint ffmpeg -y -i <in> -vcodec msmpeg4v2 -sameq out.avi patented/good compression
Motion JPEG all? ffmpeg -y -i <in> -vcodec mjpeg out.avi poor compression/good fall-back option

Fine tuning the output quality:


For x264 you need preset files:

ffmpeg -y -r 1 -i  frame-%05d.png -vcodec libx264 -vpre medium -crf 35 -threads 0 westernSST.mp4
Constant Rate Factor (higher values reduce the file size)


ffmpeg -y -r 1 -i frame-%05d.png  -qmax 40 -b 50k westernSST.webm
maximum video quantizer scale (higher values reduce the file size)
bit-rate (higher values increase the file size)

Embed a video in a web site or wiki

With HTML 5 animations can be embedded in a web site. The animation needs to be saved in multiple formats (at least: webm and x264) to be visible in all current browsers:

<video width="920" height="662" controls="controls" preload="auto">
    <!-- for Firefox 4+, Chrome and Opera-->
    <source src="/mediawiki/upload/Alex/OceanBrowser3D/oceanbrowser3d.webm" type='video/webm; codecs="vp8, vorbis"'>

    <!-- for Firefox 3.6  and Opera -->
    <source src="/mediawiki/upload/Alex/OceanBrowser3D/oceanbrowser3d.ogv" type='video/ogg; codecs="theora, vorbis"'>

    <!-- for Safari and IE9 -->
    <source src="/mediawiki/upload/Alex/OceanBrowser3D/oceanbrowser3d.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

    Your browser does not support the video element. You can download the video below.

IE 6, IE 7 and IE 8 do not support the video tag.

Personal tools