Producing a Demo Video for your iOS app

February 25, 2013 by
Filed under: iOS 

My new iOS app GameTimer is getting closer to a release. The app has been submitted to Apple, so I’m now working on generating some interest on review sites. I’ve read the helpful “Pitch Perfect” by Erica Sadun and Steven Sande from TUAW. They make it clear that it’s important to stand out from the tens and hundreds of pitches that are submitted on a regular basis. A short demo video helps in standing out – it shows that you’re willing to put in the work and it makes the reviewers job easier (“quickest way to initially assess your app”). It takes some work and time, but it wasn’t too tricky. In case you’re interested, the final video is embedded on the GameTimer Details page

This blog post sums up the steps and tools in order to produce the video – so you can do the same for your app. Please let me know if I missed something or didn’t explain things well.

Tools

Here are the tools I used to produce my demo video and their associated costs:

  • iShowU HD (30$, used to record the app – similar products available, but this was the cheapest “professional” app I found)
  • QuickTimePlayer (free, used to record audio)
  • iMovie (I used iMovie09 that came with my Mac, the newer iMovie11 is 15$ on the Mac App Store)
  • Pixelmator (optional for designing titles, 15$ on the Mac App Store – this is my preferred graphics app so I already had it installed)
The short version is that you probably have almost all the required tools available and there is not much money you have to spend. All the apps are relatively easy to use, it took me just a few hours from “what’s iMovie” to finished video. Let’s have a closer look at what I was doing with these apps.

Shoot the Video

The first part is to shoot a few segments showing your app. The simplest way is to record the Simulator. A couple of pointers:

  • The final video should have a duration of about one minute. You probably don’t need more that 60-90 seconds of “raw” footage.
  • Create a few short segments. You probably need a few tries to get each segment right. (I used three demo segments.) Also, you may want to “re-shoot” some segments based on the voice over you want to add (see next section).
  • iShowU HD has an option to just record a segment of your screen (so setup to record just the Simulator window). Another feature is to highlight “taps” (they call it “Blob” on Left Click). There are fancier ways of achieving this, but I found this works okay. (There were a lot of mentions of SimFinger by Loren Brichter, but didn’t really see too much of added value.)

Here’s a look at the iShowU HD main window:

iShowUHD

Add VoiceOver

You can record your voice using iShowU when recording the video, but you’re more flexible doing video and audio separately:

  • As for the video, you should record your audio in small segments. 
  • In addition to the video segments, also record opening and closing segments.
  • You can spend a good chunk of change on good microphones (or even a professional speaker), but a USB headset that I also use for Skype worked fine.
  • Rather than ad-lib, you should have some notes or a even fully written narration.
  • You’ll probably need a few iterations to have your video and audio come out at about the same length. Edit the copy you are reading or shorten/lengthen the video.

Put it all together

Once you have the basic parts, you can edit the video using iMovie:

  • Properly align the video and audio segments. (You can adjust the length a little bit by accelerating or slowing the video so it matches the audio).
  • Add a title and closing screen. You can use the built in iMovie Titles, but they seemed quite limited (and not really intuitive to use). Instead, I just put together two PNGs in Pixelmator, also allowing me to use my app background as the background for the screens.
  • Add transitions between the video segments. iMovie has some nice animations for this.
  • Use the preview to check if things are looking and sounding good.

Here’s a look at iMovie with the title screen, some transitions, and the video and audio segments lined up:

iMovie

Embed video on your website

Once you have a finished video in iMovie, you can export it to youtube. (You need a youtube account for that.) Once the video is on youtube, add some meta information using the youtube site. You can then use the ‘Share’ tab (‘Teilen’ in German) to get embedding HTML for your website:

EmbeddingYouTubeVideo

All that’s left to do is to add this code to your own website. Done!

Comments

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!