Creating Video Tutorials for Android and iPhone Mobile Apps

Creating Video Tutorials or Screencasts for Mobile Apps (Android and iPhone)In a recent webinar on writing scripts for video tutorials that I gave to the STC Tech Editing group for the STC last week, someone asked how to create screencasts for mobile apps. I thought it would be a good idea to respond in more detail in a blog post.

Most likely your apps are designed for iPhones and Android smartphones. (I don’t have experience creating screencasts for other types of phones, but I can give some general guidance.)

Although you can position a camera above the phone and record actions on any screen, that kind of recording process limits you considerably. I think it’s more difficult to edit raw video than to edit a screen recording, since a screen recording allows you to more easily manipulate, hide, or add screen elements as needed. I also recommend using emulators or screen recording apps whenever possible because they usually result in clearer recordings.

Video Tutorials for iPhone Apps

To record a video tutorial for an iPhone app, you need a Mac, first of all. Install Xcode (the development environment used by developers for iPhone apps) on it. Then have your developers install the latest build of the app in Xcode.

If you don’t have a Mac, you can probably borrow one from your iPhone dev team. They should also be knowledgeable enough to install Xcode on it with the latest build.

Xcode will emulate the iPhone app, so you don’t even need a smartphone to record the screencast. (By emulate, I mean Xcode will project an iPhone with all the app’s functionality in a controllable window on your Mac computer, so you can control the phone with your cursor.)

I use Camtasia for Mac ($99), so once the iPhone emulator is running, I just record the screen. The cursor looks a bit out of place on a smartphone emulation, but the cursor is not an unfamiliar visual identifier by any means.

Android Apps

Android has an emulator you can install through Eclipse (I haven’t tried it). There’s also a screen recording app for Android called Screencast Recorder – the only catch is that you must first root your phone. (Why smartphones don’t have recording apps available in the standard market for non-rooted/non-jailbroken phones baffles me.)

If you have a personal Android device, don’t root it. (My colleague rooted his, and afterwards couldn’t get his GPS or phone’s ringer to work.) Borrow a rooted device from your Android development group. They probably have a handful of rooted devices and will no doubt loan you one without thinking twice. (Especially with Android, you need a variety of devices to test with, so the chances of borrowing an extra phone are high.)

I used a Samsung Galaxy Note (the five inch tablet, or fablet, which I really grew to like — even more than my iPhone!) to record a recent screencast. This device has a touch display that will show a bright white circle when you touch it. Activate this setting. Then install the screen capture app on it to record your screen. Set the video capture to the highest settings.

After you finish the recording, export the MP4 recording, open it up in Quick Time and save it as an 720HD file type (because there’s something incompatible with Screencast Recorder’s MP4 format and Camtasia, I found). Then edit the 720HD file in Camtasia and adjust the canvas to 1280/720 HD rather than 1400 x 900.

Other Phones

For other smartphones, find out from your developers how they emulate or test the phone. In a worst case scenario, you could position a camera over the phone.

Simulating Taps

One of the main challenges in recording a mobile app is simulating your finger taps and other gestures. Although I originally tried incorporating an  animated finger touching different points of the screen, the finger was distracting.

It’s better to use a simple blue dot that bounces here and there, coupled with the touch display white dot that I mentioned earlier (so users can tell when you tap). Other devices, such as the Motorola Xoom, have touch display features as well.

I also recommend using Camtasia for Mac as your editing software, because Camtasia for Mac allows you to “tween” objects, to use a term from Flash. Through the “Blank” animation feature (great name, Techsmith!), you can set a start and end point for an object. Then Camtasia will animate the object from its start to end state.

For example, let’s say you want to simulate typing a word, so you need your blue dot to bounce from key to key. It’s actually quite simple. You add the blue dot (a graphic imported into your Media Bin) somewhere on your recording, and then drag the Blank animation effect onto the annotation on the timeline.

Camtasia will add an arrow with an beginning and end point on the arrow annotation (on your timeline). Click the end of the arrow on your timeline. The arrow’s nose turns red. Now drag your dot where you want the animation to end (usually right where the touch display lights up). Camtasia will gracefully animate the object between the start and end point automatically.

Publishing Formats

As far as delivering the screencast to your mobile users, try publishing the video on a popular video service that serves up the video well on a mobile device. I’m thinking primarily of Youtube or Vimeo. Remember that the typical flash wrapper that video recording software packages video into is problematic on smartphones, so you probably need a video service.

Examples of Mobile Screencasts

Here’s a video tutorial I recently recorded on an Android device using the Screencast Recorder app and process I described above. Make sure you click the gear icon and change the quality to 720 for both videos. (Unfortunately Youtube no longer allows you to set HD to play as the default.)

Here’s a video I recorded about a year ago using an iPhone emulator on a Mac.

Both videos are almost identical in length (3 minutes). The title screens look quite a bit different. And the Android example has the blue dot I mentioned earlier, while the iPhone example uses a cursor.

If your app works the same on both iPhone and Android devices, I’d say use the iPhone technique to emulate the app on your screen. It’s just easier and it seems crisper to me.

follow us in feedly

Madcap FlareAdobe Robohelp

This entry was posted in visual communication on by .

By Tom Johnson

I'm a technical writer working for a gamification company called Badgeville in the Silicon Valley area in California. I'm primarily interested in topics related to technical writing, such as visual communication (video tutorials, illustrations), findability (organization, information architecture), content development (DITA, testing), API documentation (code examples, programming), web publishing (web platforms, Web design) -- pretty much everything related to technical writing. If you're trying to keep up to date about the field of technical communication, subscribe to my blog either by RSS or by email. To learn more about me, see my About page. You can also contact me if you have questions.

6 thoughts on “Creating Video Tutorials for Android and iPhone Mobile Apps

  1. John Collins


    There is an Android emulator that runs through Eclipse. Set up was pretty involved. I’ll try to dig up how I did it. It’s much slower than the iOS Simulator from XCode.

  2. Kirasha

    I just want to say thank you for sharing your insights on creating video tutorials through several of your posts in recent weeks. It’s a format that has sort of fallen into my lap over the last year and I’ve had to do a lot of trial and error as we have no other resources in-house. We haven’t yet started producing them for our mobile apps, but now you’ve started me thinking ahead for when we do. Thank you!

    Also, there is an emulator for Android. We’ve been using it here to test and grab screenshots for documentation. There’s information about it here:

  3. Pingback: Creating Video Tutorials for Android and iPhone Mobile Apps | techcommgeekmom

  4. mike

    For iOS, you couold try AirPlay to either Mac or PC (via Airserver or similar), coupled to your usual screen recorder….

Comments are closed.