Creating iPhone app video demos

Not having access to a good video camera, I was finding it very challenging to create a decent video demo of some of my iPhone apps. The issues of lighting and contrast were particularly difficult, especially with apps that have a black background (such as my Artificial Life app). Also, for an app that contained very small details on the screen, recording with a camera often made it difficult to make out the finer details in the image.

After producing a few admittedly "very rough" video demos for my apps, I finally decided to track down a better solution. I had noticed some companies had very nice demos in the same video aspect ratio as the iPhone screen, and they appeared to have been generated on a Mac vs. a recording of the iPhone screen. (This was noticeable since there was no hand visible making UI interactions and instead there were white circles representing where someone would tap).

After a few Google searches, I came across ScreenFlow, a $99 product that makes creating video demos of any portion of a Mac screen very simple. I've found capturing video of the iPhone simulator produces excellent quality for an iPhone app demo. There are limitations, of course. Since your are recording your app in the simulator, certain features are unavailable, such as demonstrating accelerometer behavior, or multi-touch beyond two finger pinching and stretching. But, for more basic functionality only involving taps and such, this works quite well.

It was definitely worth the $99 for me.

And since this ScreenFlow application allows recording video demos of a Mac in operation, here's a video demo I recorded demonstrating how easy it is to make a quick iPhone video demo. (Got a bit of recursion there...) The demo starts at the point after the rough video capture of the iPhone simulator has already been performed.


Sorry, the above video is currently in a format not viewable on the iPhone. Please view this updated version for a video that is iPhone compatible.

After you export your video (you can even choose iPhone format so it is saved as an iPhone compatible m4v file), you can then easily embed the video in a web page using Apple's quicktime player object. Something similar to the following object tag should work, replacing both references to my video with your own. Also, this assumes the video was saved in 1/2 the normal resolution (160x240 rather than 320x480). The extra 20 pixels in height are for the quick time video control bar on the bottom of the video.


<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="160" height="260" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" id="video_qt">
<param name="align" value="middle" />
<param name="src" value="http://stormyprods.com/movies/The%20Gavel-small.m4v" />
<param name="loop" value="false" />
<param name="controller" value="true" />
<param name='autoplay' value="false" />
<embed name="video_qt" enablejavascript="true" type="video/quicktime" width="160" height="260" src="http://stormyprods.com/movies/The%20Gavel-small.m4v" controller="true" autoplay="false" loop="false" align="middle">
</embed>
</object>