Splash Screens

I just noticed that I’d neglected to include a “startup screen” in the Demine application. The creation of these sorts of screens is pretty straight-forward, and I illustrate it below.

Purpose

The “startup screen” is a static bitmap displayed by the iPhone OS while it’s initializing your program. It is this bitmap that “zooms open” when you start a program, and which displays for the first few moments of the program’s execution. It exists to provide the illusion that the device is more responsive than it is. If you do not provide such a bitmap, a black screen will take its place.

Documentation

Apple provides a nice guide to creating these images. I’m not going to follow their procedure exactly, but the approach they describe is perfectly adequate.

Goal

We want to create a 320×480 PNG file which resembles the first screen displayed by our Demine app, but from which all specific content (i.e. text, buttons, etc.) has been removed. This image will reassure the user that the application is loading, while simultaneously indicating that it’s not quite ready to run yet.

Creation and Capture

To create this image, I’m going to build a special version of the app, run it in the Simulator, and do a screen capture. Fortunately, all the specific content is added (directly or indirectly) by the RootViewController's viewDidLoad method. So, I just comment that out:

/*- (void)viewDidLoad
{
	[super viewDidLoad];

	// … snip …
}*/

Then I run the app in the iPhone Simulator, and take a screenshot. In case I wasn’t the only one who had to look this up:

• Press Command-Shift-4
• Press Space
• Move camera icon over the Simulator window
• Left-click
• Rename the new file (on the Desktop) Default.png

Cropping

I use the Python Imaging Library (PIL) for a lot of stuff, and will use it here to crop a 320×480 image out of the Simulator screenshot which, by default, includes an image of a virtual iPhone wrapped around the pixels we care about. Assuming that the PIL is installed, this bit of Python will do the proper crop:

>>> import Image
>>> Image.open('Default.png').crop((47,139,367,619)).save('Default.png')

I then use the built-in Preview app to copy-and-paste blank pieces of the status bar over the non-blank areas. I don’t think this is really necessary, but it makes me happy.

Project

Finally, I add the Default.png file to the project; I add it to my “Art” source subdirectory and my “Art” file group, but this doesn’t seem to interfere with the OS finding it “in the top level of the application bundle” as the documentation requires.

And we’re done.