Flex Mobile Development – Dynamic Splash Screens

January 20, 2012By 21 Comments

Flash Builder 4.6 includes a new feature to allow you to add a dynamic splash screen component to your mobile application. This feature will allow you to load a different image based on a few different properties you can set to ensure you get the best image for the right device. The properties you can use to determine which image is displayed for the splash screen are:

dpi
minResolution
aspectRatio

You can combine these attributes as well to get the best possible image selected. It’s very easy to implement, you simple create an MXML component based on the SplashScreenImage property and include as many SplashScreenImageSource objects to cover the number of situations needed. For example, in the following code I’m setting different images depending on both dpi and aspectRatio properties. Note that this example makes an assumption about tablets generally being 160 DPI (thus needing the bigger image), the 320 DPI being the iPhone 4 and above and most android phones at 240 and setting the image based on that. It also assumes that I want to use the landscape version of the image when the aspectRatio happens to be landscape on startup. You could also use the minResolution to further ensure that the 160 DPI is indeed a tablet etc and that will cause the the stage width and stage height to be compared on startup to find the largest number of the two. If it’s equal to or greater than your minResolution setting, it will select that image for the splash screen.

DynamicSplashScreen.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">	
	<s:SplashScreenImageSource dpi="160" aspectRatio="portrait" source="@Embed('assets/texas-768x1024.jpg')"/>	
	<s:SplashScreenImageSource dpi="240" aspectRatio="portrait" source="@Embed('assets/texas-480x810.jpg')"/>
	<s:SplashScreenImageSource dpi="320" aspectRatio="portrait" source="@Embed('assets/texas-640x960.jpg')"/>
        <s:SplashScreenImageSource dpi="160" aspectRatio="landscape" source="@Embed('assets/texas-1024x768.jpg')"/>	
	<s:SplashScreenImageSource dpi="240" aspectRatio="landscape" source="@Embed('assets/texas-810x480.jpg')"/>
	<s:SplashScreenImageSource dpi="320" aspectRatio="landscape" source="@Embed('assets/texas-960x640.jpg')"/>
>/s:SplashScreenImage>

Now in your main application root, you simply specify the name of your component defined above in the splashScreenImage property as follows:

<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
							xmlns:s="library://ns.adobe.com/flex/spark" 
							firstView="views.FrontView"
							splashScreenImage="DynamicSplashScreen">
...
</s:ViewNavigatorApplication>
Portrait Splash

Landscape Splash

Filed in: Apache FlexFlash Builder 4.6Flex 4.6 Tags:

About the Author ()

Comments (21)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Splashscreen Image Scaling - Flashforum | April 8, 2012
  1. Kris Schultz says:

    Do these images have to be embedded at compile time as you’ve shown or can they reference an image stored in the application storage on the device?

  2. mike says:

    please post source code here.Thanks

  3. gtre says:

    is it (Multi-DPI splashscreen) possible in pure AS3? If so, than how? :)

  4. Mr.Chai says:

    can show load progress data?

  5. This feature will allow you to load a different image based on a few different properties you can set to ensure you get the best image for the right device.

  6. Oz says:

    I have a question unrelated to the above topic, but this seemed like a good blog to ask.

    I am developing a AIR application that talks to a back-end server over HTTPS. The application has a tab for allowing users to enter their server authentication credentials.

    If the user enters incorrect credentials, the AIR app pops up a dialog box asking the user to re-enter credential.

    HOWEVER, along with the popup, the underlying Windows 7 OS pops up a “Windows Security” window stating that ‘The server site.com at site.com requires a username and password’ and asks the user to type in a username and password. This did not used to occur on Windows Vista, but does on Windows 7.

    Why does Windows intercept AIR HTTP/S socket traffic and popup a window. How do I eliminate this Windows Security popup?

    Thank you.

  7. ton says:

    My app will show Splash Screens after black screen about 3-5 sec. How to fix first open app show Splash screens suddenly?

  8. hayesmaker says:

    the flex team really don’t like to make thing simple hey

  9. Ramses says:

    Is there any alternative to make this in an Actionscript Mobile project?

  10. DPI and miniResolution is very confusing….

  11. Steve says:

    Can you recommend what size images should be for different dpi’s? Not just for splash screens for font size, tab bar icons, etc… I was just wondering if adobe has a reference for that online somewhere or if there is some sort of formula I should you to calculate sizes.

  12. PIERRE says:

    Is it possible to integrate in a flex mobile project an SWF object ? I try and that’s don’t run

  13. Usama Ahmed says:

    Hi can you show us where to put assets in flex 4.6 mobile project and how to read them in flex or actionscript.

  14. Ida Arias says:

    Thanks guys! Good work!The post source code works greeat.
    http://9pillsonline.com/

  15. Yash Chauhan says:

    Dear Holly, i have a question with iPhone.

    I am building a application in which i am drawing using graphic API of flex but somehow it didn’t showing on iPhone. on simulator and on android i am able to watch same element but not with iPhone. Can you help me in this regard.

    Thanks

  16. Steve Ricketts says:

    Any way to determine if the device is iOS, Android, or Windows at the time the splash screen is displayed?

  17. Anoop says:

    how to set dynamically “splashScreenScaleMode” property????

  18. Starlover says:

    Hi,
    In the video;
    http://flex.org/2011/10/26/best-practices-for-building-flex-tablet-applications/
    at minute;37-40
    They use a system splash screen on IOS to prevent a black screen before showing the actual splash screen.

    How is this working in combination with your example?
    Does it ignore the dynamic splash screen and only loads the system splash screen images?

    Greets, Jacob

Leave a Reply