How To: Screencast iOS apps (and possibly GIF them too)

More and more people have been asking how I make iOS videos and GIFs for Finer Things in Tech and 1Password, so I thought I’d answer with more than a tweet. You’ll need at least two of these things, three if you want to GIF:

  • Reflector for Mac – It turns a Mac into an AirPlay target for the iPhone 4S, iPad 2, and anything newer
  • Screenflow – If you want to spice up your iOS video with audio commentary or Michael Baysian explosions, you’ll need some kind of video editor. For screencast work, Screenflow is my favorite so far; it’s iMovie tuned specifically for making videos about software. Also: I linked the Mac App Store, though Screenflow has a “free” demo and you can buy straight from them, but I don’t recommend it. Their draconian licensing system is a poster child for buying in the Mac App Store
  • GIF Brewery (optional) – The only Mac GIF tool I know of (examples). It’s not quite iMovie for making GIFs, it’s probably more like QuickTime for making GIFs. But it’s good

Step 1: AirPlay your iOS device to your Mac

This is Reflector’s job, and really the special sauce of this whole setup. Fire it up, but note that it doesn’t actually do anything on your Mac so you won’t see anything but its Dock icon. Reflector just works some networking magic to turn your Mac into an AirPlay target on your WiFi network. Optionally, go to Preferences to change the device name that Relector broadcasts.

Next, unlock your iOS device, double-tap the Home button, and swipe right to find the AirPlay icon (on iPad, swipe once. iPhone, twice), which looks like a TV that landed ass-down on a triangle. Tap the AirPlay button, select your Mac from the list of targets, and then enable the Mirroring option that appears just below your Mac’s name.

Your iOS display should pop up on your Mac, and everything you do on iOS should get mirrored on your Mac with a pretty decent frame rate. Note that a blue AirPlay bar appears temporarily at the top of your device to let you know you’re being watched. You can also customize some display options in Reflector under the Device menu, such as whether it shows a device frame or locks to landscape or portrait orientation.

Step 2: Do stuff and record it

This part’s mostly up to you—everything you do on iOS will be mirrored in the little window on your Mac, so go nuts. Just don’t make the mistake I did for my first couple videos—you don’t need your screen recording software yet.

Once you’re ready to start recording whatever you want to demo and the blue AirPlay bar disappears (because, honestly, who wants to see that in a recording? Right—Hitler), press ⌘-R in Reflector (Device > Start Recording). When you’re done, hit ⌘-R again and Reflector will prompt you to save the movie and to add an optional device frame (regardless of whether you enabled it while recording). It’s a matter of taste as to whether you want to show the frame to the audience. Since I make instructional videos for 1Password, often with instructions flying and exploding all around the device, I like to add the frame for context.

Reflector will crank out a video of just your iOS window—no desktop, no OS X-y drop shadow—in a device-native resolution. This is perfect for dragging into Screenflow or other video editor, and extra perfect for layering on top of or next to other elements like text instructions. And explosions.

Step 3: Polish and publish

Honestly, you could upload the movie Reflector created to YouTube or your website and call it a day. But as long as we’re being honest, we both know you don’t want to do that. You probably screwed up a couple times, and I bet you want to add an audio narrative. If so, I bet you dollars to donuts you’ll also need a couple freeze frames so you can fit in some instructions.

This is where the fantastic, worth-every-penny-ness of Screenflow comes in. At the very least, you can drop your iOS demo into a more internet-friendly landscape frame, but this means you have the room and tools to add a spiffy wallpaper, your company name and URL, or whathaveyou. Transitions, even just a fade in and out at the beginning and end will help your video look 400 times better. Please don’t use any of the other transitions—no, not even that one. It’s bad, and Screenflow is silly for having it.

Screenflow can publish straight to YouTube and Vimeo from the File menu. If you use File > Publish to Flash, please contact me and explain how you sleep at night, let alone live with yourself day-to-day.

Step 4 (Optional): GIF it

Every now and then I’ve found it useful to GIF something that is just too short for a video, like the 1Password extension’s new (optional) AutoFill animation, or this slick animation when Wikiweb finds related Wikipedia topics. For that, I use GIF Brewery, because it’s great.

After you open or drag a video into GIF Brewery, you can select a small portion of the timeline to GIF; it’s really pretty simple. You have some control over how colors are squashed for the GIF format (it only handles 256 colors, so you might have to fiddle a bit here) and the GIF frame rate. You also get an overall file size meter and warning if you get close to or over 1MB; a number of of services (like Tumblr) and web hosts seem to not like anything over that, so GIFer beware.


How’d I do? How’d you do? Still have questions about something? Hit me up and I’ll see if I can answer you in private or add an addendum here for the rest of the class.