iPhone Splash Screen Tutorial

Creating a Splash Page

We will be adding a splash page that will fade out into our main game screen.  Start by downloading this image and adding it to your project’s Resources Folder. Make sure you check the box to copy this image to the project’s directory.

Now we need to add a View Controller to our project that will handle the Splash View.  Go ahead and add a new file to your project that is a UIViewController subclass. Name this file SplashViewController. Make sure you check to create the .h file as well.

Next, we need to change our AppDelegate to load this view controller instead of our main view controller.  Open up iTennisAppDelegate.h and change it to look like this:

We are basically replacing iTennisViewController with SplashViewController.  Next, open up iTennisAppDelegate.m and change it to look like this:

Again, all we are really doing is changeing iTennisViewController with SplashViewController.  This is because we want to load the splash page initially and not the main game screen.  One main difference to note here is we are allocating a new instance of the SplashViewController. We didn’t have to do that with the iTennisViewController because it was being loaded from a nib and our application initialized it for us.  Since we are building SplashViewController programatically (without a nib), we need to instantiate it.  Next, let’s implement the Splash View.  Open up SplashViewController.h and add the following code:

Let me explain what’s going on here.  First, we see an NSTimer.  This will be used to display the splash page for a certain amount of time before fading to our main game screen.  Next, there is a UIImageView.  This will simply be the imageview of our splash image.

Finally, we see the iTennisViewController.  This is the view controller that we replaced inside of our application’s delegate.  We will be loading it from our splash view. Now, open up SplashViewController.m and add the following code:

This is just synthesizing all of our properties.  Now, add the following code to our loadView method:

Lot’s of new code here.  First off, since we are loading this view programatically without a nib, we have to create the view.  So we get the frame that the application is running in and use it to allocate a new view.  Then we set the view of the SplashViewController to this newly created view.  We have to create the frame to basically tell the application to create a view that is 320×480.

The next thing we do is create the splashImageView from the Splash.png image.  We also need to create a frame for this images.  Think of a frame as an empty container that we will put our image in.  Next we add the imageview to our main view.  This will display it immediately.

Next, we initialize our view main controller by passing it the nib it will load from.  Next, the view’s alpha transparency is set to 0.0.  This makes it completely invisible.  Finally, we add it to our view.  Note that it is on top of the splashimageview but is not visible because the alpha transparency is set to 0.0.

Finally, we start the timer.  This will show the splash screen for 2 seconds before calling the “fadeScreen” method.  Let’s implement the fadescreen method.  I must note that I took the fadescreen method from this post.

Add the following code:

Lots of animation stuff.  Pretty well commented so I wont go into it too much.  Basically, we fade the view out in fadeScreen, then it calls finishedFading when its done.  Finished fading fades the view back in as well as fades viewController’s view back in.  It will now display our main view.  Make sure you remove the splash from the superview or you will get a weird transition.

That’s it for the splash page.  You can Build and Go to see the view transition from a splash to the main game.

You can download the source for this tutorial here