The other day I was writing a tutorial post. I needed to illustrate an example and wanted to use a short video in order to do it. I created the video but it turned out really short. So after thinking about it a bit, I decided the best way to include the video into my post would be to create a screencast animated GIF.
Since I’m new to creating animated .gifs, I went to the interwebs for a solution. As an Ubuntu user, I was sure there was some combination of Linux FOSS applications that would do the trick. Sure enough! The repositories had all I needed. Here’s how I did it.
Ubuntu Applications used to create a screencast animated GIF
I used the following applications to create an animated GIF from a screencast:
- Desktop Recorder to record screen actions to use in GIF, saves as OGV video format;
- MPlayer to capture JPG screenshots from OGV video;
- ImageMagic to convert the screenshots into an animated GIF.
Install applications to Ubuntu
I’m currently running version 14.04 LTS but this will work for other versions as well.
Open your terminal and type the following:
This will install all three applications in one fell swoop. If you have any of these applications already installed,
apt-get will notify you and only install what is necessary.
Record your screencast with Desktop Recorder
Once you finish installing the proper applications, open up the Desktop Recorder (a.k.a. recordMyDesktop). The install should have added a new icon to your Ubuntu launcher on the left of your screen (or the bottom of your screen if you’ve updated to the goodness that is Ubuntu version 16.04). If it’s not there, you can access it by pressing the Window/Ubuntu key and typing “record”.
When first launched, you will need to establish a default directory and name for your files to be saved into and as. The file type will be .OGV. If you miss this step, Desktop Recorder will use your
$HOME directory and the default name of out.ogv.
Once this is established, two things will occur: The recordMyDesktop main window will appear,
and you will see a new red icon in your task menu at the top right of your screen.
The easiest way to begin a recording session it to click on the task-bar icon and choose “Select Area on Screen” from the drop-down menu.
The icon will soon turn into a “+” sign, allowing you to choose your screen and select the area to record.
Once the screen area is selected, click on the “Record” button in your task-bar. The button will turn into a red-square “Stop” button. You are now recording your screencast!
Click around your window to record your actions. Once you’re done, click the “Stop” button in the task-bar. Desktop Recorder will automatically save your file to the default directory and with the default name you established on first run.
Use MPlayer to capture JPEG screenshots
Now that you’ve got your screenshot .OGV file, use MPlayer to convert it to a series of .JPEG screenshots. We’re going to export the .jpegs to a directory called
/output/, which the conversion process will create if it’s not already there. You can name this anything you’d like. Open your terminal and navigate to your out.ogv directory (or whatever you named it), then enter the following command:
Be sure to replace
<video file name> with the name of your .ogv file.
Once MPlayer finishes, there should be a new folder in your MPlayer output directory named
Clean up your JPEGs
When you record a screencast, Desktop Recorder records everything, including the actions of you starting or stopping the screencast. Chances are, you don’t need all the information that you captured.
What I do is, starting at the beginning, open up each image file and pan through them until I get to the point I want to start my example. Once I get to that point, I simply delete all the images prior to it. I will continue panning through the images, one at a time, until I get to the image where I want my screencast to end. Again, I note the image, go into my file manager, and delete every image after my “end” image.
Use ImageMagic to create your screenshot animated GIF
Once I’ve cleaned it up a bit, it’s time to make our GIF. All we need to do is point ImageMagic at our
/output/ directory and name our animated GIF. In your terminal, type the following:
If you view your GIF now, it will be much too large to include it in a blog post or web page. It needs to be optimized. Run the following command in terminal to optimize your GIF:
Notice that this will create a second GIF file, one that is optimized. Open this new image in an image viewer and notice the difference.
Voila! You’ve now got a screencast animated GIF.
And there you have it. Using a screencast animated GIF is an excellent way to demonstrate examples when writing tutorial blog posts. Linux makes it that much easier with a few simple command line entries.
Do you use screencast animated GIFs in your blog posts? Let me know about it in the comments!