The example in the previous section used a JPG file to
define the splash screen. The disadvantage of that mechanism is
that the application uses the same image regardless of the capabilities
of the mobile device on which the application runs.
Mobile devices have different screen resolutions and sizes. Rather
than using a single image as the splash screen, you can instead
define a custom component. The component determines the capabilities
of the mobile device and uses the appropriate image for the splash
screen.
Use the SplashScreenImage class
to define the custom component, as the following example shows:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\myComponents\MySplashScreen.mxml -->
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<!-- Default splashscreen image. -->
<s:SplashScreenImageSource
source="@Embed('../assets/logoDefault.jpg')"/>
<s:SplashScreenImageSource
source="@Embed('../assets/logo240Portrait.jpg')"
dpi="240"
aspectRatio="portrait"/>
<s:SplashScreenImageSource
source="@Embed('../assets/logo240Landscape.jpg')"
dpi="240"
aspectRatio="landscape"/>
<s:SplashScreenImageSource
source="@Embed('../assets/logo160.jpg')"
dpi="160"
aspectRatio="portrait"
minResolution="960"/>
</s:SplashScreenImage>
Within the definition of the component, use the SplashScreenImageSource class to
define each of the splash screen images. The SplashScreenImageSource.source property
specifies the image file. The SplashScreenImageSource dpi, aspectRatio,
and minResolution properties define the capabilities
of a mobile device that are required to display the image.
For example, the first SplashScreenImageSource definition specifies
only the source property for the image. Because
there are no settings for the dpi, aspectRatio,
and minResolution properties, this image can be
used on any device. Therefore, it defines the default image displayed
when no other image matches the capabilities of the device.
The second and third SplashScreenImageSource definitions specify
an image for a 240 DPI device in either portrait or landscape modes.
The final SplashScreenImageSource definition specifies an image
for a 160 DPI device in portrait mode with a minimum resolution
of 960 pixels. The value of the minResolution property
is compared against the larger of the values of the Stage.stageWidth and Stage.stageHeight properties.
The larger of the two values must be equal to or greater than the minResolution property.
The following mobile application uses this component:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkMobileSplashComp.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.EmployeeMainView"
splashScreenImage="myComponents.MySplashScreen">
</s:ViewNavigatorApplication>
The SplashScreenImage class automatically determines the image
that best matches the capabilities of the device. This matching
is based on the dpi, aspectRatio and minResolution properties
of each SplashScreenImageSource definition.
The procedure for determining the best match is as follows:
Determine all of the SplashScreenImageSource definitions
that match the settings of the mobile device. A match occurs when:
The SplashScreenImageSource definition does not have that
setting explicitly defined. For example, no setting for the dpi property
matches any device’s DPI.
For the dpi or aspectRatio property,
the property must exactly match the corresponding setting of the
mobile device.
For the minResolution property, the property
matches a setting on the device when the larger of the Stage.stageWidth and Stage.stageHeight properties
is equal to or greater than minResolution.
If there's more than one SplashScreenImageSource definition
that matches the device then:
Choose the one with
largest number of explicit settings. For example, a SplashScreenImageSource
definition that specifies both the dpi and aspectRatio properties
is a better match than one that only species the dpi property.
If there is still more than one match, choose the one with
highest minResolution value.
If there is still more than one match, choose the first one
defined in the component.
Blogger Joseph Labrecque 
