The Ultimate Guide For Developer Screencasts

JBoss Portlet Bridge Logo About a year ago, I decided to start creating screen casts for the JBoss Portlet Bridge open source project. As a manager of a relatively small, niche project, it is easy for me to try new things that can only improve the community around the project - or serve as a learning lesson for myself. Screencasts are nothing new to the development scene, but my goal was to liven it up a bit and make the outcome seem more professional and well produced. At the same time, covering all the important facets of managing a community like community member recognition, to getting started, and so on.

Coming up with a topic

This doesn't seem like a hard task, but it can make or break your idea. You don't want to base your topic on generic phrases or buzzwords. Of course, to get someone interested in your project, you may need to use a mainstream keyword in your title. But don't be untrue to your viewers. This is your name and reputation on the line, so give the community what they want by evaluating forum topics, in-house support requests, wiki articles, or current blog posts about your project.

Take a look at this: Screencast Title You might say, "Why not just use the core topic and tag the basic stuff?" - Well, tags are cool and all, but they are platform dependent, so I use a double-fallback with the title. Of course I still use tags, but when you post the title in your blog, twitter and wherever else, you will need the all-in-one, "Google friendly" title.

And lastly in choosing your topic, remember we all have roots as an end user of someone's framework or product, so I always envision myself as the user. This is best done by creating a screencast for a common customer support request or forum question, heck you could even use your FAQs as "season 1" for your screencasts :)

The Introduction

Screencast IntroAs an open source project manager, developer, community promoter, marketer, designer, etc… we have many hats to wear. Since I have a design background, I like to fire up After Effects, Blender, and other cool video creation programs and make a kick-ass intro. Most developers don't have this capability/luxury, so it's up to you on how far you want to take your intro. Typically, just some kind of view with your logo and a background image will do.

If you know how to use After Effects, or want to use the intro I created for this video, I have uploaded the source .aep file for you. Feel free to use whatever parts from it you want.

I also use music and different sound effects, (even extracting the vocals if necessary) to get the right effect. There are some great creative commons/open source music sources like:

I have learned to limit my intro to 10-15 seconds. Just something short and sweet to give your screencast some character.

The Audience

Just like writing a book or article, this may be a first time user of your project, or it may be a seasoned developer. So know your target audience. If you plan on doing a series of ongoing screencasts, definitely make your first episode at a very beginner level. This will allow you to reference it in the future with more advanced screencasts.

Prerequisites

Explain the preparation steps clearly - environment variables, 3rd party downloads, utilities, etc.. Create a wiki or blog post listing all the requirements for users to follow along with. Show a screenshot of that article which you just created in your video before you get started.

Branding

I always start my screencast with a view of the project home page and a brief explanation of navigation and making your way around the project site. You want to drill this page into your users head and this is the best way to do it. You may have great forums and FAQs, but your users may have a hard time finding it... this is your chance to train the community on the hard work you have put into your project.

Be Realistic

Go through a dry run, but don't make it "too" perfect. You are guaranteed that many viewers will have some kind of problem while running through your demo, so when it happens to you in the screencast, don't edit it out - leave it. This is important because it's something every viewer can relate too. At the same time you want to keep in mind NOT to leave in your (or too many) mistakes. There is a fine line here of confusing your audience vs. letting them know that you are human and may face their same problems.

Create a script (if you need it)

For some folks, adlib and free handing this kind of stuff comes natural. Not for me. While going through a dry-run and making sure the screen cast is going to work as planned, jot down the notes that come to mind as you're working. This is important because you will often be too focused on speaking clearly and getting your point across during the actual recording. It's nice to have a set of reminders to look at.

Open Source and Commercial Tools

Onto the fun stuff, so now you have everything prepared and you're ready to start the recording. First, you need to get yourself a screen recorder and depending on your OS, I have listed a few options below.

Mac
If you are lucky enough to own/use a mac for your screen casting projects then I highly recommend using ScreenFlow. The intuitive UI and ease of creating powerful animations make it worth the money. Amongst all the screen casting tools available, this is hands down the best one I have seen. A trial version is available, but it will watermark your video on export.
However, the very kind folks at ScreenFlow hooked me up with a coupon code for the readers of this article. It will give you 10% off the original $99 price tag, saving you $10! Use discount code CPN9040717399 to receive and extra 10% off your purchase. Thanks Christine!
Windows
I used CamStudio http://sourceforge.net/projects/camstudio/ for a short project quite a few years ago, and I have no idea what is out there on the free & open source scene today.
Linux
A quick google search revealed a few (mostly ffmpeg based) but I'm sure there are more out there, so please let me know in the comments if you know of a good one.

Here are a few more tips and recommendations for recording and publishing:

  • I bought a decent set of headphones with a microphone which seems to put me in "the zone" a bit more than using my built in laptop microphone.
  • I think it's cool to actually record video of yourself usually for the first introductory video or at the beginning when it is mostly you talking. People are not going to be watching you talk, they are watching your screen actions. Be sensible about when to use video of yourself talking.
  • If you mess up or get tongue tied, don't stop the recording. Just take a deep breath and allow a few noticeable seconds to pass, then start over. You will see your pause in your wave form visualizer and you can go back and cut it out when you are doing your final editing.
  • Keep your rate of speech just a bit above or at conversation level. I made the mistake of not keeping a script nearby in my first few videos and it is definitely noticeable that I am thinking about my next steps while I'm talking in the screencast. It's not fun to listen to and makes you sound like an amateur.
  • Cut out as much white space as you can when doing final editing and keep your screen transitions smooth when doing multiple takes or pausing while your wife screams at you to take out the trash or to answer the phone. Don't make your audience sit there while you wait for a server to start up. Cut out startups and any other tasks that are repetitive and boring. Every second counts and you don't want to end up with an hour-long screencast.
  • Make jokes and make fun of yourself. Sure you are offering value by allowing your viewers to get tips and tricks first hand from you - the expert ;) But simple entertainment and your character can increase your viewing audience, or simply make you more approachable when speaking at conferences, etc...
  • Use time-bookmarking features in the comments. I think this is the greatest feature of screencasting and may even replace user guides or other documentation in the future. Unfortunately, the platform (vimeo) that I use limits this feature. Youtube does a great job at it and allows you to link to a specific time, down to the second, in a video - even external linking is allowed. With vimeo, all you must do in the comments is find the minute/second you want to mark and insert it into the comments as (7:31) - with the parentheses. This tells vimeo to render a link for that marker, but the big drawback is the entire video must load first, and you cannot access this marker with a GET parameter like youtube.
  • And since youtube only allows 10 minutes or less for the length of your video, I have been using vimeo to publish all of my screencasts. Here are the export settings I use in ScreenFlow to allow users to view my video in HD format:
    • H.264 codec
    • dimensions 1280×720
    • bit rate 3000 kbits/sec (optimized for “download”),
    • key frame every 30 frames (frame reordering on), using whatever frame rate you shot in.
  • As for ScreenFlow tutorials, you can find out how to use all of the functions and features here http://www.telestream.net/screen-flow/demos.htm.

The rest is up to you. Whatever tutorial or product review you are trying to get across to your audience, remember to be punctual, upbeat, and funny! As of this writing, you can view the following screencast where I attempted to apply the concepts mentioned here http://www.vimeo.com/8752541.