The Compleat Screencaster

Those who may have tried to GTalk with me over the preceding few weeks would have seen the cryptic status message: I am CASTING a SCREEN – and many did then question me about it, thus breaking the concentration I had tried to muster in said activity, rendering the whole thing superbly counter-productive. For screencasting is a remarkable concentration sink, the mere six minutes of footage that resulted having taken something like thirty hours – yes, thirty bloody hours – of effort to birth. Fortunately, the experience has blessed (ha!) me with a surfeit of knowledge in the area that I will now share with you, in the hopes that all those setting out on similar projects may find them completed in a mere quarter of the time.

Before then, I shall turn off the Tychometer with which I am adding ludicrous verbosity and italicisation to all my text. click. S’better. Right. Note that if you’re looking for advice like “know your audience” and “have a beginning, middle and end”, you’ve come to the wrong place, because I’d hope you know that kind of thing already.

• The vast majority of the time was spent making differing versions of the final screencast. The two primary reasons for this were:
  1. Practise, demonstration, feedback. This is a good reason. I mocked up early versions of the screencast (usually without speech) and ran them past others (bosses, colleagues, and examples of the target audience) for advice. Given that the screencast was to go on the main site, this was pretty vital. It also meant that some vital things I had forgotten were included, and other pointlessness was excluded – hence cutting the original ten minutes down to a much snappier six.
  2. The ground shifting under me. This is a bad reason. As I say in the screencast, I’m recording it on an internal staging server – a necessity since it was pre-launch. (It would have been nice if the server was able to fake its own URLs for the purposes of the screencast, but I’d already taken up far too much of the dev team’s time and they were busy with far more important things, like fixing real bugs. Call this a lack of planning on my part.) Anyway, at least one of the screencasts I’d made was a candidate for final, before realising that what I’d recorded wouldn’t actually look like that in the final release of the service. Mark this down to a lack of communication with the rest of the team.
• Coming up with the right dimensions for the movie was tough – I had to make a compromise between the average Ning page size and the available viewport area in a browser on a 1024×768 screen, bearing in mind the height added by the player controls. I settled on 816×550 – narrower than most Ning system pages, but wide enough to fit the important details.

• Most of the initial effort put into recording was made on my office Mac, until I realised that the product I really should have been using – Techsmith’s Camtasia – was a far better bet, and Windows-only. Up until then I’d been using Snapz X Pro on the Mac, which recorded into QuickTime’s “Animation” codec. The only thing I could find that would edit this without utterly ruining it was SimpleMovieX, a fairly nice bit of shareware only hampered by an occasionally-frustrating interface and a continual habit of crashing immediately after a save. (iMovie and Final Cut Pro were both excluded for their insistence on transcoding to a far fuzzier format.) I’m sure there’s some other Mac software that would have done the job better, and if anyone feels like pointing it out, they’re welcome. Until then, those recording screencasts of Mac software would be well-advised to use Camtasia with a VNC session.

  Camtasia is a genuinely lovely bit of software, and if you’re doing this professionally then it’s well worth the $300 price tag. It’s an all-in-one recording and editing suite which can publish to Flash, AVI and more. It has a bunch of nifty features I didn’t touch, such as “call-outs” (little pop-up bubbles that explain things). It had a couple of irritating little quirks (if you’ve added a soundtrack in chunks to the video timeline, then want to extend the video early on in the piece, the video gets shunted along but the accompanying audio doesn’t) but mostly it was more than adequate and made it very easy to shift, cut and add bits of audio and video until I was satisfied. I’d also tried Macromedia’s Captivate, but that’s more for taking a bunch of screenshots and animating them in a rather fake (but helpful) way – not so suited for what I had in mind.

  A couple of additional Camtasia-specific notes:

  • For some reason, the default setting for publishing to Flash is to have it wait for the whole movie to load before it starts playing. Sod that. If you’re recording at, say, 32kbit/s MP3, the whole bitstream will come in under 128kbit/s, so anyone on broadband will be fine to start playing immediately.
  • I didn’t get the point of audio track 1, which won’t let you edit nearly as flexibly as track 2. Unless I was missing something, track 1 won’t let you easily delete and shuffle audio clips about; track 2 will. So I made sure to always record to track 2.
• I recorded both the audio and video in short cuts of about thirty seconds each – that way, if I got something wrong, I only needed to redo the last thirty seconds. It also made things much easier to chop about.
• The main problem with doing everything in short cuts rather than one long recording is that you have to worry about continuity. It’s completely vital to:
  1. Keep the window you’re recording in the same size and place through the entire recording session
  2. Finish a shot with the mouse pointer in a location which is easy for you to move back to for the start of the next one – the same applies to page scrolling
  3. When you click a link, don’t move the mouse pointer at all until the next page has loaded – this makes it much easier to snip away long loading times
• It’s okay to cheat as long as it doesn’t affect the main point of the screencast you’re making – in this case, that developing new Apps on Ning is speedy, easy and free. The most obvious way I cheated was by magic-pasting the lines of code into the editing area (done with a nifty little system-tray clipboard applet called Ditto). I had to do it this way, because it halted a nasty race between screencast production and my rapidly-disappearing sanity. The problem is that I can’t type for toffee, especially not at speed, and almost every single attempt to do so was filled with panic, multiple typos and repeated syntax errors when I hit “View App” only to be greeted with the results of yet another missed comma. I’m sure that others can do it fine, but it put way too much stress into the recording process and ultimately it’s not really needed. This is a demonstration of Ning, not my typing. However, I also realise that it distracts from the idea that the performer is creating from scratch, thus dissociating from the essential everyman. Once again, I welcome any discussion more constructive than “haha, you cut and pasted, you LOSER”. (Yes, Tim, that means you.)
• That said, there are other speedy behaviours that should be eschewed in order to maintain the focus of the audience. Bear in mind that most of the time the viewer’s eyes will be following either (a) the pointer or (b) the text cursor, so jiggling either about like Ray doing the gothic dance is not a great way to maintain attention. (Hence the earlier tips about mouse pointer continuity.) Mouse strokes should be paced and firmly-directed, if that doesn’t sound too pretentious. Similarly, sudden use of the scroll wheel can be a bad thing – better to visibly grab and drag the scrollbar. (I wasn’t great at this, the main problem being throwing the mouse off the right-hand side every time I wanted to paste something with Ditto.)
• Narration took a few attempts – it wasn’t easy for me to speak in a slow and clear way that didn’t sound incredibly dry. It took repeated coaxing by Gina before I found something approaching the tone we wanted: Clear, friendly, enthusiastic. (Not saying that I nailed it, just that what I ended up with was a lot better than the start – it’s still a bit too fast, and mumbly in places.)

And that’s about it. I have a few more screencasts planned to demonstrate other Ning wonderfulnesses, and I’ll probably gather a few other eggshells of wisdom for you which I then may update here, if I can be arsed. In the meantime, the last bit of advice I have is: If you’ve spent so bloody long on a screencast that you want nothing better than to wreak terrible revenge upon it, then you may find it quite satisfying to do so.

UPDATE: Many thanks to Jon Udell for his kind words and additional comment. I feel rather guilty for forgetting to link to Jon in the piece above, since his various articles on the topic were invaluable in the early stages of working out how to do this. I wish I’d been less insistent on trying to do it on my work Mac and used Camtasia from the start, as he advises – it would have saved a whole lot of time. Also, he mentions something else I forgot – Camtasia’s nasty habits of outputting ‘casts with rather choppier audio than you get in the preview; his advice in dealing with it is excellent, and I hope that Techsmith fix this bug as soon as possible. Thanks, Jon!