Tired of rectangular startup screens? Put more splash in your ‘splash’ screens with this surprisingly easy tidbit.
The Quartz drawing layer of OS X allows us to make a display-only window with an irregular, semi transparent outline (like the one shown on this page) in three easy steps.
A. Create The Image
1. Open your favorite painting program and create a picture of your splash
screen. If you’re at a loss for creative ideas at the moment, just
scatter a couple of shapes in various colors around a 640 x 480 image. Add
a drop shadow to them if your paint program has that feature.
2. Make sure that the background of your image is transparent. In this case
What You See is truely What You’re Gonna Get.
3. Save the image as a tiff file with transparency enabled. (If you’re
using Photoshop make sure its in Macintosh byte order, has no compression and
doesn’t save the image pyramid).
B. Code
1. Create a new project based on the Cocoa Application template.
2. Create a new Objective-C class (in our example we’ll use the class
name ASplashScreenWindow).
3. In the header, set the super class to NSWindow. Your header should now look
something like this:
// Copyright (c) 2003 Art & Logic, Inc. All rights reserved.
// $Id: index.php,v 1.1 2005/09/20 22:42:17 jdueck Exp $
#import <AppKit/AppKit.h>
@interface ASplashScreenWindow : NSWindow
{
}
@end
4. In the source file, add a new function to the class that overrides initWithContentRect.
Here’s the code for that function. If you’re not familiar with
init... style functions, read Apple’s documentation on the Objective-C
language.
- (id)initWithContentRect:(NSRect)contentRect styleMask:(unsigned int)style
backing:(NSBackingStoreType)bufferingType defer:(BOOL)flag
{
// Determine the center of the main screen and set the origin of the content
rect
// so that the window will be centered in the main screen.
NSScreen* mainScreen = [NSScreen mainScreen];
NSRect screen = [mainScreen frame];
NSPoint center = NSMakePoint(screen.size.width / 2, screen.size.height / 2);
contentRect.origin.x = center.x - (contentRect.size.width / 2);
contentRect.origin.y = center.y - (contentRect.size.height / 2);
// Call the inherited init function, but pass NSBorderlessWindowMask instead
of
// the normal style. This will give us a window with no title bar or edge.
id window = [super initWithContentRect:contentRect
styleMask:NSBorderlessWindowMask backing:bufferingType defer:flag];
if (window)
{
// Set the opacity of the window so that we can see through it
[window setOpaque:NO];
// Set the window's background color to a clear color (without this step, the
// normal OS X background with the alternating gray bars will still draw).
[window setBackgroundColor:[NSColor colorWithDeviceWhite:1.0 alpha:0.0]];
// We don't want the window's regular (rectanglar) shadow to draw since our
// splash image already has the shadow in it
[window setHasShadow:NO];
// Make the window sit on top of all other windows. Note that this particular
// level will make the splash screen float above ALL windows, even of other
// applications. As long as its displayed for less then 2 seconds most users
// won't complain about this, but you may want to consider changing the level
// to the highest application level window instead so that the user can
// continue to use their computer while your program is loading. See the
// documentation on NSWindow for descriptions of the various levels of windows.
[window setLevel:NSFloatingWindowLevel];
}
return window;
}
C. Resources
1. Add the tiff file with your splash screen to the Resources folder of the
project.
2. Open the project’s MainMenu.nib file.
3. Choose Read Files... from the Classes menu. You may need to click the Classes
tab in the .nib window to get this menu to activate. Find SplashScreenWindow.h
(or whatever you called the header for your window) and add it to the nib file.
4. Select the window that’s in this nib file and change ints Custom Class
in the Inspector panel to ASplashScreenWindow (or whatever your class is called).
5. Set the size of the window to the size of your image and turn off the Close,
Minimize and Resize buttons.
6. Add an NSImage to the window and make it the same size as the window. Also
set the border to invisible.
7. Set the contents of the image to your splash image (click on the Images
tab and drag your image to the NSImage.
D. Run It!
Additional Ideas
1. Turn the splash screen into an About box by placing the image in a custom
view that handles clicks.
2. Put a progress meter on the screen
3. Add scrolling text by placing an NSTextField in a custom view and then slowly
changing the origin of the text in an NSTimer loop.
4. Fade the window in and out by calling [window setAlphaValue:] over a second
or so.