Experimental Lex

Playing with words.

Tag Archives: howto

iPad Screencasting

It’s Friday and we are enjoying a moment of satisfaction after submitting our iPad magazine-like app to the iTunes App Store. Those final days and weeks of editorial fixes and pre-launch anxiety were pretty exhausting! We needed to get the app submission done before the holiday crunch of new apps which can slow down the app approval process. I’m told the delays can get real bad. We’re hoping for the average one-week turnaround.

In a sense, this was our self-publishing moment. And when you self-publish, you are also responsible for self-marketing your work, since you don’t have a publisher sending you champagne and planning your book launch. In the age of digital publishing, you need to help users visualize the digital experience of your content. Screenshots of your app are definitely a must-have for your website or blog and these are easy enough to do. Frequently, you need the ability to show a live or video demo of your app.

Screencast Recording
I was faced with this need today — We needed some video source material to demonstrate the user experience and interaction with the magazine-style content. According to the creative brief, the video shots would be full-screen simulations of the app experience and not an over-the-shoulder recording of a person handling the iPad. (Orchestrating live actors gets complicated and expensive.) The video material will then go to our video production team who will turn it into a sizzle reel.

In order to record live action on an iPad screen, you have to account for a few difficulties.

  1. You need a way to display the iPad app and interact with it
  2. You need video capture software that can record a screencast

iPhone Simulator

The iPad does not have a screen recording feature (yet), and there’s no clear way of connecting your computer to your iPad and capturing video from it. Instead, the one solution you do have is the iPhone Simulator, which is included with the XCode development environment and also with OS X Snow Leopard.

When building an app, you get to run your app in the Simulator, which is often more convenient than deploying it to your iPad/iPhone. The “iPhone Simulator” was originally designed for the iPhone (as its name suggests) and it does a good job of replicating the iPhone look-and-feel. It is also capable of simulating an iPad, but there are a few caveats.

1) For one, the vertical height on most monitors is not large enough to see the entire iPad at full size. By default, it always starts at a 50% zoom level and you need to manually change this setting. At 100% zoom level, the Simulator’s vertical height exceeds the 1050 vertical pixels on my 22-inch Apple Cinema Display. The entire window measures 1225 pixels vertically and if you don’t have that space on your display, it gives you scrollbars which make it hard to interact with the iPad in a natural way.

This issue is manageable if you have a really large monitor, or at least one that rotates. I had planned ahead and borrowed a large flat-panel monitor with a rotating screen, so it can display in portrait mode.

2) The other problem with the iPad Simulator is the fake iPad glass and metal border area that’s supposed to make it look like an iPad. This has been squeezed to consume less vertical and horizontal screen area, which gives it a weird, uncanny look. It’s no good for a professional video reel. So our screencast solution now needs to crop out the fake device border. We’ll let the video editors add a more realistic iPad device border.
Note to Apple: please provide an 80% zoom level in the Simulator. And the option to remove the fake device chrome. While you’re at it, just add a screen recorder for the Simulator.

Screen Recording Software

There are a few Mac apps that do this. I found this list on Squidoo. In the end, I went with ScreenFlow since it met my core requirements:

  • Ability to crop the video to a custom area of the screen
  • Ability to hide the mouse cursor. Essential
  • Export to Quicktime MOV file

After doing a quick test run, I was satisfied that ScreenFlow was the right choice. It is well-designed and easy to use. I was able to quickly run through my demo script and provide perfect-sized MOV files for the video production team.