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.


Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs SignalLeaf.com - the amazingly awesome podcast audio hosting service that everyone should be using, and WatchMeCode.net where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in OSX, Quality, Screencast, Tools and Vendors. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Russ

    I’m sure there are always tons of everything on windows :)

    http://alternativeto.net/software/camtasia-studio/?platform=windows

  • http://twitter.com/jaygeek Jay Woodcook

    You may want to clarify the part about Compression… Export file vs. Audio Compression like in radio: (or perhaps another article?)
    ◾Export the edited audio….. Do not compress the audio export
    ◾Use a small to moderate amount of audio compression, to keep the audio levels closer to even

    On Windows, we’ve found Audacity (free) and its plugins to be a great way to record and edit audio for podcasts.

    • http://mutedsolutions.com Derick Bailey

      oops :) fixed. thanks!

    • Harley Pebley

      And FWIW, Audacity works great on the Mac too.

    • http://www.dylanwolf.com/ Dylan Wolf

      I’ve had good results with Audacity for voice recording and noise removal and then running the result through Levelator (http://www.conversationsnetwork.org/levelator).

  • Fang

    Can you explain “Do not record video on a Retina display”? This may be obvious to most of your readers but, since retina is my only option, I’d like to know why?

    • http://mutedsolutions.com Derick Bailey

      the retina display uses multiple pixels to display a single “point” of information… it does not display things in native resolution, unless you tell it to do this. this is what makes the retina so darn beautiful. i love my retina display and working on it is awesome.

      but recording video on this is a bad idea, for the very reasons that make it so beautiful. If you record the *equivalent* of 1280×720 video on a retina display, you will be recording something closer to 2560×1440 pixels… that’s 4 times the size of the video you are trying to produce.

      the cost of recording this many pixels is 3 fold: the amount of memory that it takes to process all of these pixels inside of ScreenFlow, the amount of time it takes to render the final output at actual 1280×720 pixels, and most importantly: scaling the image from 2560×1440 down to 1280×720 will cause some loss in quality of the images.

      if you don’t have a choice, i’d recommend dropping out of retina mode and use native resolution to record. this will be painful, but i think it is less painful than dealing with 4x the number of pixels, and scaling down on render.

      • Jake

        Hello! I’m glad I came across this blog, as I’m dealing with this problem now! How do I drop out of retina mode and use native resolution? What setting do you recommend for that? Thanks!

        • http://www.danieltharris.co.uk/ Daniel Harris

          You could try this small application, and set your resolution to a native, non-scaled, 2880 x 1800.

          Possibly even better would be to add a custom resolution of 1440×900, items will appear the same size as at “Retina” resolution, but with less detail.

          SwitchResX 4: http://www.madrau.com/whatis/whatis.html

          I’ve not tried the above yet but will need to myself at some point, as I also have a retina display, and scaling down for YouTube etc just won’t work well as mentioned in this post.

  • Toolie

    The best audio editing software I’ve found is Sony Sound Forge; their Audio Studio version is perfect for editing audio for websites and screencasts, and it’s affordable. You can use Audacity which is free, but in my experience, it lacks some of the conveniences and choices that Sony has in their software. I’ve done over 150 screencasts and webinar recordings, and Camtasia + Sony Sound Forge is the best combination I’ve found for Windows.

  • http://www.facebook.com/people/Lucy-Millan/100002599934027 Lucy Millan

    as for me,
    i prefer to record my screen using this tool http://www.protemac.com/keybag/, it’s
    simple and nice!) but thanx a lot!)