Some Notes On Screencasting


I put together some notes for my team, on building some screencasts. I thought they came out fairly well, so I wanted to share with the rest of the world. Note that these are my opinions based on the work that I’ve done with WatchMeCode, PragProg, Tekpub and now with Kendo UI. I know there are 1,000 ways to do any / all of this, and I would love to hear your thoughts on what you do and how you get things done as well. I’m always looking for ways to improve what I do.

Getting Started

Read Rob Conery’s series on screencasting. He was kind enough to blog everything that I wouldn’t have been able to say as well as he does. 🙂

http://wekeroad.com/2012/08/22/screencasting-like-a-pro-beginning-middle-end
http://wekeroad.com/2012/08/24/screencasting-like-a-pro-the-script
http://wekeroad.com/2012/08/31/screencasting-like-a-pro-the-demos

Also read Scott Burtton’s article on audio compression. Note that this is not file compression… this is audio compression, as in sound engineering.

https://gist.github.com/scottburton11/3222152

Equipment / software:

You need a minimum amount of hardware and software for building screencasts. This list should be fairly obvious:

  • A computer (duh?)
  • A high quality microphone
  • Screen/video recording / editing software
  • Audio recording / editing software

Microphone:

Don’t use your laptop’s built in microphone. Don’t use a skype/g+ hangout/IM quality headset from BestBuy. These microphones are terrible. Buy something of high quality. There are high quality headsets that can be purchased, but it would be best to buy a microphone that is built for recording / broadcasting human voice.

I recommend one of these two:

You can get others, of course. These are the industry standards for podcasting / screencasting, though. They are broadcast quality, USB powered Microphones. The Blue Yeti is the cheaper of the two, but the Rode Podcaster is the more professional one.

Notes On Recording

Things to keep in mind when recording the audio and video

For recording the video:

  • Close all programs that are not part of the recording / coding / screencasting process – especially email and IM apps
  • Record the entire desktop, not just part of it
  • Record at your normal screen resolution. Don’t change the monitor resolution or anything else, to record.
  • Re-size all windows that you are going to record, down to 1280×720 (720p) resolution
  • Do not record computer audio
  • Do not record any audio while recording your screen (the exception to this is if you need to record yourself talking to yourself, so that you can take notes for the real audio recording)

Movement In Video:

Limit the amount of on-screen movement while recording. Don’t jump back and forth between windows and tabs a lot. Don’t scroll excessively.

You can, of course, move things around as much as you need when doing your rough recordings. But the end result should be edited so that these extra animations, cmd-tab (alt-tab) screen-switching transitions, and other movement are gone from the final video.

Move your mouse as little as possible. Move it slowly and deliberately so that a person watching can easily track it with their eyes.

Keep this kind of motion limited so the user can focus on the content, not the movement of the screen.

Post-Recording Slides And Animation:

Any time your audio script comes to a point where you are pausing the video to discuss or describe something, you will want to have a slide, an arrow, or some other highlight to point out what you are talking about.

Slides are good for tangential subject matters – things that people should be aware of, but are not directly covered by the video content. Plan for a few slides, but keep them limited.

Highlights, arrows, word overlays on the video, etc, are good for pointing out the content that you are describing. Plan for a few highlights to illustrate what you’re talking about, but keep them limited to what’s important.

Rendering Video:

The final video output should be 1280×720 (720p HD) resolution. I prefer to export MP4 (mpeg layer 4) files as .m4v. This works pretty much everywhere – iPad, iPhone (though I wouldn’t recommend that), Windows, Mac, etc.

For recording the audio:

  • Turn off your phone. Srsly – I’ve seen screencasts where people say “hold on…” and check txt messages. WAT
  • Wear a headset if you need to hear the computer’s audio while recording the audio
  • Record your voice-over separately from the screen recording
  • Edit the audio to remove clicks, pops, breathing and other noises
  • Use a small to moderate amount of audio compression, to keep the audio levels closer to even (see the above link to Scott Burton’s article on audio compression)
  • Export the audio at the highest possible quality, using a lossless audio format. Do not export as MP3 or any other file format that would reduce the quality of audio

When recording audio, be aware of background noise. A broadcast quality mic will pick up everything. If your office has wood / tile floors, like mine, you probably don’t want to record in that room because of echo. Find a room with no bare walls, with as few hard surfaces as possible, and with as much “soft” stuff to absorb sound, as possible.

I have a small set up in my closet for recording audio, with a mic stand and a portable sound booth. I don’t expect everyone to have this kind of set up, but using a closet full of clothing will reduce the background noise and create a “dead room” effect, where your voice is more natural.

On a Mac

I work on a Mac these days, so I have more specific info about this than I do windows.

  • Do not record video on a Retina display
  • Use Screenflow to record and edit video
  • Use GarageBand to record and edit audio
  • Splice the audio together with the video, inside of ScreenFlow, after editing the audio separately
  • To resize your apps to the appropriate size, use a tool like SizeUp or applescript like I talked about in another post.
You can also use Screeny if you need to save money. If you’re dirt-cheap/poor (how did you get a mac?) then you can use Quicktime and iMovie, but this is awful and painful.
For advanced animations and awesome stuff, use Motion 5.

Screenflow settings:

  • Go to “Preferences”, “Advanced”, and set “Screen Recording Preferences” from “Adaptive” to “Lossless”
  • Go to “Preferences”, “Advanced”, and set “Video Magnification” to “Smooth”
  • Go to “Preferences”, “Timeline”, and set the default transition to “Cross Dissolve”

On Windows

Use Camtasia … is there anything else? Not sure about anything else here… suggestions? What is the Garage Band equivalent on Windows?

The Video And Audio Script

Like most things in software development, iteration is the key to success. Learn to iterate your script for both audio and video. This usually means writing one of them first, while thinking about the other. Then writing the other while editing the first to adjust for the things you forgot about.

Organize your scripts as if you were writing blog posts – short sections with a beginning, middle, and end in each section. Be sure the entire episode also has a beginning, middle and end, as well.

When writing the audio script details, write as if you are speaking – because you are. Don’t write for written publications. Write for a an audience that is listening to you do a presentation at a user group. Write in your speaking voice.

You need to be able to record the audio and video in short bursts – 1 to 2 minutes, maybe 3 to 5 minutes at most. This is critical because you will make mistakes, and you will have to re-record parts and you want to minimize the amount of audio and video that you have to re-record. Building your audio and video script in small, distinct segments will help facilitate this.

Building Sample Apps in Ruby, NodeJS and PHP