As the saying goes, an image is worth a thousand words. But, compared to more modern vehicles of visual awe, the limits of an image become obvious. After all, images are just a static snapshot of a visual moment in time – powerful, for sure, but not the most powerful mechanism for communicating ideas quickly. That honor belongs to video, which can communicate a complex idea with ease whereas a static image alone can often fall short.
As a developer who writes a lot about what happens on my computer screen, I’ve found that a nice short video screencast is often the best solution for communicating a complicated idea or process. The solutions to do this are plentiful. Personally I use Recordit to take and share a short screencast when a screenshot just won’t do. When I run up against the limits of what I can do with a gif service like Recordit, I’ll then turn to something like Jing.
The popularity of sending videos to communicate online has recently made me think a lot about micro screencasts. A micro screencast, as I define it, is a short video that typically does not contain audio. Most screencasts have audio, micro screencasts typically don’t because gif’s don’t contain audio data. Micro screencasts are needed in situations where a static screenshot is not enough and introducing audio might overly complicate the production. I find that when writing about code, micro screencasts have become invaluable. They allow me to briefly show an idea or process with a short video. In this article, I’m going to discuss my process for creating micro screencasts and how you can get these videos hosted for free.
As previously mentioned I use Recordit to capture short (120 frame limit!) micro screencasts. This is a free service that will capture and host a micro screencast in gif format. I’d imagine several other gif services have popped up since Twitter announced its support for animated gif’s.
Below is an example of a micro screencast taken with Recordit showing off the mobile/tablet simulator in AppBuilder.
Gif’s are a great solution for quickly creating simple micro screencasts. The power of using a gif is in the fact that a lot of communication tools can instantly use a gif where text is expected (e.g. HipChat). In general they play most everywhere, loop by default, and have no plugin requirements. However when placing micro screencasts in an web article, online documentation, or an online book things start to become less than ideal. Allow me to explain.
I’ve resolved a couple of these issues by simply using something like gifffer that will stop the auto looping of a gif in a web page until the user clicks on the gif. Below I’m showing the micro screencast from above but having gifffer manage the playback instead of looping on page load.
Using gifffer is simple. Include gifffer.min.js in your page.
Instead of setting the
src attribute on your image use
<img data-gifffer="image.gif" />
After the page has loaded or after
The advantage of using gifffer is that the user can determine when they want the gif to be playing and when they don’t, as opposed to being at the mercy of an autoplaying gif that loops. Check out the Github repository for more details.
Using an animated-video-gif and gifffer is a quick fix solution and if I have one or two micro screencasts to place in a web page I use this method because of its simplicity and speed as it pertains to creation and distribution. However, this does not resolve several of the issues I previously mentioned. To resolve all issues I had to master a more involved process of authoring and distributing a video.
To gain complete control over the production of a micro screencast we have to use a professional screencasting solution. Which one you use is less important than making sure you start with a professional screen capturing tool.
I use ScreenFlow on a Mac. Using ScreenFlow gives me complete control over the video recording and editing (i.e. cropping, clipping, etc.). My main motive for starting with something like ScreenFlow is so that I can add effects to the video. For example, I typically add a fading to white effect to the end of a screencast to clearly inform the user that the video has ended before it loops.
Once I’ve doctored/edited the video with my screencasting software I export a high quality web format (mp4 will do) so that I can then use a video to gif converter to create a gif file (I use GIFBrewery). The results of this process are shown below. Note the fade to white I added.
You can view the second screencast here (I have not embedded the gif due to it’s size, though you can see the gfycat hosted version below).
With a gif in hand the next step is to upload the gif to gfycat.com. They offer an account system to manage all of your uploads or you can just upload a gif with no account.
Now you might be wondering since gfycat permits video uploads, why didn’t I just upload my video file? Had I uploaded the mp4 file it would have been rejected because it’s longer than 15 seconds. By uploading a gif file instead of my original video file, there are no set restrictions on the size or length of the screencast by gfycat. Yup, I’m a hacker.
Now that my gif is uploaded to gfycat, I can make use of (i.e. hotlink too) the much smaller html5 video formats created from my gif by gfycat (six different video formats to cover the most browsers) as well as a the orginal gif file.
To embed my micro screencast in a webpage I use the
<video> element to hotlink to the HTML5 videos hosted on gfycat.com. I still make use of the orginal gif as a last resort backup for those who view the page in a browser with no HTML5 video support. Also, I used the poster image provide by gfycat as the image seen in the video player before playing. All of the code is shown below.
<video width="100%" poster="http://thumbs.gfycat.com/FarDimGosling-poster.jpg" controls loop> <source src="http://zippy.gfycat.com/FarDimGosling.webm" type="video/webm"> <source src="http://zippy.gfycat.com/FarDimGosling.mp4" type="video/mp4"> Sorry your browser doesn’t support html5 video, try an animated gif <a href="http://giant.gfycat.com/FarDimGosling.gif">http://giant.gfycat.com/FarDimGosling.gif</a> </video>
By following this seemingly crazy process I have accomplished the following:
This is my process for crafting micro screencasts for articles and online books. If you have a better process for creating micro screencasts, hosted for free, I’d like to hear about it in the comments. Or, if you think I can improve this process, I want to hear about it.