A Pragmatic Way To Record Screencasts
In the past few days I’ve been recording a few screencasts for NiftySchool.
They’re not too fancy (they don’t really need to be), but still require quite a lot of work.
I came up with a process that allows me to be reasonably quick at creating them.
So here it is, my seven step process to create a screencast:
Step #1: Record a raw demo version
I open up my browser and record my screen while demoing my app (or the feature I want to show). The result is usually awful, with many pauses and mistakes, but that’s OK because this demo video will be trashed later.
The resulting video may be 7/8 minutes long. It doesn’t matter, this will be only used as a foundation for the transcript, so make sure to cover all of the areas you want in the final screencast.
To record this I use QuickTime Player’s Screen Recording feature.
Step #2: Write the script
Using the video from step #1 as a guide, write the script/transcription for your screencast.
It’s important to use the video as a guide to write something that resembles what you would say while using the system.
I find that without step #1 I tend to write scripts that sound like articles which don’t sound natural.
I write my scripts using Google Docs.
Step #3: Proofread the script
Not being a native speaker, I have my transcript proofread by someone else, such as english friends or professional services.
This makes sure that there are no grammatical errors in my script and the writing style is consistent throughout the video.
Before sending the script to a proof reader I also usually time myself reading it to make sure that the end result will be of the right length.
I usually use http://www.proof-reading.com for proof reading documents.
Step #4: Record the audio
Once I get the corrected script back from the proofreader, I sit down, rehearse it a few times and then record it (audio only) using QuickTime’s Audio Recording feature.
It may take a few times to get it right, and you need to make sure the right pauses are inserted between statements, but I prefer to do this in one go.
The fact that you’re reading a script will make the screencast more fluid and professional, but try to not sound too canned.
I think it’s quicker to record it in one go than tinkering with audio editors to join multiple recordings later, and you get a fluency & consistency that you may not get in multiple takes.
To do this avoid your laptop’s built in microphone. An external directional mic will make a world of difference.
Step #5: Record a long version of the video
Now that the audio is sorted, I start with the video.
Given that screencasts are usually quite short, it may be challenging to capture the video in real time while playing back the audio track.
All sort of things can go wrong, and just a little of net latency can make you late for a given statement, playing catch up with the audio all the time.
I usually download the audio track to my iPhone and play it using the standard apple mic/headset.
This means that I can pause the audio track using the button on the microphone with my left hand, while recording the video with my right hand.
So the process is:
- Start screen capture on the computer (QuickTime Screen recording with no audio)
- Start audio track on iPhone
- Pause audio track every time I need more time to complete the operation being captured
- Restart audio track when ready to continue
- Repeat until the audio track is over
You will end up with a single video track which can be significantly longer than the audio track, but that includes everything you need to put in the screencast.
Step #6: Mix everything & reduce video length
This step, based on the audio and video track we have, is quite straightforward.
I just add audio and video to an iMovie project and start cutting the video to make it fit with the audio.
That means that you will remove all of the ‘pauses’ you’ve taken while capturing the screen (when you paused your iPhone playback).
You also have the chance to cut page load times, errors and so on.
This is really easy because you’re just deleting chunks of a long video and not importing and mixing multiple takes.
What wastes lots of times is tinkering with the tools: this process is designed to not waste time, and still get a decent result.
Cutting the fat from a single video track takes less time than importing multiple videos, aligning them, and so on.
Also, you have the fixed audio track (which needs not to be edited) as guide.
To do that I simply use Apple’s iMovie.
Step #7: Add intro/outro images & publish
At this stage, you already have a simple but effective screencast, in which your voice matches the recorded video, without pauses, errors or interruptions.
Just add into/outro images, transitions and any other effect you may like and publish.
iMovie allows you to export and publish in HD to youtube/vimeo etc, so there’s no real challenge here.
Conclusions:
While this process is quite simplistic, I think it’s a good start that allows your product to be better understood by your customer base, especially if you’re a small startup and want to quickly improve adoption of certain features.
Below you have a sample screencast produced using this method:
Should you have suggestions/improvements to this process, feel free to let me know.
Enjoy!
