Adobe AIR - Custom Preloader with Image

Folks,

I have designed an Adobe AIR application. I want to show some preloader on it, before it opens up.

Can anyone guide me with tutorials on preloader aimed for AIR specifically or any already built in ones?

Thanks

Solution 1:

With AIR I can think of a couple of ways to achieve that:

1. with native windows

Set the 'visible' attribute of your main WindowedApplication to 'false'. On 'creationComplete' event spawn a new Window that contains your splash screen. Perform the necessary logic before showing the app. When the bootstrap is done close the splash screen and set the main appliation's 'visible' to 'true'.

2. in one window, using states

Create 2 states (e.g. 'loading' and 'normal'). Set the 'currentState' attribute of your main WindowedApplication to 'loading'. In this state display your splash screen. Perform the necessary logic before showing the app. When the bootstrap is done, set the 'currentState' attribute to 'normal'. In the 'normal' state display your actual application.

3. transparent application

With a transparent AIR application, you could work with states (as in n° 2) and fake windows. Your main application will then be a transparent window that covers the entire screen. You can now position the splash screen and the main view wherever you wish inside this transparent window. Don't worry: you can click through transparent windows so nothing will be blocked.

I could show you some code, but I'd need more specific information about your application.

Edit: example

The easiest solution would be nr 2:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:v="net.riastar.view"
                       currentState="loading"
                       creationComplete="boot()">

    <fx:Script>
        <![CDATA[
            private function boot():void {
                var bootstrap:Bootstrap = new Bootstrap();
                bootstrap.addEventListener(Event.COMPLETE, showApp);
                bootstrap.boot();
            }

            private function showApp(event:Event):void {
                currentState = 'normal';
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="loading" />
        <s:State name="normal" />
    </s:states> 

    <s:Image source="@Embed('splash.jpg')" includeIn="loading" />
    <v:MainView includeIn="normal" />

</s:WindowedApplication>

example with windows

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:v="net.riastar.view" 
                       creationComplete="showSplash()" 
                       visible="false">

    <fx:Script>
        <![CDATA[
            import mx.events.AIREvent;
            import spark.components.Window;

            private var splash:Window;

            private function showSplash():void {
                splash = new SplashWindow();
                splash.systemChrome = "none";
                splash.type = NativeWindowType.LIGHTWEIGHT;
                splash.addEventListener(AIREvent.WINDOW_COMPLETE, boot);
                splash.open();
            }

            private function boot(event:AIREvent):void {
                var bootstrap:Bootstrap = new Bootstrap();
                bootstrap.addEventListener(Event.COMPLETE, showApp);
                bootstrap.boot();
            }

            private function showApp(event:Event):void {
                callLater(splash.close);

                var mainWin:Window = new MainApplicationWindow();
                mainWin.open();
            }
        ]]>

    </fx:Script>

</s:WindowedApplication>

This one requires more explanation: in your application you'll have to set 'systemchrome' to 'none', 'visible' to 'false' and 'transparent' tot 'true'. You also have to set the 'visible' attribute to 'false'. These settings will effectively hide the main application window. We then sequentially create a window for the splash screen and one for the main view. It is important that the main WindowedApplication stays invisible, because another approach would make that window briefly visible before the splash screen shows up (seems to be a bug).

Solution 2:

What you mean is a splash screen

Unofficial:

• http://inflagrantedelicto.memoryspiral.com/2008/07/creating-a-splash-screen-in-air/
• http://www.psyked.co.uk/flex/10-minute-flex-air-tutorial-creating-your-application-splash-screen.htm

Official:

• http://livedocs.adobe.com/flex/3/html/help.html?content=FlexApolloComponents_16.html

However, I do not believe there are hooks that will enable you to show a real time progress of your application load status.

You could try simulating this by embedding an swf that has a (simulated) progressbar showing you fake progress though.

Solution 3:

If this is a mobile app and you just want a splash screen:

Inside the main application's mxml file, insert:

    splashScreenImage="@Embed('MyImage.png')"
    splashScreenScaleMode="zoom"          // optional - display type
    splashScreenMinimumDisplayTime="2000" //optional - display duration

into the ViewNavigatorApplication block.

Check the specs:

http://opensource.adobe.com/wiki/display/flexsdk/Mobile+Splash+Screen