Matt Radel writes:
Hey guys, kudos on the new [Highrise] intro videos you just unveiled. Very well done. I’m going to be working on some for the new app my company just finished, and I was curious if you could drop any wisdom. I’ve got Snapz Pro and Final Cut Studio 2 at my disposal, but I’m really not sure where to start. Did you guys follow a tight process, or just kinda wing it? Any info you could give a would be screencaster would be swell.
Thanks Matt. Here’s the process I used to create these screencasts:
1. Write the script.
2. Record the voiceover in Logic Express and export as MP3. Logic Express is helpful for moving tracks around, evening out volume levels, compressing tracks, adding background music, etc. Leaving extra space at the beginning helps ensure you’re ready to shoot when the audio begins.
3. Create a fake account flush with data so the video shows how an account looks when it’s active (but without revealing anyone’s confidential data).
3. Shoot the video while listening to the voiceover track. I use Snapz Pro, shooting at 15 fps, for this. (This step can require some adjustments in spacing on the audio track to make sure things sync up properly.)
4. Combine audio and video in Quicktime Pro. Export as .avi file.
5. Import the .avi file into Camtasia for final editing, adding zooms and pans, exporting to Flash, etc.
Running through this process in small chunks this way means you can solicit feedback from others along the way and retrace your steps relatively easily. (I imagine it’d be awfully frustrating to spend forever nailing a perfect combined audio/video take only to find out that the script needs to be changed or some other tiny thing in the video is off.)
Variations
Sometimes the order switches. For the recently made video demo on creating a page in Backpack, we needed some fades between screens that had to be added at the end. So, for that one, I shot the video first and then added narration after the transiton fades had been added to the video. It came out alright but I prefer nailing the audio first and then shooting the video second, if possible.
Camtasia
I run Camtasia, which is PC only, on Parallels on my Mac. It’s a thoughtful app but running it on a Mac is rather unwieldy/slow. That’s why I prefer to do everything I can in Mac-native programs before entering Camtasia.
(Btw, where’s the killer screencasting tool for Macs? One that can handle zooms and pans and do what Camtasia does? Seems like there’s a big opening in the market there.)
For the marketing-oriented videos, we use the zoom/pan feature (where you can slide around the focus of the screen) and add in some background music too. For the detailed tour/blank slate videos, we go with full size screens and no music.
Narrating the videos
It’s an interesting challenge to try to find the right tone when narrating videos. Too serious and you make the product seem somber. Too enthusiastic and you come across overly salesy, like ‘ol Gil on The Simpsons.
I suggest aiming for the tone of how you’d talk to a friend. Something positive sounding but still conversational. Don’t be surprised if it takes a lot of takes to get it right.
Just for kicks, I recorded one version of the Tasks video narration with way over-the-top enthusiasm (think Monster Truck Rally commercials). You can listen to the MP3 here.
Update: TechSmith, the makers of Camtasia, will “soon begin” Mac development. You can enter your email address there to receive updates. Troy Stein, Camtasia Studio Product Manager, writes:
Camtasia for the Mac under way. Its being built from the ground up. New code, new UI, new workflow. Not a port over to the mac. We hope to have it out by the end of this year. If you (or your readers) care to help us beta test it later this summer, shoot me an email at t dot stein at techsmith.com (email obscured to minimize spam).
[tx Chris]
jan korbel
on 11 Feb 08Thanks for the tips. The over-the-top enthusiastic version is really funny.
Kevin
on 11 Feb 08Thanks for the tips. The over-the-top take was hilarious. Do you use any special microphone equipment when recording the voiceover?
Dave Woodward
on 11 Feb 08Bam! Sunday, Sunday!, SUNDAY!! Get your tickets NOW!
Its interesting that you prefer to do the audio first. I’d always though that it was done the other way around. Maybe thats the “Getting Real” way of making screen casts?
Kind of like UI first design?
Derek
on 11 Feb 08I love the voice over…” It’s called out in RED at the top”... hilarious…
Good tips though and timely as we doing tutorial screen casts for our app this week using camtasia as well.
Thanks…
Steve
on 11 Feb 08Matt – I think the killer Mac screencasting tool you’re looking for is iShowU from the guys at shinywhitebox. It’s very natural to use, and miles ahead of SnapZ Pro.
Darren
on 11 Feb 08Have you tried using dix webplayer for videos? I think the quality is great compared to qt.
ML
on 11 Feb 08Do you use any special microphone equipment when recording the voiceover?
I use an Audio-Technica AT4040 microphone.
Maybe thats the “Getting Real” way of making screen casts?
Yes, this is def similar to Getting Real. Doing the script/audio first gives us something real to judge/edit quickly (and allows us to start over or change direction before too much time is invested).
I think the killer Mac screencasting tool you’re looking for is iShowU
Snapz Pro works fine for this stuff. It’s the post-production stuff in Camtasia (editing, zoom/panning, adding interactive buttons, exporting to Flash, etc.) that I wish I could do on a Mac-native app. Any suggestions?
Have you tried using dix webplayer for videos?
Nope, the videos are exported as Flash.
Mike Rose
on 11 Feb 08Nice guide. Re: Camtasia & competition on the Mac, the folks from Techsmith had a booth at Macworld (!) where they had no products to show (?), just managers and a few chairs so that they could talk to Mac users about what they should be offering for the platform (!!!).
I give them points for a great Windows product, an incredible attitude toward the promise of the Mac market, and the willingness to move carefully and produce something that will be appropriately crafted to Mac users’ needs.
Chris @ eQuixotic
on 11 Feb 08Camtasia for Mac is indeed on the way – check the comment directly from TechSmith:
http://www.equixotic.com/2008/01/16/techsmith-and-mac-when-will-these-two-kids-finally-hook-up/
It can’t come soon enough. You’re right, there is a gaping hole for a good Mac screencasting tool (let’s face it, Snapz Pro is a dusty dinosaur, and Ambrosia is apparently content to keep it that way). Let’s hope Camtasia for Mac is truly Mac-like and doesn’t take a lifetime to develop.
Chris @ eQuixotic
on 11 Feb 08Addendum: TechSmith is hoping to release Camtasia for Mac by the end of the year and are soliciting beta testers for this summer. So get on board! Instructions in the comment from TechSmith via the URL in my previous post.
http://www.equixotic.com/2008/01/16/techsmith-and-mac-when-will-these-two-kids-finally-hook-up/
Luke Sparks
on 11 Feb 08Thanks for the great tips. I have a question on the last step of the video process that was not really discussed, the embedding of the video in the website. I see it’s basically a Flash movie, but is it something you cooked up yourself, or did you use a ready-made player that you just pop the movie into and embed in the site?
ML
on 11 Feb 08I see it’s basically a Flash movie, but is it something you cooked up yourself, or did you use a ready-made player that you just pop the movie into and embed in the site?
Camtasia allows you to export your movie in an embedded Flash player. If you’re wondering, details on export settings: I use custom production settings and choose the one video template with the onyx theme. Output settings: Flash .flv @ 15 fps. I use “fp7_white_preloader.swf” as the loading movie.
Dave Tolsma
on 11 Feb 08Instead of camtasia for mac, how about Techsmiths other product Jing (http://www.jingproject.com/) which has a Mac download version.
Ryan Bergeman
on 11 Feb 08Holy crapoly the over-the-top version is hilarious!
Nice tutorial, thanks for sharing.
Veljko Roskar
on 11 Feb 08Try Screensteps on the Mac. No affiliation, but it seems like it may fit the bill.
jive
on 11 Feb 08Camstudio. Its free, it was bought out by Macromedia a few years back. Just be sure to get version 2.0
Version 2.1 took away features because Macromedia wanted to make the free product look weak.
Chris Coyier
on 11 Feb 08I JUST started shooting some screencasts for the first time: http://css-tricks.com/videos/
I’m using iShowU to capture the screen. A Rode Podcaster microphone, and just Quicktime Pro to put together the different chunks. I use Stomp (from the makers of iShowU) to compress at the end, but it doesn’t usually do much since I’m not changing the size, framerate or codec.
My first one I did some post-production of putting like “popups” throughout the video. I used Final Cut Pro for this. I liked the result but it made for a much longer process and (for some reason) lower quality. I couldn’t get FCP to export at a quality that matched the original capture.
Keith
on 11 Feb 08Having done 30+ screencasts for my company I cannot stress how important scripts are to the process.
A lot of people think the tools you use to create the screencast is the most important part of the process. They are dead wrong.
Everyone in my organization uses Camtasia. Everyone has the same mics, and roughly the same computer. The differences in the quality of screencasts between creators is pretty stark.
This was a great summary of the process Matt!
Rob Sherman
on 11 Feb 08A friend sent me this article and I was writing a response to him so I thought I’d include it here if anyone found it of value..
Well, I’ve always been a fan of Adobe Captivate, I now have version 3. If you screen capture first you go through the whole process and can narrate audio over slides and the amount of time spent on a slide is dictated by the audio. Think of something like an event timeline for audio as well as effect transitions. Captivate also keeps the file size small because it only records changes in the visual and actually animates mouse movements instead of trying to capture them too. The most common export is a Flash file (SFW) and can build out the HTML and flash audio/visual player for the UI as well.
I’ve done a number of these for various projects over the years and I’ve learned that if you do the capture first you can spend time writing script for what you’re doing on a single visual slide instead of trying to write out the entire script for the whole process – plus sometimes in the capture you realize that things change or are different then what you imagined in the scripting process.
For the workflow you outline here, it’s a lot of work with a lot of tools – if you have to make changes it could add a lot of time to the project. I’m curious if you’ve discovered changes that needed to be made, even falling back to the script and how much more time it may have taken?
Another reason why I like Captivate, you can do all the work in the same tool as well as have it auto-add pop-ups and call outs for mouse / menu click actions. If you flub audio on a single slide you can edit the audio, or re-record audio for a given slide along with script you type in the slide. What is also nice about the typing of the script in the slide is that it can be used for closed captioning purposes.
It also has other features like being able to use it for quizing users and step emulation (i.e. click start, click all programs, etc) – I think this is also what helps to drive the price up, but I found that the first time I had a client call for it, it paid for itself.
My two cents, of course your mileage may vary..
Joseph
on 11 Feb 08At Inventive Labs, we’re experimenting with scripted screencasts. That is, you run a script, and at the end of it you have a screencast.
For example, this movie was generated by this Ruby script. No human was involved at all.
Obviously we would replace the text-to-speech narrative with a real voice actor for any screencast we put out, not least because the robot suffers from the Uncanny Valley effect. But it does ensure that timing is right.
Peter Cooper
on 12 Feb 08Geoffrey Grosenbach of PeepCode (the Rails screencast site) has a great video called “Screencasting on the Mac” where he goes over some of the stuff covered in this post, but in finer detail. It’s really good. I just watched it last week, lots of useful tips! Unfortunately it costs money, but he’s done a really great job on it and it’s ultimately more useful than a written description if you’re serious about it.
Jordan Dobson
on 12 Feb 08That’s almost exactly the process I used for our Glue Demo Video: Add & Publish Content In Ten Minutes.
The only difference between our processes… is that I put together a rough outline first and then shot the video in chunks. From that I put together a rough edit of the video. I then talked over the video in chunks, little by little, eventually syncing everything up.
I think your method of doing the audio first is the way I’d go in the future. I’d bet there’s less pain involved matching video with the audio compared to matching audio with video.
Thanks for the info. I always wondered what your exact approach was.
Matt Radel
on 12 Feb 08Hey, thanks for responding guys! Great point to start with the audio. I was going to dive right in to the screen recording, but that makes total sense.
Armed with these crib notes, I can now venture into the world of screencasting wiser and much more dangerous. :)
Torley
on 12 Feb 08Thank-you for sharing your creation process! I really appreciate learning from your experiences. Video tutorials can be such a potent way to educate + entertain.
Pulling off over-the-top enthusiasm takes certain voices/personalities, but it can be done really well. For a notable example, check out Adobe’s legendary Russell Brown @ http://www.russellbrown.com
Peter Cooper
on 12 Feb 08I forgot to say earlier that I don’t see the benefits of doing audio first, although whatever works for the individual is good!
But doing the video first gives you lots of editing advantages. You can cut out mistakes, get things “just so” and then narrate it. Narrating to already performed actions is easier than performing the actions in sync to narration.
Stefan Seiz
on 12 Feb 08@ML Great job Matt. IMHO, in the Tasks Screencast for example, you are a tad too fast fomr someone not familiar with the product. Try to slow down just a little bit. Also, i recommend to use a tool like Mouseposé 2.app so the viewer can follow the mouse pointer much easier (and see eventual Key Kombinations etc.).
Megan Mahan
on 12 Feb 08Good info, Matt. For our tutorials, we also start by scripting and recording the audio. We’ve been using an iPod with the mic plugin to do all our audio recording which works out great.
Have you had any problems with Camtasia? We use it for our tutorial videos and have really been going through it with them lately. I need to research some alternatives because we’ve forked over way too much money for issue after issue. Maybe we’ll look into Adobe Captivate.
Vanessa Pagan
on 12 Feb 08I was so glad to see writing a script for your screencast as a first step. It’s one of the biggest things you can ever do to create a good training video. I’m glad to see the 37s crew preaching the good word on clear story development.
I like the idea of doing the audio first. I’ve found it really helps clients to get a firm idea of what’s to come in their screencasts and tutorials when they can hear exactly what will be in the finished product. It stops scope creep from coming in later stages of producing the video and lets the final production edits be less likely to be redone.
Mark Kaufmann
on 13 Feb 08Can I ask you why you didn’t just record your video using Camtasia and then merge your audio there?
Praveen
on 13 Feb 08thanks for such a good list.
JF
on 13 Feb 08Can I ask you why you didn’t just record your video using Camtasia and then merge your audio there?
Because everything looks worse in Windows. Screen capturing in Safari on the Mac is the way to go.
Megan
on 13 Feb 08Hey Mark,
That’s actually what we do (record everything in Camtasia and then merge the audio). They’re going to run our latest project through their diagnostics. They will be my heroes if they can salvage it.
Yoo
on 13 Feb 08Hi,
Does anybody know how to zoom and pan in captivate 3? It seems like the only function is the zoom function, which is pretty bad. I’ve seen cp tutorials where the functions is used but never explained itself. anybody knows how to get around this?
thanks, Yoo
Mark Kaufmann
on 13 Feb 08Thanks for the answer. The quality of the mov file I get from Snapz is good but when I convert to avi it looks like junk. How are you able to maintain the quality? I shot it in 15 fps.
JF
on 13 Feb 08Mark, you have to make sure the AVI has no compression, best quality, millions of colors. The AVI file will be massive (a few gigs quickly), but that’s how you keep the quality.
Rachel Maxim
on 14 Feb 08I’ve always used Adobe Captivate, and for the most part, I like it. It does the entire process from script to audio to screen capture and export. It is a little pricey, but it works really well. I haven’t personally tried panning and zooming in it though – that may be a limitation. There is definitely room for improvement. But overall it’s a great product, and easy to use. Unfortunately it’s also PC-only, as far as I can tell.
Rob Sherman
on 14 Feb 08@ Yoo: When you insert a Zoom object you have both a “Zoom Area” and a “Zoom Destination Area” the Zoom Area allows transitions, if you wanted to simulate a pan have multiple “Zoom Area” objects on the timeline but all your “Zoom Destinations” in the exactly same location, then just transition your zoom areas.. It’s not a glamorous solution, but it could work. Otherwise scripting that type of movement can be done by exporting your Captivate project to Flash and working within Flash to use something like a motion tween.
Ryan Hamilton
on 14 Feb 08ScreenFlow appears to be a great one stop solution.
Chris Cox
on 14 Feb 08looks like that opening in the mac market may just have been filled: http://varasoftware.com/aboutus/pressreleases.php?id=5
This discussion is closed.