Review: ScreenFlow

In: Reviews

By Ben Chestnut

Published on June 3, 2008

We just recently announced the launch of an all new version of MailChimp. As part of our launch, I created a slick teaser video and demo videos of our all new interface, so that our customers (who are mostly web designers and DIYers) could become familiar with the new design (see the videos at mailchimp.com/tarzan). When we sent our announcement, we got more questions along the lines of: “Holy cow, what video capture tool did you guys use?” than we did about our product. So I thought I’d put together a quick tutorial on how we did our video demos.

First, some background information. I’ve always wanted really slick, cool Flash videos of MailChimp—the kind you see on car or electronics websites, with fast-paced “action shots” of the product spinning around in 3D, panning and zooming like crazy, and with fancy callouts and audio. But MailChimp is an online web application, not a product you can hold in your hand, and spin around to show all the different views. If you run a web app, you know what I mean. All we’ve got are boring old screenshots. Which is why most demo videos of web apps look so amateur.

Putting together slick, professional-looking demo videos of web apps has traditionally been extremely expensive and time consuming. You’d have to have some sophisticated video editing software, and retrace key screens into vector format in order to do fancy zooms and pans. If you didn’t have that kind of budget, you had to use simple video capture tools. But the problem with these tools is you really have to script and time everything perfectly. If you stutter or get some server lag halfway through the demo, you have to start all over. Plus, the end result was just a boring video of someone clicking around on a screen.

Then came tools like Adobe Captivate. We’ve used Captivate in the past, and loved how it works more like Flash or Director, where you get timelines, layers, and “sprites” instead of a linear movie. Makes editing way easier. I highly recommend Captivate for very involved tutorials or training demos, particularly as you can set up little pop quizzes inside your demo, to “train” your viewers on how to use your product. But if you want a slick, fast-paced, professional demo video, that doesn’t require a huge budget and a video editing team, the choices have been limited.

Vara Software to the rescue. They just recently introduced ScreenFlow, which is an amazingly simple piece of software (for an unbelievable price of $99). It’s Mac only, but it’s worth going out and buying yourself an iMac just to use for your product demos. Seriously, it’s that good.

What Makes It Cool

The coolest thing about ScreenFlow is it lets you record your screen, and combine it with your Mac’s built-in iSight camera and microphone. Your screen capture is placed on one layer, and your iChat window is placed in another layer.

So you get a picture-in-picture effect, where viewers can see you actually using your product while you narrate. Other video capture tools let you overlay audio tracks, sure. But nothing beats video and sound. You can produce demo videos like Apple, and their iPhone guy (you’ll have to buy a black turtleneck and get yourself a manicure first). Of course, if you’re camera shy you can turn off the video capture.

Thanks to Apple’s native Quartz graphics system, the video capture is done in high enough resolution that you can zoom in, pan, and rotate the screen at a slight angle without any loss in image quality. You can even add drop shadows and reflections to your videos.

The real power comes from Screenflow’s callouts and video actions.

Callouts put focus on your mouse, so you can draw the viewer’s attention to exactly what you’re clicking on. We hired the IconFactory to redesign our icons, and you bet I wanted to zoom in on those babies to show ‘em off. Oh yeah, and I wanted users to make note of the icon changes.

When you insert a callout, you tell it how big you want the circle around the mouse to be (the “Border”), how much you want to “zoom” inside the circle, and you can blur everything else around the callout. A really nice touch is ScreenFlow allows you to tweak the build-up and build-out duration, so that you can achieve a gentle effect when your callouts appear and go away.

Once you’ve inserted the callout where you want in your video, you can stretch it out or shrink it in your timeline.

Video Actions are my favorite part of ScreenFlow. These let you do really cool stuff, like make the screen zoom in, or pan to the side. You can even make the screen rotate with a 3D action (okay, that’s bordering on cheesy, but I just thought I’d mention it). The zooming and panning are nice, but one trick I learned is you can time the zooming and make it very slow.

