I was asked how I made the demo video that you can find on the Clean My Screen home page. Since making it was a fairly complicated process, using several tools and applications I thought I’d write it up into a post on this weblog. If you haven’t already, go watch the video before you continue reading. I’ll wait.

Making a demo video using an actual iPhone or iPod Touch is possible but it never looks clean enough. It’s very hard to light it so it’s doesn’t have a lot of glare on the screen and still is recognizable as a shiny Apple device. It’s much easier to use the iPhone Simulator, an application that is used by developers to test their creations on their Macintosh computers before they transfer them to the actual device. It works much faster that way since the connection with an iPhone to a Mac is quite slow.

There is one annoying thing the iPhone Simulator does. It thinks that all video is in landscape format. So when you start playing a video it “helpfully” rotates itself 90 degrees counter clockwise. And that’s not at all helpful when you try to make a screen cast of an application that has videos in it that are not in landscape orientation. There is a keyboard command to rotate the iPhone Simulator back into portrait mode, but you lose a second or two and there are some artifacts in the resulting video. So you need to record more than one take and edit the video. More about that later.

Irritating rotation

In order to make sure the iPhone Simulator is always located at the same position on my screen I used Simfinger, a very handy utility made by Loren Brichter, the developer of Tweetie. If you launch Simfinger with the iPhone Simulator running, it will automatically reposition the iPhone Simulator. That way if you have to come back and make another shot for your demo video (after an update for instance), your screen is in exactly the same place and splicing the old and new video footage together will be possible without too much hassle.

Simfinger “blacks out” the background of the iPhone Simulator with a white background including a glossy screen and a reflection underneath. Very neat is that it includes various fake application that you can “install” into the simulator to really simulate a genuine iPhone, just out of the box.

Simfinger has a simulated cursor in the form of very inconspicuous white circle, but I needed something more spiffy. I wanted to use one of the cleaners in Clean My Screen as a presenter. Another utility came to the rescue! It’s called PhoneFinger and it replaces your Mac’s arrow cursor with a finger or hand. But you can also make your own “hand” cursor and that’s what I did with Pepper’s paw. The hairiest cursor I’ve ever seen.

Blocking out the background and a very hairy cursor.

Okay, so now we have two utilities, but still no way to record the action. There are various applications to capture videos of your screen but I chose ScreenFlow and I was very happy I did. ScreenFlow allowed me to do the capturing of the Clean My Screen app in the iPhone Simulator and the editing of the resulting demo video in one application. No need to save, import, make changes, save again, render video etc. using several separateapplications. I even used ScreenFlow to add the various captions and to compress the resulting video into an mp4 that could be used on the website.

ScreenFlow is not perfect, I’d have loved if it had some precise ways to position things, right now you can zoom in but there is nowhere that you can punch in a couple of co-ordinates so you know that a certain element is at the same place in the whole video. Now there is some guess work involved.

ScreenFlow also allows the user to add a simultaneous voice-over soundtrack, which is useful if you have a voice. Unfortunately while I was making this demo video I lost my ability to speak because I had a laryngitis (infection of the vocal cords). This was actually what inspired me to use Pepper as the presenter. Since Clean My Screen is a rather quiet and serene application I thought having a voice-over would disturb the natural cleaning sounds too much. So I just added some sound effects when Pepper’s paw hits the screen, and lined them up in ScreenFlow and that was it. I saved the video, still from ScreenFlow, into an iPhone compatible mp4 file and I was done.

Well actually I did this many times because there were some text corrections, and even some new recordings after I didn’t like certain aspects of the earlier footage. Doing so was easy because I didn’t use a voice over, and because I used the utilities as described above to keep the background and position the same between recordings. I’m also not afraid when I have to alter the video after I’ll release an update to Clean My Screen and I need Pepper to demonstrate new features.

On the home page the demo movie is presented to you in a Flash interface (provided to me as a present by my friend Colin Holgate) when you view the page using a computer, but when you access the page using an iPhone you get the same mp4 video but now presented as a Quicktime file and it plays just fine on the iPhone.

(This entry was posted on Wednesday, May 13th, 2009 and is filed under development, tech.) You can leave a response, or trackback from your own site.