A super simple approach to Splash Screens for Flex Mobile Apps
If you are fairly new to mobile app development with Flash or Flex, I bet you have run into the following issue when creating your splash screens — You create a splash image that looks great when the device is held in portrait orientation:
…but then when you turn it landscape, you get the white borders (or whatever your app background color is):
…so you change the splashScreenScaleMode property to “stretch” and you get this (destroys the image):
…so then you start looking into how to include multiple splash screens, which requires a custom preloader and additional image work.
[box type="note" style="square" icon="none"]Here’s a quick and simple solution: Put your splashScreenScaleMode back to “none”. Create your splash screen image as a square, and make the side dimensions equal to the length of the device. For example, if the screen is 480×320, make it 480×480, but make sure your artwork fits within the center 320×320. When the app starts, the splash screen is auto centered.[/box]
Below is the same splash screen, but as you can see, I used a single square image that works with both orientations.
What about handling multiple device sizes? The same technique works, as long as you keep the content within the center square that has a width/height equal to the short side of the smallest device you intend to install on.
Below are two images; one for tablets, and one for phones. I’ve drawn the portrait and landscape edges of several popular devices.
Tablets:
The largest tablet I’ve seen is the Motorola Zoom and Samsung Galaxy Tab 10.1, both of which are 1280×800, so my diagram below assumes that it is the largest possible resolution by making the splash screen image 1280×1280:
Click for full-size
Phones:
Phones come in many resolutions. The image below assumes that the largest resolution is 960×640 (iPhone 4), so the image is 960×960:
Click for full-size
Depending on your splash screen design, you could get away with only two images, one for tablets and one for phones. I typically do three images, one for the low-resolution iPhone 3Gs, one for other phones, and one for tablets.
If you are building an app that targets multiple device resolutions, I suggest you use the code below as your preloader. It assumes three images – tablet, high-res phones, low-res phones. It selects the image based on the length of the longest edge of the screen.
// Based on original DPI-based code by Jason San Jose at http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html#articlecontentAdobe_numberedheader_5
// Improved by Christophe Coenraets to select image based on length of longest edge of device - http://coenraets.org
// Simplied by Greg Wilson to use only 3 images for all devices
package
{
import flash.desktop.NativeApplication;
import flash.display.NativeWindow;
import flash.display.Stage;
import flash.display.StageAspectRatio;
import flash.display.StageOrientation;
import flash.system.Capabilities;
import mx.core.DPIClassification;
import mx.core.mx_internal;
import spark.preloaders.SplashScreen;
use namespace mx_internal;
public class MultiDPISplashScreen extends SplashScreen
{
[Embed(source="assets/splash-tablet.png")]
private var SplashImageTablet:Class;
[Embed(source="assets/splash-high-phone.png")]
private var SplashImageHighPhone:Class;
[Embed(source="assets/splash-low-phone.png")]
private var SplashImageLowPhone:Class;
public function MultiDPISplashScreen()
{
super();
}
override mx_internal function getImageClass(dpi:Number, aspectRatio:String):Class
{
var min:int = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY);
if (min > 960)
return SplashImageTablet;
else if (min > 320)
return SplashImageHighPhone;
else
return SplashImageLowPhone;
}
}
}
Great post;thanks!
Since you didn’t specify; it looks like the ‘center’ of the tablet image is 600×600. I didn’t check the phone version.
Yes – good catch. The phone one is 320×320. If you remove the iPhone 3Gs, it’s 480×480.
Enjoy your job!
Do we must always display the center part of the image ?
Why is Flash Builder throwing an “Incompatible override” error at
override mx_internal function getImageClass(…
for me in Flash Builder 4.5?
Are you running 4.5 or 4.5.1? It needs to be 4.5.1.
The signature for getImageClass has changed. Use this:
mx_internal override function getImageClass(aspectRatio:String, dpi:Number, resolution:Number):Class
Great solution!
I like how I have the flexibility to expand this to specifically support each screen size if I wanted to. I’m hoping that in future Flash Builder releases we’ll have something similar to css media queries or even a GUI to set different splash screens similar to how we set different application icon images.
Coming SOON
I feel like this should be obvious; but once we create the class; what do we do with it?
In the ViewNavigatorApplication, setting the splashScreenImage to this class did nothing:
splashScreenImage=”com.utils.MultiDPISplashScreen”
I added some breakpoints. The getImageClass method is never called. Neither is the set splashScreen method in the Application class.
Nevermind; it was in the first article linked to in the code comments. You have to specify the preloader; not the splashScreenImage.
Shouldn’t “else if (max > 320)” read “else if (max > 480)”? Otherwise you’re including the 3GS in with the high res phones (Math.max returns the number with the highest value, which with the 3GS would be between 480 and 320, thus 480).
Ah – you are correct – good catch! I changed it to check the “min” rather than the “max”. Thanks! Greg
The new code can’t be right either. My Xoom is returning 752 for min and choosing SplashImageHighPhone instead of SplashImageTablet.
I’ve only been testing on tablets; not phones; so I don’t have time at the moment to test alternatives; but I switched back to the max approach.
960)
return SplashImageTablet;
else if (resolution > 460)
return SplashImageHighPhone;
else
return SplashImageLowPhone;
}
]]>
Not sure what happened to my comment above but I will try again.
Here is one approach with Sdk 4.6 – You can check the resolution to test for the correct number.
960)
return SplashImageTablet;
else if (resolution > 460)
return SplashImageHighPhone;
else
return SplashImageLowPhone;
}
]]>
<s:SplashScreenImage xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
>
<fx:Script>
<![CDATA[
import com.dealersocket.flex.mobile.common.Profiler;
import flash.system.Capabilities;
import spark.skins.ios.SplashImages;
override public function getImageClass( aspectRatio:String, dpi:Number, resolution:Number ):Class {
Profiler.profile('SplashScreenImage.getImageClass');
//return super.getImageClass(aspectRatio, dpi, resolution);
if (resolution > 960)
return SplashImages.DS_Splash_960;
else if (resolution > 460)
return SplashImages.DS_Splash_960;
else
return SplashImages.DS_Splash_480;
}
]]>
</fx:Script>
</s:SplashScreenImage>
Thanks for the post! I am a designer not a developer, but your image inspired me to create one large image in Illustrator and use 6 different ai artboards to define the sizes (keeping the info central). I was then able to export them out all at once.
Get the same “override” error, with FB4.5.1