Author Archive : admin

With the advent of iOS 8, Apple has added what it calls “App Previews” to the App Store so that developers can showcase their apps with an up to 30 second video of their app.

These videos are supposed to be simple screen captures, with perhaps a little post editing done in an application like iMovie.  They are not supposed to be anything more than that. With that in mind, Apple have made it pretty easy to record your App Preview and upload it to iTunes Connect.

Even so, it seems that some people are still struggling with what tools to use, and how to get a file that they can upload that meets Apple’s rules.

The main things you need to take into consideration are:

1. The video must be less than 30 seconds in duration.
2. The video must be less than 500mb in size
3. The video must be the correct resolution.  For this, the resolution depends on the device class you are submitting the video for.  When I submitted my videos, the iPhone 6 had not been released so I had only to create videos for the iPad and iPhone 5.  Apple don’t allow us to create App Previews for the iPhone 4.For the iPad, videos must be 1200 x 900 pixels
   For the iPhone 5, videos must be 1136 x 640 pixels

Before you start – ingredients

For any act of creativity, be it cooking, or recording an App Preview, you need the right ingredients.  For me, I use:

• Mac Mini running the latest OS X Yosemite.
• iPhone 5 or iPad Air.
• Lightning to USB cable.
• Quicktime Player application (part of Yosemite) for video capture.
• iMovie 10.0.5 for video editing.
• Handbrake v0.9.9 x86_64 for final video encoding and cropping.

Capturing the raw video

Apple clearly states that if you install OS X Yosemite, and connect your device via USB cable, you can use the Quicktime Player application to capture the video in it’s rawest format.

This is actually, really easy.  Once you have your device (for me either an iPad Air or an iPhone 5s) connected, run Quicktime Player.

If you’re lucky, Quicktime Player will automatically find your device and you’ll see the devices screen pop up in a window on your Mac.  If not, from the File menu, select “New Movie Recording”:

This will, if it still doesn’t find your device, open a window that looks like:

Within this, click on the down arrow next to the record button, and ensure that your device is selected.   Be sure also to make sure that your device is also selected as the “microphone”.  This is important so that any sound your app produces is also recorded along with the video.

Once you’ve done this, you should see your devices screen within a window on your Mac:

So now all you need to do is click on the record button, and then use your app while the Mac records everything you do.  Be sure to have a script to follow so that you cover everything you want to show off about your app within your App Preview.  Apple has a great podcast within the WWDC 2014 collection that covers this sort of thing.

TIP:

If your app has background music, turn it off before you record your video.  It will be much easier to add the music to the edited video later on.  In all likelihood you will end up chopping your video up into pieces and rearranging things to make best use of the 30 seconds.  When you do this, any sound that is running along in the background also gets chopped up and ruins the continuity of the video.  I’ve learnt this the hard way.

Once you’ve finished playing with the app, click on the record button to stop recording.

You then need to save the recording to somewhere suitable from the File menu in Quicktime player.

Editing your video

Now that you have your raw video (I like to name them with the word “raw” in the filename for clarity), you need to edit it, and turn it into a 30 second masterpiece complete with any flashy effects, music or voiceovers.  For this, I use iMovie.  It’s actually a pretty decent movie editor and I find that I can do most things I need within it.  There are other far more capable video editors available, but for me, iMovie works well.

I won’t go into too much detail on how to use iMovie to do the editing, but I’ll address those issues that are important to getting your video ready for iTunes Connect.  Here are the basic steps I follow:

1. Start off, by starting iMovie, and creating a new event for your App Previews.
2. With the new event selected, click on “Create” button and select “Movie”, and then select “No Theme”.
3. Click on “Create” and enter an appropriate name for the project.  I tend to follow a convention where if my raw file is “Appname Phone raw.mp4”, my iMovie project is called “Appname Phone IM”.
4. At this point you have a blank time line.  Drag your raw video file into this timeline and get creative!
5. When you’re happy with your 30 seconds of blockbuster video masterpiece (be absolutely certain it’s less than 30 seconds!) it’s time to export the project to a file.  Click on “Share”
   
6. Next you are prompted to name your video file and select the resolution.  For an iPhone 5, it is vital that you select “HD 720P 1280 x 720”.  For an iPad, select “HD 1080P (1920 x 1080)”
   
7. That is the end of the iMovie phase of the project.  You can now close iMovie if you are feeling confident.

Final Step – Encoding and Cropping

As I mentioned earlier on, Apple have very specific requirements about the resolution of the video you upload for an App Preview.  To reiterate:

• For the iPad, videos must be 1200 x 900 pixels
• For the iPhone 5, videos must be 1136 x 640 pixels

So what gives, Apples own tools don’t give us a video that matches these at all!  Using Quicktime Player and iMovie we end up with:

• 1920 x 1200 instead of 1200 x 900, and
• 1280 x 720 instead of 1136 x 640

Well, as it turns out, the resolution of the iPhone 5 video is almost the exact same aspect ratio as what Apple requires, and we can scale the iPad video such that we get the full height, and then crop the sides to get the exact video resolution we want.

Don’t understand that?  Don’t worry, I didn’t at first either; it took me a while to realise that I needed to scale the videos from iMovie to fit what Apple wanted.  For the iPhone this is trivial, but for the iPad scaling wasn’t enough because it left ugly black bands down each side.  Here is a screenshot of an iPad video I produced in iMovie a week or two ago:

How do we fix this?  I use a wonderful tool called HandBrake (http://handbrake.fr).  This great application which runs on OS X, Windows and Linux is a free video transcoder.  It has a wealth of features and does what we need beautifully.

One great feature of HandBrake is that you can create a “preset” which describes how you want your output to be encoded and sized, and then save that preset for later use.  I’ve done this for both the iPhone 5 and iPad App Previews, and this has worked perfectly for me every time.

One huge benefit is that the quality of the final video is great, and it’s also very well compressed.  You can probably tune things but for me these presets work.

So, start up HandBrake, and from the “Presets” menu, select import to import the presets I’ve provided below:

• iPhone 5 Preset
• iPad Preset

Now, drag the video you saved from iMove onto the Handbrake main window (or select it from the “Open” dialog) and you should see all sorts of details about your video:

Note on the side in the Presets “drawer”, I’ve selected iPhone5?  This is one of the presets I’ve made available above.

Note also at the bottom where you can see the resolution of the source video (the one from iMovie) and the resolution of the output (what you have to upload to iTunes Connect).  The output is exactly what you want.

All you need to do now is click on the “Start” button and wait for HandBrake to tell you it’s finished.

You’re done!  You now have a video in the correct format, duration and size for a direct upload to iTunes Connect.  Remember that you need to do this with Safari on a Yosemite Mac (as far as I know).

Happy creating!