Joseph Labrecque

I’m taking a moment to highlight the Visual Media Center at the University of Denver and the relatively new weblog maintained by its Director, Leslie Trumble.

The VMC works very closely with those of us on the DU VAGA development team and most of the feedback we receive about the application originates with users from this area.  This week, Leslie writes about two pretty large additions to the application environment; the inclusion of PicLens on digital object search results,  and a standalone application that I’ve been heavily involved in this summer called the DU VAGA Projection System.

What may be of interest to most of my readers is that the DU VAGA Projection System [VPS] is written using Flex and ActionScript 3 for deployment via Adobe AIR.  Though it is not the first application from the university built for the AIR runtime (see the Fridlyand Kiosk software), it is certainly the most complex.

The software takes advantage of a few AIR-specific capabilities including the ability to integrate with the operating system in terms of hardware discovery (and the flexibility to adapt to various configurations), the power to read and write files to a local hard drive, and extensive use of windowing technology.  This application also makes heavy use of Coldfusion 8 and Flash Media Server 3.

I may be writing more on this software and other efforts at the university in the near future.  In fact, many of my recent posts were born directly from work on this specific project.

Visit Unmasked.

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.