Quantcast
Channel: Gregs Ramblings » Adobe Flash
Viewing all articles
Browse latest Browse all 20

A super simple approach to Splash Screens for Flex Mobile Apps

0
0

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.

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.

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;
		}
	}
}

Viewing all articles
Browse latest Browse all 20

Latest Images

Trending Articles



Latest Images