Screencasts on the Cheap

I have never had enough money to afford decent video editing software or hardware. I’ve only been able to use the cheaper end of things. You know, the stuff that usually comes with a video card or DVD burner. The problem of course is that you get what you pay for. I’ve wasted hours trying to burn DVDs and mess with codec settings, usually to no avail. The whole problem domain is complicated and must be really hard to develop software for. You won’t believe how many times I’ve crashed video editors or created incompatible file formats.

Recently I had to put together a screencast with Patrick for SandwichBoard’s marketing site. We aren’t making any money yet, so we had to do things cheaply. Here’s the process we followed to keep our costs low but audience experience high.

We decided to use Mac OS X for most of our work. We did this for two reasons: things just look better on a Mac and OS X comes preloaded with some nice editing tools.

We started the actual work by writing our script. The script focused on the words I would say but we put short action phrases in parentheses to help us visualize what was going to happen on-screen. Since we’re selling something, we made sure to explain why each feature is valuable to customers and their profitability. (Consider reading SPIN Selling to get an idea of what I mean.)

Once we were comfortable with our script, I recorded the audio with GarageBand as a Podcast project. You don’t need an expensive microphone as long as you can angle it so that it picks up consistent volume and your Ts, Ps, and Ss aren’t annoyingly intrusive. I have a $20 Realistic mic I bought from Radio Shack about 10 years ago that I pointed down from above my mouth. For each voice track I created, I set the input to Channel 1 (Mono), enabled the Speech Enhancer, and set it to Male Narrator. I read through the whole script about twenty times but only ended up keeping about five takes. I didn’t keep any that I messed up on. I could have broken down my recordings into script sections, but I wasn’t able to keep a consistent tone, pace, and volume unless I read the script the whole way through. (Unfortunately, I’m not a professional voice-over artist.) While clicking around in GarageBand, I drank warm tea and water to keep my voice in-tune. Once done with basic audio editing, I exported the resulting file to be used in iMovie by using the Share Podcast with iTunes export and then converting the file to MP3 in iTunes.

The final MP3 eventually made its way into iMovie to be married with the video, but I had to actually record the video first. I listened to the MP3 as I clicked around. I really needed to have the sequence in my head so there was little delay, hesitation, or misdirection while recording the action. I increased my pointer size to something more reasonable in Mac OS X. The standard size is usually too small to track in a smallish screencast. Next, I navigated SandwichBoard with Firefox 2. I used the Web Developer Toolbar Resize Window feature to set the viewport to 915×675 (check Resize Viewport). I had to play around with the window resizing to get the content to redraw correctly in the browser. I used the Web Developer Toolbar Resize Display Window Size feature to make sure I was still at 915×675.

To record the screencast footage, we used ShinyWhiteBox’s iShowU. It’s a very capable and inexpensive screencapture program for Mac OS X. I used its iMovie HD (720×480) setting but turned off audio recording, set the Normal Frame Rate to 15, the Scale to 100%, Quality to Max, Compression to Apple Intermediate Codec, disabled Follow mouse cursor, and set the Capture Size to 900×675 (we don’t want the browser’s vertical scrollbar). I then positioned the capture correctly with the Edit Recording Area feature. I followed the MP3 as closely as possible until I had a take that would work as a good starting point.

Then we used iMovie HD to edit the video and audio. When you import media into iMovie, it converts them…poorly. It makes things NTSC-ugly. I used some unofficial hacks to import and export everything without sacrificing quality. One feature in iMovie that I found very helpful was the Pin Audio at Playhead to Video feature on audio snippets. It’s a great way to save time when moving things around. I also tweaked audio levels here too. One thing the iMovie hack post doesn’t cover is that we want to export compressionless AVI (for Camtasia). It also doesn’t mention that if iMovie does’t correctly export your video, you’ll need to export it in sections by selecting certain video portions and only exporting what is selected.

Once the video and audio were edited, it was time to move on to Camtasia for zooms and pans and Flash export. Because transferring 7GBs of AVI files is slow over wireless, I used my iPod to get them from my Mac to my PC. I did this by forcing my iPod into manual music management. (Don’t forget to delete the AVIs off your iPod, and use your Mac to do so. Otherwise, your PC may leave Mac OS residue on your iPod’s hard disk.)

Camtasia Studio is another editor we used. It’s particularly good at zooming and panning on any action that takes place. One little thing that’s frustrating is that the full-screen zoom in Camtasia isn’t right, so I had to manually set it to something that looked nice whenever I wanted to go wide-angle. Of course I maintained the video’s proportions with the appropriate check box. Any Flash movie you see today has an opening graphic that begs you to click to play the video. I created and imported a Windows Bitmap and set its duration to 1 second. I then created a callout on it that pauses when played and continues the video when clicked. We also wanted a closing graphic that users can click to sign up for SandwichBoard. I did something similar to the opening bitmap except that clicking sends you to our sign-up URL instead of continuing. I exported the video as Flash, used the One video player, Onyx theme, FLV format, Variable 2-Pass, set the Frame rate at 10, and only showed the duration and time on the controls. I unchecked all the other control options. We wanted things as sleek as possible. The other problem I ran into with Camtasia was that I would occasionally see flickering in the final Flash file. It had something to do with zooming and panning and video clip ends. I fixed it by doing a little bit of video cropping right before each flicker. Usually one to three frames did the trick. It got a little hairy with some zooms and pans though. The painful part about it was that you could only test the results after waiting for the Flash file to generate, which usually took 7 minutes. However, it was more than worth it. Camtasia took our screencast to the next level. It made it professional.

Although sometimes really fun, the whole process was tedious. By day four (today) I just wanted it all to be done, so it was good to have someone else (Patrick) critique what I was doing. This kept the quality bar high. It takes a lot of time to export and compress everything, so you’ll have a lot of time where you’re waiting on applications to do their things. (This entire post was written while waiting for files to be encoded or transferred during the final day.) My final-video to time-spent ratio was 1 minute to 8hrs or 1 workday for each published minute.

(You’ll be able to see the final result soon. SandwichBoard is launching!)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.