How to capture and present screencasts but still have code legible?

Question

I would like to find out from other's experience what is the best way to capture screencasts that include code and cuts to the program in action, and then present those screencasts online so that the code is still legible, and ideally making the most efficient use of display real estate.

What capture tools work well for this? I've tried Camtasia (PC), SnapzPro (Mac), and Screenflow (Mac) all with varying results.

What screen resolution / code editor text display settings work well? Keeping in mind I'd like to be able to cut over in real time to show how the code works -- a website built for 1024x768 resultion might not fare well at 800x600.

What is the best encoding for this type of screencast prior to uploading/converting to a hosting streaming service?

Lastly, what is the best way to present these online? I love the social / timeline tagging of Viddler, but the image quality of Vimeo seems to render text more legibly. I've also been tempted just to use Camtasia's FLV export and host them on my Amazon S3 Account.

What has worked for you?

Answer 1

For reading text clearly, the newer versions of Camtasia have the ability to zoom in and out that makes seeing the small stuff, like text, just great. I use this feature with my own screencasts - Camtasia will even do this for you (and does it fairly well) as you click or start typing it will zoom in and then zoom back out once you're done.

Anyway, I know you mentioned that you've tried Camtasia, but I wanted to make sure you didn't overlook that feature, since IMO it is the best for making small text legible yet still see the larger picture of what is going on. You can't beat that.

Answer 2

I'd recommend checking out ShowMeDo, a screen-cast hosting company that specialise in screen-casts on learning programming. There are detailed tutorials on how to set up Camtasia specifically for code samples.

Answer 3

Wink is worth considering. It might require more time to learn and more time editing after you're done recording but because of the way it takes screenshots instead of video (it still looks like video when it plays), and allows you to edit things like mouse cursor position and add explanation boxes, buttons, titles, etc. it can create presentations with a smaller file size.

See some of the examples on this page to see what you can do with it.

Answer 4

Regarding screensizes, in ShowMeDo and for professional work I record at 800x600 or 1024x768 and transcode down to 640x480 - the text is still clearly legible.

You must use a high bandwidth for your resulting videos else they get smudgy. 2000kbps for video and keyframes every 30 seconds works well for Flash 7 and above. Expect 2-4mb per minute of video.

I use CamTasia for recording and editing. Their zoom (and auto-zoom) is really nice, you can also grey-out most of the screen and focus just the important areas, also you can apply highlights and use arrows - these really help to make the important areas stand-out.

Add in text call-outs (but don't read them, they're backup material for the viewer's eyes) to reinforce messages.

You can cut between live-action, websites and images easily, just use 1-second fades. Don't worry about switching resolutions in the source material, I've mixed 1500x768 with 800x600 with fades, it works fine (see IE8beta1 vs FF3 video on my examples page).

Examples of these techniques using CamTasia can be seen on my examples page at procasts. In ShowMeDo there's a whole bunch of examples of different techniques, platforms and tools made by over 100 open-src authors.

Answer 5

Optimize your window making it small as possible. Close unnecessary panels BEFORE you start recording. See?

Answer 6

Wink and DemoCreator(will zoom in feature) can record onscreen with "take screen shots" mode, but they mainly produce the Flash movie instead of video format. So it would not be easy to share on video sharing website.

Camtasia 6.0 can publish HD video, and you may use the smart focus feature to make your recording area clear.