Create a professional video demo microsite for your iPhone app

I’ve seen some beautiful iPhone app websites lurking on the web. Some of them choose to display a video showcase of their apps, like Convertbot and Classics. I wanted to create something similar – a video walkthrough that would demo the best bits of my apps.

If you have taken the time to create a rich user experience for your app, there is no better way to convey the beauty of your interface than a video demo.

Want to create something similar for your own mobile apps?  It’s not easy seeing as most mobiles don’t provide any means to directly video capture what you’re looking at on-screen.  So here’s the answer – capture it on your Mac using the SDK.

What you’ll need:

  • Mac OS-X (for Android apps you can also use a PC)
  • Apple iPhone SDK or Android SDK
  • Screen Mimic
  • Your working app running in the SDK

Step 1) Get your app running on your Mac
Get your app running in the SDK’s Emulator/Simulator.

Step 2) Screen capture software
Screen Mimic works well.  Start it up, choose ‘Record selection’ and drag over the app's screen (typically a 320×480 area).  For the frame rate, 15fps is perfect, but I’d suggest lowering it if you don’t have many transitions in your app.  Before you start recording don’t forget this next step…



Step 3) Change the cursor, fake a finger
We don’t want the standard OS-X cursor to show up in our awesome video.  It’s too unprofessional.  This is a touch-device (like an iPhone or Android) and we need something that feels more analogous to a finger moving around the screen and tapping. Try PhoneFinger.  I created a custom cursor that works especially well for this situation – it’s got just the right balance between subtle and noticeable. 
Download my custom cursor here and follow the instructions on the PhoneFinger website to install it.

Step 4) Start recording
Click ‘Go’ in Screen Mimic, and click around in your app – everything you do will be recorded.  When you’re done, just press the hotkey (SHIFT-APPLE-R by default) to stop your recording.

Step 5) Save it
For best compatibility across browsers, choose Flash (SWF), make sure that ‘Show mouse cursor’ and ‘Show mouse clicks’ are not selected.  Tick the ‘Output HTML file’ checkbox and Export. You can also export your video as Quicktime MOV format and then upload it to YouTube.

Happy snapping!