Effective splash screens for Adobe AIR applications


I have recently been working very furiously on an AIR application and one feature needed as a lot of data is pulled in from a SQLite database was a splash screen so that the application didn't hang whilst data was loaded. I searched around and found a few simple splash screen scripts available but none of them suited my application and fitted in with the structure of my project, which was made up heavily with custom flex components. So I messed around with a few idea myself and came up with something very easy which worked well for me.
I have knocked up a sample Splash screen as an example so lets run through how it was done.
Now the main application is structured around my "WindowedApplication" component and any other pop up windows are either Window's or pop up canvas components, so it worked well for me to use a window component for my splash screen, as well as being easy to manipulate it was also easy to remove the standard & flex chrome so that the Splash screen content only was showing. To remove the chrome you need to go into the application xml file and change the settings as below:

Actionscript:
  1. <systemChrome>none</systemChrome>
  2. <transparent>true</transparent>
  3. <visible>false</visible>

When you first go into this file you will notice that these lines are actually commented out so you will have to remove the <-- --> that surrounds them in order to make them work properly. Now that you have done this you will notice if you test your app that the standard chrome window effect in both windows and mac has been removed and replaced with the flex "systemChrome". This is pretty cool for the main window, but for the splash window we need to have this removed. If you create a custom component based on the window component you can then go into this file and change the settings so that the chrome doesn't show.

Actionscript:
  1. type="lightweight"
  2. showFlexChrome="false"
  3. transparent="true" 
  4. visible="false"

You will notice that the window has been set to lightweight, this is so that it doesn't show in the task bar or dock, we only want the main application to do this. Visible has also been set to false, I have done this as the window is going to be centered on the screen and I have noticed that as it is initially created at 0,0 there is always a flicker as it suddenly changes to the coded coordinates, setting it to visible false, and then to true after the coordinates have been set, gets rid of this and provides a smooth transition. The position is set in the splash windows own class file by simply typing:

Actionscript:
  1. private function init():void
  2.             {
  3.                 this.nativeWindow.x = Screen.mainScreen.visibleBounds.width/2 - this.width/2;
  4.                 this.nativeWindow.y = Screen.mainScreen.visibleBounds.height/2 - this.height/2;
  5.                 this.nativeWindow.visible = true;
  6.             }

All I have done in this window is added a SWFLoader to hold the content for the splash window with an image created in Flash itself.

Now back to the main application window, we need to add the splash window to the stage, but first we need to make sure that the main application is out of the way whilst things are loaded and the splash is on display, setting visible to false is not enough, so in the application xml again we change the applications x & y position to set it off the screen, so something like 2000, 2000. We then add the splash window to the stage.

Actionscript:
  1. <x>-2000</x>
  2. <y>-2000</y>

Actionscript:
  1. mainWindow = this.stage.nativeWindow;
  2. mainWindow.visible = false;
  3.                    
  4. splashScreen = new Splash_Window();
  5. splashScreen.open();

In my app, I have simply added a timer as an effect but you could easily add event listeners to listen out for loading assets. Once this listener has fired, the application simply removes the splash screen and centers the main application window back to the center of the screen.

Get the source files here.

You can leave a response, or trackback from your own site.

2 Responses to “Effective splash screens for Adobe AIR applications”

Leave a Reply

Powered by WordPress | AT&T Cell Phones for Sale at iFreeCellPhones.com | Thanks to PalmPreBlog.com, MMORPGs and Online Shopping