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.

[cc lang="mxml"] [/cc]

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).

[cc lang="mxml"] [/cc]

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)

[cc lang="mxml"] [/cc]

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

Posted
AuthorPeter