flash - Adobe AIR-Preloader personalizado con imagen

actionscript-3 flex

Question

Gente,

Diseñé una aplicación Adobe AIR . Quiero mostrar un preloader antes de que se abra.

¿Alguien puede guiarme con tutoriales sobre preloader específicamente para AIR o cualquiera ya incorporado?

Gracias

Answer 1

Con AIR puedo pensar en un par de formas de lograr eso:

1. con ventanas nativas

Establezca el atributo ''visible'' de su aplicación Windowed principal en ''falso''. En el evento ''creationComplete'' genera una nueva ventana que contiene su pantalla de inicio. Realice la lógica necesaria antes de mostrar la aplicación. Cuando finalice el proceso de arranque, cierre la pantalla de inicio y configure la aplicación principal como "visible" en "verdadero".

2. en una ventana, usando estados

Crea 2 estados (ej. ''Cargando'' y ''normal''). Establezca el atributo ''currentState'' de su aplicación Windowed principal en ''carga''. En este estado, muestre su pantalla de inicio. Realice la lógica necesaria antes de mostrar la aplicación. Cuando finaliza el bootstrap, establezca el atributo ''currentState'' en ''normal''. En el estado "normal", muestre su aplicación real.

3. aplicación transparente

Con una aplicación AIR transparente, podría trabajar con estados (como en el n ° 2) y ventanas falsas. Su aplicación principal será entonces una ventana transparente que cubre toda la pantalla. Ahora puede colocar la pantalla de bienvenida y la vista principal donde desee dentro de esta ventana transparente. No se preocupe: puede hacer clic a través de ventanas transparentes para que no se bloquee nada.

Podría mostrarte un código, pero necesitaría información más específica sobre tu aplicación.

Editar: ejemplo

La solución más fácil sería 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>

ejemplo con ventanas

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

Esto requiere más explicaciones: en tu aplicación tendrás que configurar ''systemchrome'' a ''none'', ''visible'' a ''false'' y ''transparent'' tot ''true''. También debe establecer el atributo ''visible'' en ''falso''. Estas configuraciones ocultarán efectivamente la ventana principal de la aplicación. A continuación, creamos secuencialmente una ventana para la pantalla de presentación y otra para la vista principal. Es importante que la Aplicación Windowed principal permanezca invisible, porque otro enfoque haría que esa ventana sea brevemente visible antes de que aparezca la pantalla emergente (parece ser un error).

Answer 2

Lo que quieres decir es una pantalla de bienvenida

No oficial:

• 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

Oficial:

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

Sin embargo, no creo que haya ganchos que le permitan mostrar un progreso en tiempo real del estado de carga de su aplicación.

Podría intentar simular esto incorporando un swf que tenga una barra de progreso (simulada) que le muestre un progreso falso.

Answer 3

Si esta es una aplicación móvil y solo quieres una pantalla de bienvenida:

Dentro del archivo mxml de la aplicación principal, inserte:

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

en el bloque ViewNavigatorApplication.

Verifique las especificaciones:

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