With over 700,000 apps in the Apple App Store alone, the mobile app market has become incredibly competitive. So the success of your app in this environment has as much to do with marketing as it does with building a great app. One of the best tools you can use to market your app is a great app video. For most apps, a few screenshots don’t really convey just how cool your app is; not the way a video can.
The problem is, if you’ve ever attempted to make an app video, you’ll discover it can quickly turn into something sad. You need someone with real camera and editing skills to produce a video of your app running on an actual device. And taking a screen recording looks like, well, like you took a screen recording. So today I’m going to summarize a process that I’ve come up with to make slick, polished app videos that you won’t be embarrassed to post on your app web site. I’ll talk about some tools to record and edit your videos and then discuss exporting and publishing your videos.
Here is an example of a video I made to demonstrate the basics of the Coachable Soccer iPad app:
To record the screen without making it look like we recorded the screen, we need to accomplish a few goals:
- We need to record the screen (obviously)
- We want to see the device hardware in the video
- We don’t want to see the mouse cursor. Rather we want to see some “touch” pointer instead.
- We don’t want our desktop in the video. A solid background would be nice.
Recording the screen would be easy if we used Quicktime Player 10. It allows you to record a portion of the screen and makes nice videos, but sadly your cursor will always appear in the videos. If Apple added that one feature, our lives would be so much easier. Instead, we turn to third party screen recording software. There are several out there.
I settled on Screenflick [http://www.araelium.com/screenflick] which sells for $30. You can try it for free first, and live with a giant watermark on your videos until you decide to commit.Screenflick is solid screen recording software with a simple interface and some cool features. Foremost is the ability to remove the cursor from your videos. It also has the ability to overlay an image during all or a portion of the video and some keyboard stroke display options for your video output.
The next problem to solve is displaying the device hardware in our video. The iOS Simulator only displays decent hardware chrome for the old iPhone, which might be okay for you, but you’re not getting the best resolution possible and you’re out of luck if you want to demo an iPad app. The Retina Display iPhone hardware option does have a bezel but it looks nothing like the real device.
One way to solve this problem is with an application called SimFinger. This is an open source application living on github that has been neglected for the past couple years. It’s a cool concept that could use some spiffing up and updating. To get it, you’ll have to download the source code from the project on github: https://github.com/atebits/SimFinger There are a bunch of projects bundled in there but the one you want is called FakeFinger. The idea is you run the simulator, then you run FakeFinger and it displays a device overlay (with a hole in the middle) on your screen directly over the simulator window. It also provides a slick white touch pointer for that extra jazz. The problem with it is that its images and hard-coded screen resolutions are outdated and don’t work with all the new iPhone and iPad simulator sizes. If you’re handy with Objective-C (and you should be if you wrote such a great app) you can hack the project code yourself and figure out what resolutions are appropriate for your task. You might have to do some image hacking too. I did to get an iPad overlay that was the right size for my screen.
You also have the option to turn the touch pointer on or off. You’ll probably want it on, unless you’re using another application to provide a custom pointer.
Another app I came across in my research was PinPoint [http://www.lagentesoft.com/pinpoint]. Again, there are several apps out there to customize your mouse pointer, but this is the one I settled on. It has a bunch of great built-in customizable pointers, as well as the option to import your own designs into the application. It also has a nice key stroke display option which would be great for doing desktop application demo videos. This app is only $5 from the App Store.
I used PinPoint in some of my videos because I wanted a non-white touch pointer that would appear more clearly on a light-colored app background.
Create the Screen Recording
The process is simple. Click ‘Start Recording’ and choose the area you want to record. I suggest choosing a sane aspect ratio like 4:3 to make your life easier. If it’s going to stretch beyond the limits of the SimFinger overlay, just make your desktop background white. When you’re done, press Cmd-Shft-2 to stop the recording.
In Screenflick’s Movie tab, you can add options to your video, like removing the cursor and adding a image like an icon to the video.
The best option for video export is to Export to Quicktime H.264. This is what seems to work best with Apple applications like iMovie.
Movie Editing with iMovie
Now you have a raw screen recording of your app. Don’t stop there. Get the latest version of iMovie for $15 and give your video a professional touch. iMovie is powerful, but it’s still a consumer grade product. It’s meant for making quaint home videos of your European vacation, so it’s lacking what seem like obvious features, like support for aspect ratios beyond 4:3 and 16:9. This makes it tough to use iMovie to edit anything non-standard that you want to embed on your web site. If that’s what you want, you need to shell out $300 for Final Cut Pro…and then learn how to use it.
In iMovie, we import raw videos and sort them into “Events”. Try creating an event for each app. Then you create a new project and drag-n-drop chunks of video from your events. Be careful when importing videos into iMovie when it offers to optimize your videos. My first attempt ended with a video at 1/4 the original resolution once I was done exporting it. Just import the raw full resolution video.
I won’t go into detail about how to use iMovie. It’s relatively intuitive to use. You can slice your video project into chunks. You can drag in various effects like text titles to precede a video chunk, or to overlay a video chunk. You can also drag your own images into these text titles. It doesn’t take long to get some slick looking effects going.
You can also add music to your video project. You can trim the music chunks, adjust the volume, change the fading of the clip, and many other cool features. You can import directly from your iTunes collection or from Garageband. To be clear, be wary of using copyrighted music in your app videos, especially if you’re planning to post them on YouTube. I managed to use Garageband loops to create the background music for my videos. If you’re more talented, you can use Garageband to create more sophisticated compositions. Royalty free music is another option; an option that isn’t always free…just royalty-free. There’s a difference.
When your masterpiece is complete, it’s time to export it to a video format we can use in YouTube or an HTML 5 web site. If you want to upload to YouTube, choose Export Using Quicktime from the iMovie Share Menu. This should get you the best video to upload. You can find full specs and explanations here: http://support.google.com/youtube/bin/answer.py?hl=en&answer=1297408
For video to embed in your site, I prefer Share Movie -> Export Movie and export to the biggest .m4v mp4 you can.
If you’re posting your video directly on your site, you’ll need more than one video format. Sadly browser makers can’t agree on a video format. Firefox doesn’t support H.264, but only webm or ogg theora. I think H.264 is supported by all the other major browsers, even IE 9.
The tool to convert your video is the free Miro Video Converter. [http://mirovideoconverter.com] This program is a jewel! I wish all apps were this easy to use. Simply drag your video file into the Miro window, choose an export format and click “Convert”.
HTML 5 Video
In theory, HTML 5 makes video a breeze. No need for flash. Simple tags. Fully featured video player embedded in the browser. But of course it’s not.
We already learned that the browsers support different formats so you’re going to need two versions of each video. Once we have that, the video tag is pretty simple:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/m4v .m4v
AddType video/webm .webm
AddType video/x-m4v .m4v
This tells the browser that the file format ending in mp4 is of the mime type video/mp4, and so on… This is the kind of stuff that wrecks the fun of web development for me, but that’s another article…
And that’s it. There are a lot of steps involved in making a great app video, which is why I wanted to put it all in one place. I spent a lot of time on Stack Overflow and various support forums over the course of a couple days trying to get this all figured out. Hopefully an article like this will make it easier for others…and for me when I forget it all ten months from now.