Animated Screencast GIFs: Making-of

Considerations and Research

Update 2021

As of 2021, with new tools having appeared for Linux, I’m no longer recommending to follow the workflow described below.

For recording animated GIF files, I’m now using Peek.

For cutting them and then rendering to GIF, I’d recommend using Kdenlive.

Gifsicle is probably still a good option for reducing the file size.

Key-mon for showing the key strokes and mouse actions still works for me, but it’s not officially available for up-to-date Ubuntu Linux based distributions (only from pypi, in a version from 2013, sadly).

I have modified my version with a better keyboard layout for German and some better visibility for the graphics, but installing it is a bit difficult (and it’s not documented). It depends upon GTK2 and Python 2. I might make another post about that.

Screenshot from a gif

Would you like to know how the animated GIF images for these articles have been created?

This workflow was tested on Linux Mint 17.2 (Xfce edition). First of all, it took a lot longer than I thought it would - due to bugs (in both the recording tools and Inkscape) and research for better options.

I already had this very useful little bash script (GPLv2), written by Jabiertxo Arraiza Cenoz, and adapted to my needs. It will record the selected window, give acoustic prompts and save the recording to an optimized GIF.

But what I still needed was a way to cut and crop the animations after recording – and it seems there isn’t any nice GUI that makes this possible yet for Ubuntu 14.04-based systems. There will soon be a new version of OpenShot (2.0), that supposedly has support for opening and saving to GIF, but it’s not available yet.

Well, the GIMP can crop, and it can save to animated GIF, so that’s really nice. Only, editing those in there is very laborious currently, as there exists no feature yet in Gimp 2.8 to select several layers at once to delete them – each GIF frame is represented as a single layer in GIMP, so to cut a ‘video’, it’s sometimes necessary to delete several (hundred…) layers at once, which would literally take hours.
What it has got though, is a very useful preview functionality, that allows you to see the frame numbers (they don’t match with the numbers in the layer names…) and stop the animation / step through it (but it can only step through it in one direction and cannot jump to a specific point).

Then there’s gifsicle, a command-line utility that can do quite a lot of things with animated GIFs. For example, it can cut and merge them if you give it the frame numbers you want to keep. It also does a very good job in reducing the file size of the result. But you really need to know the frame numbers before you use it.

Workflow

In the end, I came up with the following workflow:

  1. Script: record the animation: sh recordToGif.sh [duration in seconds] [/path/to/file.gif]
  2. GIMP:
    • open the recorded file with the GIMP, crop it to minimize file size
    • use Filters ⯈ Animation ⯈ Play animation to see where you want to cut, make a note of the frame numbers
    • export file
  3. gifsicle: feed the exported file into gifsicle: gifsicle --unoptimize -O3 myfile.gif "#start_frame_number-end_frame_number" --output=myfile-modified.gif

Things you might want to know

A few hints and caveats:

Better ideas welcome!

If anyone has a better workflow to suggest or any other hints, please leave a comment. While this one here gives good results (small files!), it is also still a little too complex and time-consuming to be really fun.

Else, we’ll just have to wait for the new OpenShot 2.0 to be released (UPDATE: it’s in beta now) – or maybe it’s possible to write a small javascript thing? Seems there are a few gif libraries available – and I might want to use one of them anyway to prevent all GIFs from playing (and loading…) at once, and make them user-controlable similar to this.

This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 License.
You may share and adapt the contents, as long as you publish the result under the same license and give appropriate credit.


1 Comment

Jabiertxof

Great! Thanks for share this.


Write a Comment:

You can use Markdown syntax to format your comment. If nothing happens when you click the 'Post via email' button, you can also just send your comment in a normal email.