Possibly the most exciting piece of building Loose Leaf was making the App Preview video that’d show in iTunes when I launched. Making this video was the culmination of over 2 years of work, and symbolized it’s completion in a very tangible way. It was my final step before I could finally submit to Apple!
Working on an App Preview video took a surprising number of tools, and in this post I’ll walk through all of the steps I went through to create the final 30s video for Apple. Before we jump in, be sure to read over what Apple has to say about App Previews and review the specs.
Step 1: Optionally Show Touch Locations
Apple encourages only in-app footage to be used in the app preview video. For most apps, it’s enough to simple record the app without any modifications, but for certain gestures or features it can be helpful to show the actual touch locations on screen. Loose Leaf is almost entirely gesture driven, and for some gestures (copying a scrap in particular) it’d be impossible to know what was going on without seeing the touch points on screen.
I posted some code earlier that makes it incredibly easy to add blue dots at every touch location. Watch the demo video here to see the dots in action, and grab the code at https://github.com/adamwulf/ios-uitouch-bluedots.
Step 2: Write Your Script
I’m using “script” here in a pretty loose way, you won’t have any voice over or words in your video, but you still want to plan out exactly which screens and gestures you want to show off. Your target length is between 15 and 30s, so there’s not a lot of time to show off your features.
A great way to make a first pass on a script is to assume each “scene” will be between 5 and 10 seconds, so you can only budget to show between 3 and 6 features. The Loose Leaf preview showed only 3 scenes, each scene showing 1 or 2 features.
Step 3: Record the Footage
The only apps I used:
Apple recommends recording your app with Quicktime, but I had trouble with dropped frames. Instead, I used Quicktime to only to mirror my iPad’s screen to my Mac, and then I used Screenflow to do the actual recording. I’ve no idea why that would help, but it did – I’d recommend you do your own experiments to make sure you’re getting the quality you need. I also used Backdrop to make sure the edges around the screen were crisp.
When you record, don’t worry about how fast or slow you go through your script, you can adjust the timing and transitions later when editing the footage. Just get all the footage you’ll need, even multiple takes if necessary. One reason that I love ScreenFlow: 1 keystroke to start recording, 1 more to end recording, and 1 click to add to my project and start editing – nice and simple workflow.
Step 4: Find Your Music
To keep the pace moving in your video, you’ll want some catchy music. There are some sites dedicated to short music loops and songs, and two I’ve found particularly useful are PremiumBeat and Melody Loops. I’ve used Spread Your Wings from PremiumBeat for the Loose Leaf promo video, and used Feeling Positive from Melody Loops for the many feature demo videos. There’s lots of great music between the two sites, spend some time tracking down something that’ll fit your theme.
One other option is to reach out to independent musicians themselves. I’ve previously licensed music from Esbe, who makes some great electronic music. This is the road less travelled, but can lead to fantastic and unique music for your app. Find great music, reach out and be friendly, and you’ll be surprised the music you can find.
Step 5: Edit the Footage
And now you bring it all together! Apple has info on using iMovie or Final Cut Pro, but I love the simplicity and ease of use of ScreenFlow.
First, import your footage into one track, and import your music into another:
Next, you’ll want to crop the video down to just the iPad screen. Click the crop button in the lower left and set the frame size to match the size of your iPad screen – when i recorded it was 768×1024.
Next, clip your audio down to 30 seconds, and add fades in/out as necessary. You can also double click on the audio track to view it’s properties, and speed it up if necessary. For my app preview video, the loop downloaded with a slight fade at the end which made it longer than 30s by default -after a quick speed up, it fit perfectly.
Now that you have your audio the correct pace and length, it’s time to chop the video down to size as well. Use these same “Split Clip at Playhead” on your video to slice out any footage that you know you won’t need and see how short your actual usable footage will be. Remember, you can easily speed up or slow down your footage by double clicking on any clip.
Sometimes I’ll need to extend a frame of the video by just a fraction of a second – maybe I was a bit too quick between gestures. This is also extremely easy to do: just set your playhead at the frame you want to extend, right click, and choose Add Freeze Frame.
Lastly, there are places in Loose Leaf’s app preview where I cross fade between clips. To add in a transition, simply drag a clip to overlap another clip – a transition will be made automatically! Then just right click the transition area to choose the effect – I’m partial to the simple Cross Dissolve.
You’re almost done! After a bit of editing you should have an app preview edited down to 30 seconds and ready to upload to Apple.
Step 6: Format for Apple
Apple has specific requirements for uploaded App Previews. In particular, the resolution of the video must be at least 900×1200. When you’re ready to export, choose File => Export from the menus, and set a custom export size of 900×1200:
Step 7: Enjoy Your App Preview Video
Then export your file and upload to Apple! Congratulations on your freshly minted App Preview video! This is exactly the workflow I followed for Loose Leaf, feel free to check out how it turned out!
Check out Loose Leaf on the app store:
