Step by Step: Making an iTunes App Preview Video

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:

screenflow  backdrop  quicktime

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:

Insert footage and music

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.

Screen Shot 2014-12-29 at 4.20.49 PM

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.

Screen Shot 2014-12-29 at 4.09.33 PM  Screen Shot 2014-12-29 at 4.10.53 PM  Screen Shot 2014-12-29 at 4.13.07 PM

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.

Screen Shot 2014-12-29 at 4.17.02 PM

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.

Screen Shot 2014-12-29 at 4.18.52 PM  Screen Shot 2014-12-29 at 4.19.07 PM

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:

Screen Shot 2014-12-29 at 4.24.18 PM

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:

app-store-badge

An Easy Way to Show UITouch in App Preview Video

One of the most important pieces of any app launch is the app preview video that’ll show next to your screenshots in the App Store. With Loose Leaf, nearly every feature and all of the navigation is through multi-touch gestures, so it was incredibly important to be able to show those touches on screen when I recorded the video.

The Preview

Watch the Loose Leaf preview to see the touch dots in action – it’s a small animation when the touch begins, and the blue dot follows each finger for the rest of the touch.

The best part is how easy this is to add to any iOS project, just some simple code that will show dots at each UITouch location, no matter what UIView or UIGestureRecognizer is receiving them.

The Code

The code to add these dots is available at https://github.com/adamwulf/ios-uitouch-bluedots. To add it to your project, just add these few lines into your App Delegate when launching the app.

- (BOOL) application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // create the blue dot view
    MMTouchDotView* dotView = [[MMTouchDotView alloc] initWithFrame:self.window.bounds];
    // optionally set the dot color, defaults to blue
    dotView.dotColor = [UIColor blueColor];
    // optionally set the dot width, defaults to 20
    dotView.dotWidth = 40;
    // add the view to the window to make sure it's always visible
    [self.window addSubview:dotView];

    // Override point for customization after application launch.
    return YES;
}

That’s it!

The App

More Loose Leaf dev blogs to come! Find out more about Loose Leaf, and watch all the app demo videos.

app-store-badge

Building the promo video for Loose Leaf

For any other indie devs out there wondering what its like to hire out a promo video, I wanted to share my experience working with Josh at Bluepic Studios on the Loose Leaf app promo we’ve just finished up. Check out our final video below:

Step 1: Get good references

Honestly, the hardest part of the process came right at the start: finding a video firm. I followed a friend’s recommendation to Josh and Bluepic Studios, and I’m extremely glad I did. I’ll start your search off with a strong recommendation for Bluepic, and you should also ask your friends, ask your colleagues, ask your twitter/fb/ello/linkedin followers as well. Get as many options as you can, this is by far the most important step.

Things I personally wanted:

  • Someone with a strong portfolio
  • Shows range in what they can make
  • Ideally, first-degree reference from someone I trust
  • A smaller firm for a more personal process
  • Someone who can walk a newbie like me through the process

Things I didn’t care about:

  • Location – I’m in Tomball, TX of all places, so I’m not expecting someone close by
  • Timeline – My development schedule drove the video schedule, so I didn’t need anything immediately

Step 2: Finding inspiration

After connecting with Josh, we started working in very broad strokes – what feeling did we want to import, what aspect of the app is most important to communicate. The easiest way for us to get started was sharing links to other interesting product videos, slowly narrowing down our target feel. Some videos we looked at:

  • Apple’s iPad Air commercial:
    • Loved the music, the inspirational feel
  • Here, File File! promo:
    • This was a commercial that featured a previous app I’d built, loved the focus on use case + showing the app in action
  • Saddleback Leather:
    • Too talky for what I wanted, but communicated craftsmanship – something very important to me
  • John Neeman Tools:
    • I loved this video possibly the most. Its focus on the building process, the care and craftsmanship, was extremely important
    • I also loved that there was no narration or talking during the video. It’s “show don’t tell.”

Loose Leaf is a gesture driven app – moving between pages, inserting photos, and cutting and cropping scraps – it’s a tactile app, and I wanted to show that as much as possible in the video.

Step 3: Getting the script together

At this point, I knew I wanted a music driven video that spent most of the screen time showing people using the app. It needed to be short and easily watchable on mobile w/o needing lots of time. Loose Leaf really shines when you can watch the gestures and interactions themselves, so I really wanted to focus on showing real people using the real app for real ideas.

We brainstormed a few options, everything from a potter or sculptor, to fashion or interior designer. We settled on a young couple setting up a room in their new home. I loved this idea because it showed two people working on their ideas together in Loose Leaf. It’s a great scenario to show how strong Loose Leaf can be for brainstorming – it’s for sharing quick ideas back and forth, nothing fancy, nothing permanent.

Step 4: Refining the script, and fitting in budget

At this point, we knew roughly what scenario we wanted to shoot, and started working out specifics of the script. Initially my target was to keep the video to 30 seconds with just 1 actor at 1 location, but to show off the sharing feature of Loose Leaf, I really needed to expand scope to show it used by 2 different people.

It was adding the 2nd actor and location that caused my initial budget to balloon slightly. Going into this, I had no idea how cost might be calculated for videos, and was very worried about keeping in budget. As Josh and I were working through the script, I found out that most of the cost doesn’t come from longer footage – a 30s video could cost roughly the same as a 2m video. The cost came from multiple locations and multiple actors. In retrospect that’s more obvious to me, but at the time it’s all new.

We were able to work out a script that stayed inside my available budget, and but didn’t compromise the message by using only one actor. I’m really glad I chose to focus on the goal of the video and sacrifice slightly on my budget, it turned out far better than the one actor option would have.

Step 5: Get the footage!

Shooting was done in just one afternoon. The hardest part for me was letting Josh do his work on shoot day – due to travel costs, I couldn’t be there for the actual shooting, so I just had to wait and see what came out of it. I’ve been working alone on this project for ~ 2 years, so it’s hard for me to give up that control, but it just goes back to Step 1 about finding a solid reference that you know you can trust. Josh did great work.

As with anything, even with actors and wardrobe all planned out, custom app builds for each scene, a written script, and pre-fab content, Josh still had to call an audible on a few shots, and it turned out great. When certain angles of the room didn’t work out as we’d planned, he was able to adjust to fit in our shared vision and get some great footage.

Josh was able to turn around a draft video with all of the footage by the next morning, and it looked sharp! He even sent a few different options for the backing music for the video.

Step 6: Edit, edit, edit, and ship!

Josh and I continued to send the video back and forth, slowly cutting out extra time from scenes, clarifying certain transitions, until we got the initial draft from 1:25 down to just 1:05. The pacing and music worked out great, and I’m super happy with the result.

What’s the takeaway?

The most important part of the process was finding someone I knew I could trust, someone who had good judgement for scenes, pacing, and was creative throughout the entire process. I’m proud that we were able to communicate the idea of Loose Leaf – quickly and easily sharing ideas – so effectively. That abstract goal aimed all of our concrete tasks and output.

As with anything creative, it’s a balance between budget, quality, and timeline. I focused on optimizing budget and quality for this video, and our timeline reached from April through to October. Most of that time was Josh waiting on me to finish the Loose Leaf features that we needed to shoot, so the delay was my own fault. If I’d needed it faster, I could’ve written up fake features for the video, but quality would’ve suffered and the final output of the product would have been misrepresented – something I wasn’t willing to compromise.

Bottom line, if you’re going to be working on a video for your app, I strongly recommend starting the process as early as you can to give yourself as much leeway as possible for lining up shooting and development schedules.

To find out more about Loose Leaf, check out the site: https://getlooseleaf.com

To find out more about Josh at Bluepic Studios, visit his site at: http://bluepicstudios.com

You can get Loose Leaf now in the App Store:

app-store-badge

Google Author link
Page 9 of 51« First...7891011...203040...Last »