2

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

4
  • 1
    You hardly need a preloader since in an AIR app the framework will load almost instantly. If there are other things in your app that you need to wait for, you can simply use some kind of progress bar.
    – RIAstar
    Oct 27, 2011 at 14:51
  • How to show that preloader and a image in a "opening" window for AIR ? Oct 27, 2011 at 15:02
  • 2
    -1 since it is the very same question as stackoverflow.com/questions/7927028/… Oct 31, 2011 at 14:16
  • 3
    The polite way to bring more visibility to your questions on Stack Overflow is to post a bounty. Thanks.
    – sarnold
    Nov 2, 2011 at 1:19

3 Answers 3

6

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).

1
  • Anything between option 1 and 2 would do ..Yes, please I want to see the code.. Can you show me that ? Oct 27, 2011 at 15:55
2

What you mean is a splash screen

Unofficial:

Official:

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.

0
1

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

2
  • What if you are not using mxml; such as a pure actionscript project?
    – Nuthman
    May 6, 2016 at 1:33
  • Well, it's been almost 5 years, but I'd suggest you dig up the Flex sdk docs at it's Apache site and look for the corresponding actionscript
    – SQLiteNoob
    May 6, 2016 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.