Simply insert a “scale up” video action (making it zoom) into your timeline. Then you stretch the video action really long, so that it takes a long time for the video to complete. You just created a Ken Burns Effect on your product demos! Voila! No more boring still shots of your web app.

Tips for Recording Your Demo

Putting together a movie demo of your web app is not a difficult thing to do. Recording yourself clicking on stuff is a no-brainer. It’s really all about the preparation more than anything else. Here’s my process.

1. Dry Runs

It helps to do lots and lots of dry runs of your demo. Just wing it without any scripts, as if you were showing off your product to your mother, sitting right next to you. If it helps, start the demo with, “Hi mom…” then start talking. Your office mates will think you’ve gone nuts, but it works. Dry runs will give you an idea of how long the demo will be, what you need to cover, and what you should include in your script.

2. Script it out. Sort of.

After my dry runs, I usually put together a rough outline of what I want to cover, then I fill in the blanks from there. I don’t like watching overly-scripted videos, because they tend to use words that normal people don’t use in conversations. Like “simply navigate to your…” C’mon. Real humans say, “just click this thingy here.” A totally scripted demo that sounds natural and professional is tough to do, but if you have the skill, go for it. If you like to “wing it” like I do, you will inevitably goof. A lot. I’ve gone 5 minutes into a /files/includes/10.css minute demo, then sneezed. Or the phone rang. Or my browser crashed. It was frustrating at first, but then I started to save all these recorded goof-ups, and put together a “bloopers and outtakes” reel afterward. It’s one of the most viewed movies on our site. Which reminds me—turn off your phone, cell phone, close the door, and de-activate all the screaming robot monkey robots in the office.

3. Clean up your computer.

Clean up all the icons from your desktop. I just quickly throw all mine into a folder called “clutter” then I take them back out later. You don’t want people to catch glimpses of private stuff on your desktop, like that viral video of the dude getting kicked in the crotch by his kid (unless you want to do some subliminal marketing). For example, you can plant ideas into viewers’ minds, by putting a Word doc on your desktop called, “Letter from Steve Jobs” (Wow, you’re friends with Steve Jobs?!? You guys are huge!) Seriously, clean up your desktop clutter, and put up a neutral desktop background image. If you know your videos will be embedded on a white web page, you might make your desktop solid white, to make the movie blend in. You get the picture.

4. Choose your host.

Eventually, you’ll need to host these videos somewhere. You could just host them on your own website, but your IT person will probably have a heart attack about the bandwidth. We went with blip.tv to host our videos, because they convert and compress them to .FLV format (Flash video), and they keep them in high resolution. We also opted for their “Pro” account, which gives you preferred upload queue status, and hopefully prevents any embedded advertising in the videos. Soon after we chose blip.tv, we heard that YouTube had begun to offer high resolution uploads too. So that might be worth a look. One nice feature with blip.tv is it automatically pings Google, and can send it to your blog whenever we upload a new movie. A little extra findability never hurt.

5. Use Multiple Desktops

Instead of having tons and tons of windows open on your desktop, or making viewers wait for your web app to refresh and load pages, use multiple desktops (Spaces on the Mac). While you’re running your demo, a simple keystroke will make your entire screen transition to another desktop to show your other window, already open and waiting. It’s a very cool effect, and “saves film”.

Polish it Off With iMovie

When I created the teaser video for the new MailChimp, I created a series of small ScreenFlow movies, and then imported them into iMovie. From there, I could add a soundtrack, and trim out unnecessary footage. Some of my videos were shot while our product was in beta, and undergoing heavy server load testing. There were clips that had long page loading times, and a few “404 page not found” errors. Snip snip, thank you iMovie! iMovie’s also got some nice transitions you can use between segments, and a boatload of background music, which are great for adding some extra sizzle to the movie.

Summary

Thanks to Vara’s ScreenFlow software, demo videos of web apps don’t have to be boring, flat, “moving screenshots” anymore. Throw in some creative video actions and some iMovie kung fu, and you can generate very professional looking, “TV quality” demo videos that would make Steve Jobs jealous.

Related Topics: Technology, Planning, Motion Graphics