Animated Screencast GIFs: Making-of

Considerations and Research

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:

• Recording:
  • Use a keyboard / mouse entry displaying tool, e.g. key-mon, if you would like to show which mouse button / key you press.
  • Problem with that is: it doesn’t show all keys I press. The plus sign, for example, is never shown. Also, the version that comes from the official Ubuntu 14.04 repos does not work well if you want to use the option “Highly visible click”. But there is a solution for the latter issue: get the updated source from github and install it doing python setup.py build, then as root user, python setup.py install (it will be installed outside your usual package management – removal might be difficult!). For the missing keys, there seems to be some info here and it appears you can add your own keymap somehow. I still need to investigate this ;)
• Script:
  • Requires espeak and byzanz.
  • Will not always record the mouse cursor (at least I had the problem that it didn’t work correctly anymore after trying to use multiple workspaces / trying to switch keyboard layout). Actually only worked correctly again after a reboot… :/ Make sure you click into the window at least once after having selected it, too.
  • Doesn’t work with some older byzanz versions that do not have the -c option for recording the cursor
• GIMP:
  • It’s possible to adapt the timing by renaming the layers – the values in the layer names are actually used for saving to animated GIF.
  • Don’t overwrite the animated GIF, choose Export to… instead. Simply overwriting results in a non-animated GIF file.
• gifsicle:
  • --unoptimize converts the original (optimized) GIF frames, which each only contain a diff to the previous frame, to normal one-complete-image-per-frame frames (if you leave that out, and then cut images away, you’ll get very interesting animations ;) ).
  • -O3 will use the best, but slowest, optimization algorithm – never took more than a few seconds, usually less than one, so no problem.
  • For more advanced options, read the gifsicle documentation.

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.

1 Comment ⚓

Reply

Jabiertxof ⚓

Sun 03 January 2016

Great! Thanks for share this.

---

Write a Comment:

Name Email Link

Post via email

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.