Splash Screens

If you start developing a new Windows Phone 7 application, you usually start by creating a new Visual Studio 2010 project. As part of the initial project, Visual Studio creates a default splash screen for you, consisting of a waiting clock.

DefaultSplashScreen

A Windows Phone splash screen is simply a jpg file with a resolution of 800 * 480 pixels. This means that it is very simple to replace the default splash screen (which is conveniently stored in your Visual Studio project under the name SplashScreenImage.jpg). Just make sure you have a jpg file with the right resolution and also make sure that it is placed in the root of your Visual Studio project. The name must be SplashScreenImage.jpg and its Build Action must be set to Content in the Properties window. Leaving the original splash screen unchanged in your own application gives end users a somewhat boring experience. After all, a splash screen is used to give users the impression that your application starts fast, and it also occupies users while your application is loading. If all applications use the same default splash screen, it will not help giving users a fast starting impression about those applications. So it is important to provide your own splash screen. If an application does not spent much time initializing, the actual amount of time that a splash screen is displayed is very short. For one of my applications, I did create a reasonably nice splash screen, to find out that the splash screen often is displayed for less then a second. My initial thought was to delay application start to allow end users to admire my splash screen. Of course this is a very bad idea, something you should not even consider doing.

SplashScreen1

This splash screen is used in a little game that is available on Marketplace. Typically the game starts up in under a second, meaning the user hardly has time to see the splash screen. The good news is that it is at least not the default splash screen. I have to admit that I considered adding a delay in my application for users to see the splash screen. Of course, and end user might like it once to take a look at this splash screen, but after starting an application several times, the splash screen will become boring since it is just a static image.

On a side note, if you are curious about this game, you can find it here on the Windows Phone 7 Marketplace. Note: This link will work from a Windows Phone 7, or from a PC with Zune software installed.

Back to the story about splash screens though. If you are developing a Silverlight application for Windows Phone 7, take the following idea into consideration.  By far the best experience you can give end users for fast starting applications, is to take a screen shot from your application’s main page. If your application starts with some animation, make sure to take the screen shot from the initial situation (before the animation starts running).

SplashScreen2

Capture

Also, leave the application title / page title out of the splash screen. What I did for my latest application was taking the following shot from the main screen. Once the application is initialized, the application and page title animate in from the top, nice and gently. This gives a very nice experience for end users, and you don’t have to worry that your splash screen is only visible for a very short time, after all, your splash screen partly is your main page.

 

To have some nice page transitions on your main page, you can make use of functionality that is available in the November release of the Silverlight for Windows Phone Toolkit. An in-depth explanation of how to use these page transitions can be found in this MSDN  blog entry by Will Faught.

This is the code that I am using to bring in the application title and page title in an override version of the OnNavigatedTo method:

  1. protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
  2. {
  3.     base.OnNavigatedTo(e);
  4.  
  5.     if (Settings.Instance.ApplicationLaunching)
  6.     {
  7.         SlideTransition slideTransitionFadeIn = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeIn };
  8.         ITransition transitionTitle = slideTransitionFadeIn.GetTransition(this.TitlePanel);
  9.         transitionTitle.Completed += delegate { transitionTitle.Stop(); };
  10.         transitionTitle.Begin();
  11.         Settings.Instance.ApplicationLaunching = false;
  12.     }
  13. }

Only when my application is launching (a new instance of the application is started, or the application returns from being tombstoned), the animation will run. In all other situations ‘normal’ page transitions will be executed. I keep track of the application being launched in the app.xaml.cs source file like this:

  1. // Code to execute when the application is launching (eg, from Start)
  2. // This code will not execute when the application is reactivated
  3. private void Application_Launching(object sender, LaunchingEventArgs e)
  4. {
  5.     Settings.Instance.IsTrialMode = RunningMode.CheckIsTrial();
  6.     Settings.Instance.ApplicationLaunching = true;
  7. }
  8.  
  9. // Code to execute when the application is activated (brought to foreground)
  10. // This code will not execute when the application is first launched
  11. private void Application_Activated(object sender, ActivatedEventArgs e)
  12. {
  13.     Settings.Instance.IsTrialMode = RunningMode.CheckIsTrial();
  14.     Settings.Instance.ApplicationLaunching = true;
  15. }

As you can see, a little bit of code and an additional screen capture from of your application gives you a simple splash screen that is effective for fast loading applications, yet giving the end users a very nice starting experience of your application.

Advertisements
Both comments and trackbacks are currently closed.

Comments

  • Mary Branscombe  On January 24, 2011 at 7:17 PM

    On behalf of all users, can I beg developers not to put in a delay to show off your splash screen; unless it’s the Mona Lisa (and even if it is), users want to get to the app. if you’re that proud of it, add an About link to the settings

    • mstruys  On January 24, 2011 at 7:47 PM

      That is exactly the point I am trying to make in this blog post. An application should not show the default splash screen, but it should definitely start with no delays.

%d bloggers like this: