Screencasting Setup

Chris Coyier //

I get a fair number of questions about how I record the screencasts, so I thought I'd do a post on it that is both of interest now and that I can refer people to later.

Hardware

Mac

I have a 24" iMac and a second 24" monitor to the right. Screen real estate is valuable to me as a designer/coder/media consumer/telecommuter. Each of those hats I wear requires a bunch of open windows and sometimes I feel like I still don't have enough. The second monitor is very handy in screencasting as we'll see later.

Rode Podcaster

The iMac has a built-in mic, which is fine for quick Skype chats, but just doesn't cut the mustard for quality for a screencast. Obviously my screencasts aren't super-professional edited productions. My version of an intro is having a special desktop wallpaper! But, if you are going to listen to me talk for 20-60 minutes, sound quality is a big deal.

I have a Rode Podcaster microphone, which does a great job. I have a shock mount for it, which attaches to a little mini boom-stand I set on my desk. This allow me to get my mouth right up on the mic without needing to use my hands.

This is what the setup looks like:

 

Software

iShowU

To record the screen and sound, I use iShowU. It's dead simple. I really like it. All the options you need, none of the confusion.

Stomp

ShinyWhiteBox, the makers of iShowU, make a companion product for compressing video called Stomp. Also very nice and dead simple to use. I believe they have package deals if you buy both.

Adobe Flash CS3 Video Encoder

I use this to convert into Flash video format (.flv) for display on the web.

 

The Process

1. Change screen resolution

The first thing I do is change the resolution of my main monitor down to 1024x768 and set my custom wallpaper. I like just showing my entire screen, dock and menu and all. In a sense, it might be a little distracting, but I like people to see that this is my exact real working environment. I don't have some pretty sanitized sand box I'm doing this stuff in, this is real every-day coding.

2. Get hardware set up

As you can see in the picture above, I kinda push my second monitor out of the way and get my microphone set up in a comfortable position. Then I plug it into a USB port on the computer itself. I've tried keeping it plugged in all the time to my USB hub, but I get WAY lower volume out of it that way. This mic needs power, and it needs a direct input to get it.

The room around you is also kind of "hardware". I get myself a glass of water, shut the door to the room, make sure the neighbor isn't mowing the lawn, that kind of thing.

3. Get software set up

I quit every bit of software that I'm not intending to use in the screencast, leaving open only the important stuff. Usually, Photoshop, Coda/Textmate and iShowU. I verify all the settings in iShowU. At this point, the second monitor is already useful, as I can keep that window open on the second monitor keeping my main work area clean.

My settings for iShowU:

  • Record Microphone Audio (full volume)
  • High Quality Audio
  • Microphone Input: Rode Podcaster (and check and make sure levels are nice and high, sometimes have to pop over to System Preferences and make sure input volume is good)
  • Slow frame rate: 6
  • Normal frame rate: 6
  • Quality: 4th tick mark, leaning toward High
  • Compression: Apple Animation
  • Set recording area to the entire main screen (1024x768)

Record

Hopefully by this time, I have gone through in my head a few times how I hope this thing to go down. Main points I want to make, what the final product will be, minor details, where the advertising segments are going to be if there are any, etc. When I'm all ready, I press record and just go for it. A lot of times I can get it done in one take, but if I need a break, I just go over and press "Finish" on iShowU and start up again when I'm ready. If a majorly blunder (minor blunders I just leave in as I think it adds another element of realism), I just hit "Abort" and do that segment over.

Post Process

The first then I do when I'm finished is make a folder called "RAW", put all the movie files in there, and make a duplicate. That way no matter what I do with the second copy of files, I always have the original recordings to go back to.

If there are multiple segments, I stitch them together in Quicktime Pro. All I do is open the first one and move the scrubber point to the end of the video. Then open the second, select all, cut, and paste into the first video. Repeat for all the rest of the segments. This is a peculiar thing in Quicktime Pro... After doing this, the file size of the #1 video you paste into doesn't change file size (like you would think it would). I'm pretty sure it just kind of "virtually" stitches these files together, so DO NOT delete those other ones.

In my particular process, my next step is to use Stomp to create two different versions. First, I use the built in setting to create the .M4V file for the subscribers. This a very high quality version, works great on AppleTV and in iTunes. The .M4V ends up being 960 x 760px. I would just shoot at that size, but I like the little extra screen real estate and the scaling down doesn't seem to effect quality much. Second, I make a .MOV file that I scale down to 800 x 600px. This is what I THEN convert into a Flash (.FLV) file for the web. I find that if I do my scale-down conversion in Stomp and then convert to Flash, I get MUCH higher quality than having the Flash Video Converter do the scale-down. The Flash video is still worse quality and higher file size, but it's not too bad, and is way more compatible for people on the web than Quicktime embeds.

Uploading and Embedding

So now I have my two versions that I offer, the .M4V and the .FLV. The kind folks at IGN host my videos for me, so I upload them there. Video is pretty bandwidth-intensive, so I wanted to keep it off my main server. If you think your server can handle it, you can use that. Otherwise, Amazon S3 has pretty cheap hosting. I have a tutorial on setting up and hosting a file on S3.

Now I create the web page that will be the permanent home for the screencast, and will display the Flash Video. I use the JW FLV Player, which I think is a fine player. I use SWFObject to embed the player on the page. This keeps your code standards-complient and offers a TON of other advantages, which I go over in detail here. This page not only displays the video itself, but the title of the video, a short description, links from the video itself, and a link to download the higher quality version (for free!).

Creating the RSS feed entry

I offer an RSS feed for the videos, which is what the .M4V file is for. This feed needs to serve double-duty. One, be a valid RSS feed for people to subscribe to in whatever feed reader they wish. At the moment, all that feed contains is a title and a link to download the video, nothing fancy. Two, the feed needs to be iTunes-Compliant, because the screencast also appears in the iTunes Store podcasting area. This means adding a bunch of extra tags in the XML just for that. This is what an XML entry looks like for a screencast:

<item>
	<title>#35: Intro to jQuery 2</title>
	
	<link>http://css-tricks.com/videos/css-tricks-video-35.php</link>
	
	<itunes:author>CSS-Tricks</itunes:author>

	<itunes:subtitle>Intro to jQuery 2</itunes:subtitle>

	<itunes:summary>Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too!</itunes:summary>

	<enclosure url="http://vnfiles.ign.com/ects/css-tricks/VideoCast-35.m4v" length="69494950" type="video/mpeg"/>
	
	<pubDate>Thur, Sep 11 2008 12:00:00 GMT</pubDate>
	
	<itunes:duration>24:55</itunes:duration>

	<itunes:keywords>css, web design, html, tutorial</itunes:keywords>		
</item>

I have to write all this by hand, because I've never found a good tool to do this for me in just this perfect format. I may do a screencast eventually on hand-writing RSS XML files...

So that's about it! That's what I do every week to record these screencasts. It's a good amount of work but it goes pretty quick now that I've got my workflow all figured out. They aren't masterpieces by any means, but they do seem to genuinely help some people and I get a kick out of it so I definitely plan to keep doing it.

 

Honorable Mentions

Sorry, I can't help with PC suggestions as I have zero experience there. I have heard Camtasia Studio is good though.

Although not a part of my current screencast workflow, VisualHub is a badass video conversion tool that I use often for other video-related projects.

If you need mouse-highlighting, click-highlighting, and a keystroke-shower, Mousepose is excellent.

In many of my screencasts, I use Coda. Coda is amazing for development, and works great for the screencast because it shows the file structure of the project as well as the text editor.