Joseph Labrecque

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.

1
2
3
4

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

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

1
2
3

<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">

3) The init function reads as follow:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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.

In past versions of FMS, developers were barred from accessing raw audio and video data over RTMP and had to resort to a number of hacks and proxies to get around the restriction.  As time went by and new versions of the Flash Player were released, a lot of these loopholes were blocked as well.

With FMS3, there is Client.videoSampleAccess: a property of the Flash Media Server 3 that allows direct access to raw stream data for video use (”audioSampleAccess” for audio).  This can be used for things like producing visual audio spectrums or grabbing a still from a video stream.  It is applied within the onConnect method of the Application server class as demonstrated here:

1
2

appClient.audioSampleAccess = "/";
appClient.videoSampleAccess = "/";

In the above example, the “/” signifies that any streams within the application directory are allowed to be sampled in this way.  You can also specify a semicolon-delimited list of folder names instead if you need to be picky.

Something I came across today and the whole point of this post: even when you have Client.videoSampleAccess set up properly on Flash Media Server, you will still receive a security sandbox violation error #2123 if the stream data is not available.  This can easily happen if you have a timer invoking BitmapData.draw every few milliseconds on loading content.

One way to get around this is using NetStatusEvent.NET_STATUS making sure it reports “NetStream.Buffer.Full” before attempting to access the stream data.  Depending on what you are doing, you can oftentimes check the object recieving the stream data to be sure it is accessible first.  this all seems really obvious now, but threw me for a bit of a loop, initially.

This one threw me for a loop.  So I’ve been using the flash.display.NativeWindow class to create new windows in AIR (via Flex) since the beta releases.  Historically, this has been a pain when you want to add MXML components to the native window as addChild() does not work with the NativeWindow class unless that child object is first added to some other MXML container.  Somewhat of a pain, in practice.

Apparently, the mx.core.Window class was added in AIR 1.0 to resolve this problem.  The Window class is a sort of UIComponent wrapper for a NativeWindow.  This allows you to add other components directly to the Window through addChild().  Though in my particular situation, it simply caused more issues as the Window component class seems to inherit the properties of your initial application window somewhat- therefore, if you are trying to generate chromeless, transparent windows in a standard application interface… you can’t.

In the end, I find flash.display.NativeWindow a lot more flexible than mx.core.Window… and it is most likely a bit lighter in terms of the codebase as well.  The Window class may be a good option in some situations, and it’s really good to know that it exists.  You can never have too many options!