How to Create a Beautiful Demo of Your iPhone App
While designing the Secret homepage, I decided I wanted to add live footage of the app in action. What I didn’t know is how much of an endeavor it could be if you don’t know all of the tools and their quirks.
I achieved this demo with a few pieces of software on OS X Mavericks:
- Touchpose to visualize the touches in your iPhone app
- Reflector to capture live output from your iPhone
- iMovie to stitch together the clips and add text and special effects
- QuickTime Pro to export with the right dimensions and codec
Total software cost: $58
1. Capture live output #
Reflector is very easy to use. All you need to do is run the software on your computer and connect your iPhone to your MacBook via AirPlay. Reflector will automatically pick up the connection and start streaming your iPhone’s screen onto your MacBook’s display. Simply press Command-R to start recording and again to stop. Voila.
The downside of Reflector for Mac is that it saves video files in .mov format and doesn’t currently offer .mp4 output. It’s also not useful if you want to stitch together multiple recordings to create a montage, like I ended up doing.
2. Use iMovie for stitching and effects #
I thought I could get iMovie to stitch together multiple clips and export it in the right format. I was only half right. iMovie was great for sequencing the separate iPhone recordings and splicing them together with nice transitions. Unfortunately, it only allows you to export at standard aspect ratios (which doesn’t include iPhone resolution).
When you finish your edits, save the file at 720P resolution and then open it with Quicktime Pro 7.
3. Use Quicktime Pro 7 to crop #
An engineer at Apple decided it was a good idea to provide an obscure way to crop a video by providing an image mask in an unfriendly settings screen. I commend this engineer for his/her gumption today.
To crop the video to, open the video properties by pressing Command-J. Then choose “Video Track” from the list and then go to the “Visual Settings” tab. On the left-hand side you’ll see a “Mask” section. Create an image that is exactly the same width and height as your video and make a portion of the image as black and the rest as white. The black portion should be centered horizontally and be the width and height of the iPhone recording. The white portion of the video will be cropped out.
Example image mask (16:9)
4. Export for HTML video playback #
Now that you’ve cropped your video to the iPhone screen aspect ratio, File > Export. The right format for HTML5 playback is H.264 MP4.
Next to ‘Export: Movie to MPEG-4’ click ‘Options…’.
*Make sure File Format is MP4
*Change Video Format to H.264
*Change Image Size to Custom and choose the resolution of your iPhone video
*Choose a higher data rate (512 kbits/sec was good enough for me).
*Click OK and then Save
Get the .ogv version
I found this random site to convert the video. It seemed sketchy, but I was desperate, so I tried it. Surprisingly, it worked.
5. Embed it on your site #
To embed it on your site using HTML5, just add a video tag with two src tags. The first one will be for the mp4, the second one will be for the ogg format.
<video loop autoplay>
<source src="/path/to/yourvideo.mp4" type="video/mp4">
<source src="/path/to/yourvideo.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
And you’re done. Hopefully this helps someone, as it took me several hours to find this path.