Welcome to Freshview thoughts, a place for our ideas and ramblings about building and supporting a popular web application from Sydney.

Stay in the loop

Dig into a category

• Buzz or Press
• Freshview News
• Our Software
• Random Thoughts

Search all posts

Our products

The easiest way for designers to send email newsletters for themselves and their clients.

How we create walkthroughs and screencasts

Posted by Mathew Patterson on May 1, 2007 4:11 PM

Recently we released a series of short, narrated videos about Campaign Monitor. They are designed to give people quick overviews of how different features work, and what is possible. This post will detail the process we went through to create them, the tools we used and what we learned while doing it.

Getting started

We kicked off by doing some quick research to see what was out there, and how other people were doing it. A couple of the examples we check out were the Macromates TextMate screencasts and 37Signals' Basecamp overview.

Then we sat down and tried to set down what we wanted to have in the final product. The parameters we came up with were:

• The final size should be close to actual screen size, to make sure everything is clearly visible
• It should be a narrated video
• The final format should be Flash video for widest compatibility

Given those goals, we check out a bunch of different options for software to make it happen. After a few trials, we settled on this line-up:

Hardware
Apple iMac 24" — My existing machine
Logitech USB Desktop Microphone — A cheap but effective microphone that did well cutting out background noise.

Software
iShowU — a great OSX application that is easy to use, but has a ton of capturing options.
Quicktime Pro — Used on OSX for simple editing and clip combining. Also good for transcoding in some cases
Flash Video MX — a Windows application not actually associated with the Adobe / Macromedia product, but a fast and simple way to create Flash videos with controls from the source movies.

The recording process

With the technology setup, and a few tests completed, it was time to record the real thing. We sketched out the basic outline of what we wanted to cover in each video, and had a practice run through. The practice runs were are a good way to find out what preparations were needed for each video, including:

• Setting up the browser to the size we wanted for recording, as well as removing unnecessary toolbars.
• Creating a test account in Campaign Monitor with the right information setup
• Building the lists and emails we needed for demonstrating

We created a new user on the iMac, so we could leave the browser setup and the desktop clear, ready for use, which saved a lot of time. Below is a screenshot of how the windows were arranged during recording.

To the right of the browser is the iShowU window, which is doing the actual recording and encoding. Below that is a text document that I used for notes about what I wanted to focus on, URLs I needed to remember and so on. In iShowU we had setup a preset that contained all the settings for our screencasts. We had settled on Apple Animation as the encoding, as it produced a high quality recording at a reasonable size. The screenshot below shows all the options we were using.

Finally, it was time to record. Several of the videos were recorded in one take (after quite a few attempts!), which helps it to flow through naturally. I did have to restart many times due to getting off track with the narration, or forgetting to include a particular segment. In some cases, where the videos were long and had a natural break point, I recorded in two sections and joined them later using Quicktime Pro, using this helpful Automator Workflow.

After a viewing to check the content, the final recorded file was opened in Flash Video MX and exported as a Flash video complete with controls. We tried various different settings to balance quality with file size, keeping in mind that our target audience tends to have reasonably large monitors and decent bandwidth.

Once we had sorted out the process, each video could be completed in a couple of hours from working out a basic script to the final Flash video.

General tips

Here's a few things we learned during the creation of our videos.

• Make sure you turn off your phone before recording...
• and turn on the microphone!
• Record in the highest quality you can, in case you want to re-encode later to a different format
• When you are talking on your own, you need to feel like you are exaggerating your voice just to sound natural
• Don't forget to reset your browser history and product settings so that you see what are expecting to see when you record
• For parts of the narration that are critical, it can help to have a script to read

No doubt we'll discover better ways to do this in the future, and we'd love to hear from you about the software, hardware of techniques you have come across for making screencasts. Leave us a comment!

6 comments so far