Simple Demo Movies for the iTunes App Store

For App Developers selling in the iTunes store, recent improvements to the store and new tools for Yosemite and iOS 8.X work together in new ways. In particular, with the advent of more potential image sizes for iPhone apps, the new UI for submitting apps to the store has been simplified to allow discrete images for each iPhone or iPad size supported, and to allow a video clip of your working product up to 30 seconds in duration and 500MB in file size.

With internationalization, you can have language specific versions of the product image running (aka the “screen shots”) on each size of device; sadly only one movie clip image per device, across all internationalizations, is allowed. (Admittedly of more concern for language learning apps than others…)

With iOS 7 and 8, the specs have changed again, but there are many fine posts and Apple Docs about how to capture screen shots in the right size for each device. The biggest change for me has been on iPad apps , which must now have landscape images a full 1024 / 2048 wide, rather than the prior 1004.

The tedium of storing and posting four or five screen images per language per version has gotten slightly less cumbersome, I am pleased to report, but the specs for the movie clip, and the recommended method of capture, has caused some confusion. Having solved this problem, I will post my solution where it might help others.

BIG NEWS

The most promising development I had read about was the ability to use OSX devices and iOS Quicktime Player to create new quicktime movies using the image of any attached iOS 8.X device. Sadly the limitations became apparent as soon as I purchased my new iPad Air 2.

Fine Print

The Primary limitation of using Quicktime to capture iOS device surface images to create your App Store Video preview are a) you must have a “lightening” connector to the device you want use, and b) there is no opportunity to edit or add effects to your video.

I love using “Screenflow” to create movies from sections from my iMac screen, partly because it is easy and intuitive, and partly because it can add a range of effects from showing screen taps to customizing the mouse pointer / cursor in terms of size, opacity, and color.

Of course this means iOS demos are done capturing the iOS simulator on OSX — which again right now is tough if you want to demo the “settings” capability (not working in iOS 7.X simulator) and you want to demo your app for devices with different (non-English) application settings (the ios 8.X simulator won’t properly share device language settings with your code via appropriate iOS API call, so this has to be done in ios 7.X). A problem.

Since none of my iPads were newer modes using lightening connectors (i’ve given two iPad mini’s to Andy’s grandparents, but at 2800 and 6800 miles away, hard to borrow back), I first got a new iPad air 2 to use as my demo device.

Sadly, capturing this screen running my new iPad software using Quicktime Player worked exactly as expected — but this means that there is no visual indication that a button (or other UI-widget) had been touched, no way to show finger movement, etc. And the Screen flow effects for taps and cursor movement are so good that I ended up doing work-arounds in the simulator to capture the demo movies there, which i augmented with Screenflow effects, and then exported the desired video portion with the following choices:  quality set to “web-high”; export size: custom-sized 1200×900, letter-box content is checked (to prevent aspect-ratio changes when going from 16×9 to 4×3 etc). This results in an m4p file that the store accepts — so long as the duration is not one second over the 30 second limitation required.

The resulting video looks like this one:  

or this one:  


One Comment on “Simple Demo Movies for the iTunes App Store”

  1. […] effects” that would be used to put in the mouse click), so I will continue to use my method of creating app demo movies for the time being.  I did upgrade to ScreenFlow 5, so when i am ready to use their transition […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s