How to make a smooth transition from splash screen to custom splash screen?

Question

The Splash screen guidelines recommend to use a splash screen for a seamless app loading experience and basically advises to draw the splash screen manually and add loading animations when the normal splash screen closes.

 

The image on the above linked article shows what this means:

 

The first screen is the splash screen as shown by the system. Then the same splash screen is drawn by the application code and additional information is added. In this case a loading animation. After that we can use animations to have a seamless transition into the app.

The problem is that I cannot get the transition from screen 1 to 2 fluent as the screen goes black for a brief moment before my custom drawings appear.

The Splash Screen sample  which is supposed to show these techniques has the same issue. The screen is briefly shown black before the custom splash screen appears.

How can I make the transition smooth and prevent the normal splash screen from hiding before my custom screen is ready?

Answer 1

http://code.msdn.microsoft.com/windowsapps/Splash-screen-sample-89c1dc78

Example here shows what happens after the splash is dismissed, and the events that happen thereafter.

Answer 2

thanks. I know of the sample but the sample has the same problem. I have updated my question to make it clearer what I'm asking.

Answer 3

Hi Patrick,

The sample does flash very briefly but it is almost imperceptible.  Are you seeing a long delay?  What are your system specs?

-Jeff 

---

Jeff Sanders (MSFT)

Answer 4

Hi Jeff,

No, not a long delay but it is clearly perceivable and the transition is certainly not what I would call seamless. I guess some people wouldn't mind but I do and I'm sure others will notice this as well.

Is there any way I can prevent this?

I use a Dell XPS 15/i7 with SSD so a rather fast machine.

Patrick

Answer 5

The .appxmanifest has a property in there for Splash Screen that points to the splashscreen.png. Maybe try and remove the splash screen image. See what that does, it might go right to your splash.

Answer 6

Hi Patrick,

You cannot prevent that in the Developer Preview.  There is a bug filed against this so look for it to improve with the next Preview.

-Jeff

---

Jeff Sanders (MSFT)

Answer 7

Thanks Jeff. I'm glad that this will be looked at.

Answer 8

I'm glad to confirm that this has been fixed in the Consumer Preview :-)

Answer 9

Hi Patrick,

The issue as you describe has been resolved for Consumer Preview but please note that when debugging through Visual Studio, a flash is sometimes still seen on transition from system splash screen to extended (app-owned) splash screen. If that is occurring, please try "Running without debugging" to see a more accurate rendition of the user experience.

Additionally, you will see a tip in the documentation you link to in your question that reads as follows:

Tip  If you use fragment loading to load your imitation splash screen page, you may notice a flicker between when the Windows splash screen is dismissed and when your page is displayed. You see this flicker because fragment loading begins to load your imitation splash screen page asynchronously, before the activated event handler finishes executing. You can avoid this unsightly flicker entirely by avoiding the use of fragment loading in your imitation splash screen page. When your additional loading tasks are complete (as demonstrated by the Splash screen sample) you can then navigate to your app’s main page. Alternatively, if you wish to continue the use of fragment loading in your imitation splash screen page, you can also prevent the flicker by getting a deferral and responding to activated events asynchronously. Get a deferral for an activated event by calling the activatedOperation.getDeferral method.

It's important to note that if you are using fragment loading in your app (your extended splash screen HTML is dynamically loaded into your landing page), you may see a flash if you do not wait for that page to fully load before activation completes. If you think that may be happening to you, take a look at the getDeferral method called out above, which enables you to defer activation completion. I've passed this information along to the team and we will investigate best practices for using extended splash screens with fragment loading.

Thanks,

Justin Cooperman