Animated Screencast GIFs: Making-of
Considerations and Research
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.
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.
In the end, I came up with the following workflow:
- Script: record the animation:
sh recordToGif.sh [duration in seconds] [/path/to/file.gif]
- open the recorded file with the GIMP, crop it to minimize file size
Filters ⯈ Animation ⯈ Play animationto see where you want to cut, make a note of the frame numbers
- export file
- 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:
- 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 ;)
- 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
- 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.
--unoptimizeconverts 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 ;) ).
-O3will 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.
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 ⚓Sun 03 January 2016
Great! Thanks for share this.