A lot of desktop apps have a splash screen that brands the application while it is loading or performing other processes in the background. Adobe AIR does not have a direct mechanism for this- but the feature can be easily achieved with some nice windowing action.

There are a number of steps to take when preparing your app for this sort of thing. This example was adapted from a much larger application and there may also be some imports and properties that are not necessary for our narrow purpose here. I’m sure my method is not the only one and I’m not saying it’s perfect either! Taking the following steps should produce a similar result though:

1) Edit your application descriptor file to set the initial main application window x and y positions off screen.

<!-- The window's initial x position. Optional. -->
-1000
<!-- The window's initial y position. Optional. -->
-1000

2) I have also set an applicationComplete event within the WindowedApplication node.

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" layout="absolute" horizontalScrollPolicy="off" verticalScrollPolicy="off" showFlexChrome="true" applicationComplete="{init()}" currentState="SplashState"></mx:WindowedApplication>

3) The init function reads as follow:

private function init():void {
	mainWindow = this.stage.nativeWindow;
 
	var splashWindowinitOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
	splashWindowinitOptions.transparent = true;
	splashWindowinitOptions.systemChrome = NativeWindowSystemChrome.NONE;
	splashWindowinitOptions.type = NativeWindowType.UTILITY;
 
	splashWindow = new NativeWindow(splashWindowinitOptions);
	splashWindow.title = "Splash Example";
 
	appSplash = new SplashScreen();
	hiddenCanvas.addChild(appSplash);
	hiddenCanvas.removeChild(appSplash);
 
	splashWindow.stage.scaleMode = 'noScale';
	splashWindow.stage.align = 'topLeft';
	splashWindow.stage.addChild(appSplash);
	splashWindow.x = Screen.mainScreen.visibleBounds.width/2 - 300;
	splashWindow.y = Screen.mainScreen.visibleBounds.height/2 - 200;
	splashWindow.width = 600;
	splashWindow.height = 400;
	splashWindow.activate();
 
	mainWindow.visible = false;
 
	splashTimer = new Timer(1000, 2);
	splashTimer.addEventListener(TimerEvent.TIMER_COMPLETE, removeSplash);
	splashTimer.start();
 
	this.removeEventListener(FlexEvent.APPLICATION_COMPLETE, init);
}

The NativeWindowInitOptions are hugely important as they will render the window chromeless and transparent.

“SplashScreen” is a custom component which simply holds material for display- such as an image or text or whatever you want users to see as a visible splash screen.

Since I am using the ActionScript NativeWindow class here and not the Flex Window component, we must add the display object first to a hidden element in our Flex application. It’s weird but is something you must do if you want your splash screen to be visible when doing it this way.

We then activate our splash window and make the main app window invisible. In the case of this example, I have a timer that runs to determine when to remove the splash screen and bring up the main app window. In most cases, this would instead be reliant on some background process such as a data load.

4) Next comes the function that fires when we want to remove the splash screen and start using our app.

private function removeSplash(e:TimerEvent):void {
	mainWindow.x = Screen.mainScreen.visibleBounds.width/2 - mainWindow.width/2;
	mainWindow.y = Screen.mainScreen.visibleBounds.height/2 - mainWindow.height/2;
 
	mainWindow.visible = true;
	mainWindow.activate();
 
	splashWindow.stage.removeChild(appSplash);
	splashWindow.close();
	splashWindow = null;
 
	currentState = "LoadedState";
	splashTimer.stop();
	splashTimer.removeEventListener(TimerEvent.TIMER_COMPLETE, removeSplash);
	splashTimer = null;
}

So, we reset reposition the main window onto the screen, render it visible again, and activate it. This will cause it to spring to life and now the app is running for our user. We then perform some cleanup routines on the splash screen and timer objects so they will not linger in memory any longer.

There we have it! I’ve made the source available as a Flex Project Archive.