Adding a splash screen to your Flex Mobile application

One of the common things you’ll want to do when building mobile apps is add a splash screen. This is an image that shows up while the application is launching and gives a visual indication to the user in the 1 or 2 seconds it takes after clicking.

With the new Flex 4.5 mobile components this is now very easy to add and there are built-in properties that help you do this on Application, ViewNavigatorApplication and TabbedViewNavigatorApplication.

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         firstView="views.HomeView"
                         splashScreenImage="@Embed('splashscreen.png')" />

Its great to have this splash screen there but how do we deal with different devices? Some devices might have much higher specs and launch the app in milliseconds, while on older devices it could take several seconds.

The best practice here is to add a minimum display time for the splash screen, that way you’re sure that even on very fast devices the splash screen will be visible for at least x amount of milliseconds, giving the user the chance to briefly see it.

In the code example below we’re setting the splash screen up to display for at least 2 seconds (so that means 2000 milliseconds).

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           firstView="views.HomeView"
                           splashScreenImage="@Embed('splashscreen.png')"
                           splashScreenMinimumDisplayTime="2000" />

Another important thing to take into account when you release your application across devices is screen size and how your splash screen will scale. We’ve also got a property to set that and have a number of options.

  • none (default) – splash screen does not scale
  • letterbox – splash screen scales to the available screen size but maintains the aspect ratio
  • stretch – splash screen scales to fill the exact screen size (aspect ratio is ignored)
  • zoom – splash screen scales so it completely fills the available screen size (could go outside bounds and crop the image)
1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         firstView="views.HomeView"
                         splashScreenImage="@Embed('splashscreen.png')"
                         splashScreenScaleMode="letterbox" />

 
This is just one of many new mobile features in Flex 4.5 that make it really easy to create applications. Have fun!
 

5 Comments

  • May 5, 2011 - 12:57 am | Permalink

    Good stuff and perfect timing! :-D

  • Pingback: Flash Tutorial: How to Use Splash Screen component in Flex 4.5 Mobile Application | Adobe Flash Lite

  • Farid Valipour
    May 5, 2011 - 7:04 am | Permalink

    Dear Peter

    Thanks and appreciate .

    BR
    Farid Valipour

  • May 6, 2011 - 3:53 pm | Permalink

    Dankuwel voor de post. Maar mijn probleem is nog nt volledig opgelost.
    Weet u soms ook hoe je zo’n splashscreen kan toevoegen via flash professional?
    Ik heb al verschillende sites afgezocht, maar telkens is de oplossing FlashBuilder. Maar ik had mijn applicatie al gemaakt met flash..
    Dankuwel. :)

  • June 12, 2011 - 1:40 pm | Permalink

    Peter: as always your information is timely, accurate and useful! What more could you ask.

  • Comments are closed.

    .