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.
-1000
-1000
2) I have also set an applicationComplete event within the WindowedApplication node.
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.
OK… I have to find out if this will work on an AJAX AIR application. New thought… never looked at that at all. Has anyone else tried that yet?
I’d imagine you can just ignore any of the bits that are Flex-related and just use the JS hooks and pure AS code to do the same thing. I’ve used the NativeWindow AS class over the Flex-specific Window component. So just a matter of translation, I should think.
Pingback: Joseph Labrecque » Blog Archive » DU Visual Media Center Weblog
Blog is super
Pingback: [Actionscript 3] swf in locale senza finestra player ( Splash Screen effect ) ) - Forum Flash CS3
Hi Joseph,
I just wanted to say a big ‘Thank you’ for this blog post. I wanted to implement a splash screen on my latest AIR project, and the information provided here was really useful. I managed to use your code within Flash (with a few minor alterations).
I also cross-referenced this with the tutorial on Lynda.com (AIR for Flash Developers) here …
http://movielibrary.lynda.com/html/modPage.asp?ID=535
Section 8. Using Native Windows
Cheers,
Adrian
@Adrian: Glad you found it useful!
Pingback: In Flagrante Delicto! » Blog Archive » DU Visual Media Center Weblog
Great article, very useful. I am having an issue though — binding doesn’t seem to work. For example, if I do something a bit more complex (e.g. add a Text element to the splash), pushing a value into it via binding does not seem to work. Any thoughts?
Thanks for the way you have shown. Yet, I would look for any other way possible. Please let me know if you get some other way(better logical possibility).
That’s an excellent example, how can I replace the timer function for a callback from a function? for example a function which loads everything in background while the splash is displayed and when the process finishes remove the splash?
Thanks
@fexnok
Probably the simplest way to go about it would be to have the timer run infinitely, start the timer and invoke the function to perform your processes. Have the timer keep checking if some Boolean variable (“isProcessed”, perhaps?) is true or fale.
At the end of your processes, just flip the flag to true and have the timer just keep checking that variable, once it’s been set to true, kill the timer, hide the splash, and reveal your UI.
i tested this example in osx and when show the screen splash, show a little left bar, can you help me to fix it?
what’s up with:
hiddenCanvas.addChild(appSplash);
hiddenCanvas.removeChild(appSplash);
i know it doesn’t work without these lines, but why?
Ah, mysteries. I can’t remember :) Has something to do with making it available to the framework for use in ActionScript later on.
Doesn’t work with SDK 4.0.0 only with previous SDK!
“splashWindow.stage.addChild(appSplash);” throws the exception:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.controls::SWFLoader/addedToStageHandler()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\controls\SWFLoader.as:2303]
at flash.display::DisplayObjectContainer/addChild()
at flash.display::Stage/addChild()
Very interesting post. I agree with you. We are very welcome, concreny and above all useful article. Congratulations on the blog and best regards!