March 11, 2009
So you finished your amazing new iPhone app, it scrolls like butter, now you need to show the world. You could make a screencast by clicking around in the iPhone Simulator, but that has a tendency to look like you just clicked around in the iPhone Simulator.
I’m starting to put together some screencasts for Tweetie, and a number of developers asked how I made them look so awesome. Today I’m happy to share. The trick is a little app I wrote called SimFinger. It’s not a screencapture tool, rather it’s a bundle of little tricks to make a screencapture of the iPhone Simulator suck less.
First, download a copy of SimFinger. If you launch it, you’ll end up with something that looks like the shot below. SimFinger itself is composed of two parts. One is a fake “frame” that sits ontop of the simulator. It adds some shine and gives it an iPhone 3G-look. Clicking anywhere on it will just click-through to whatever is below. The other part is a little nub that follows around your cursor. It “indents” when you press down with your mouse, indicating what would be a “touch” on the phone.
The idea is to position iPhone Simulator below this facade and do a screencapture of just this area. You’ll need a good screencapture tool - I use (and recommend) Snapz Pro X. It has an option to capture just some sub-region of your screen, and also the option to not capture the mouse pointer (which you should use, unless you want to ruin the illusion).
That alone is great, but SimFinger has some more tricks up its sleeve. Normally when you launch iPhone Simulator you get something rather lame, a few builtin apps and something that looks like:
We want it to look like an iPhone. With SimFinger running, go to the Control menu and select “Set Fake Carrier Text…”. Enter the text “ATT” then, relaunch the iPhone Simulator. You’ll notice the (dead-givaway) “Carrier” is replaced by “ATT”. Do the same for the “Fake Time Text”. Apple typically uses “9:42 AM”, I do the same for my screencasts.
The last step to the puzzle is to give your app some friends. SimFinger comes bundled with “Fake Apps” that mimic Apple’s built-in apps. In SimFinger, goto Control - Install Fake Apps…, then restart the iPhone Simulator one more time. You’ll see a ton of stuff was installed, but it’s probably in the wrong order. Go ahead and re-order the icons to match the screenshot below (the “official” order). Yes, be anal - there is a really nice visual balance to the “Apple-defined” order of the icons. If you’re feeling pompous, go ahead and put your app in the dock. I don’t.
If you haven’t already figured it out, these “Fake Apps” are more than just pretty icons. They are capable of one thing - setting their own badge number. Launching them will give you a list, selecting any number (besides 0) will set a badge icon on the home screen. You don’t have to do this, but it adds a little something to the illusion. Don’t go crazy either – only do it for apps where it makes sense (yes, every fake app is capable of setting a badge number).
You might wonder why there is so much extra whitespace around the simulator. The answer is that the SimFinger “facade” is composed of two layers, one below the mouse-pointer “nub” (which displays the actual body of the iPhone) and one above the “nub”, which is a fuzzy while outline that serves to “fade away” the nub as it reaches the edges of the capture area (see screenshot below). This is particularly handy when compositing the captured area on a larger canvas - you’ll never have to deal with the nub hitting a harsh edge.
The last step is a bit of a doosy. Once you have your captured video, you’ll want to add titles, animate and sexify the video. SimFinger doesn’t do that. I love After Effects, but I’m sure there are some other apps that can do the basics. (Someone let me know if you have any cheaper suggestions – I’d be happy to list a few here).
Some notes: you probably want to hide your Dock. SimFinger currently locks itself to the lower-left of the screen. If you launch SimFinger with iPhone Simulator already running, it will automatically reposition the iPhone Simulator. If they ever get out of whack, just go to Control - Reposition iPhone Simulator Window (you’ll need Accessibility enabled in the System Preferences for this to work).
SimFinger is free. Sort-of. I’m trying my hand at this donationware thing. If you like and use SimFinger, and think it saved you a few hours of work, feel free to drop me a few bucks. I’d be happy to post the source on github so we can build something *really* amazing together. If you’d like to see it open-sourced, go ahead and “vote”… by clicking below :)
Update: SimFinger is now up on github!