Cómo hacer una precarga en Actionscript 3

Algún día tenía que llegar y aquí está: El tutorial del preload en Actionscript 3...
El ejemplo que les mostraré será de como añadir un preload al _root de la película principal.
Recuerda que tambien hay un preloader en Flash del normal, por si aún no te pasas a AS3.

Para este tutorial debes haber visto el tutorial basico de Actionscript 3.

Empezaremos creando una clase que llamaremos "PreloadBasico.as", que guardaremos dentro de la carpeta "preloads", que a su vez estará dentro de nuestra carpeta de clases AS3.

Una vez creado el archivo .as abriremos el panel de propiedades de publicación (CTRL+SHIFT+12), y en opciones de actionscript 3 le asignaremos la clase al documento.



En el .FLA montaremos una pelicula con dos fotogramas. El primer fotograma lo dejaremos vacío y solo colocaremos un stop(). En el segundo colocaremos todo el contenido.



Escribiremos la clase "PreloadBasico.as":

Código :

package preloads
{
   public class PreloadBasico extends MovieClip
   {
      public function PreloadBasico ()
      {
      }
   }
}

Como podemos ver, hemos de extender esta clase de la clase MovieClip.
Importamos las clases que utilizaremos:

Código :

import flash.display.Stage;
import flash.display.MovieClip;
import flash.display.Shape;
import flash.text.TextField;
import flash.events.*

Crearemos el preload. Necesitaremos crear un textField para el texto, un shape para la caja y otro shape para el color del relleno.

Código :

   public class PreloadBasico extends MovieClip
   {
      private var texto:TextField;
      private var marco:Shape;      
      private var barra:Shape;
      //----------------------------------------
      public function PreloadBasico ()
      { 
         dibujaPreload();
         posicionaPreload();
      }
      //----------------------------------------
      public function dibujaPreload() {
         texto = new TextField();
         marco = new Shape();
         barra = new Shape();
         marco.graphics.lineStyle(1, 0x000000);
         marco.graphics.drawRoundRect(0, 20, 70, 5, 0);
          barra.graphics.beginFill(0x000000);
          barra.graphics.drawRect(0, 20, 70, 5);
          barra.graphics.endFill();   
         addChild(texto);
         addChild(marco);
         addChild(barra);
      }
      //----------------------------------------
      public function posicionaPreload() {
         texto.x = marco.x = barra.x = stage.stageWidth /2 - marco.width /2
         texto.y = stage.stageHeight /2 - texto.height /2
         marco.y = barra.y = texto.y + 5
      }
   }

La función dibujaPreload() es la que genera los clips y la función posicionaPreload() los coloca en el centro de la pelicula. Para este ejemplo hemos hecho un preload muy simple, únicamente un texto que nos mostrará el porcentaje cargado y una barrita que se va ampliando.



Aqui cada cuál puede editar estas funciones para conseguir el preload que gráficamente más le convenga.

Añadiremos los detectores de eventos y sus funciones:

Código :

   public function PreloadBasico ()
      {   
         dibujaPreload();
         posicionaPreload();
         this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
         this.loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);      
         //----------------------------------------
         function onLoadProgress (event:ProgressEvent):void
         {
            var cargado:int = event.bytesLoaded;
            var total:int = event.bytesTotal;
            var porcentaje:int = cargado/total*100;
            texto.text = "Cargado: "+String(porcentaje)+"%";
            barra.width = porcentaje*marco.width/100;
         }
         //----------------------------------------
         function onLoadComplete (event:Event):void
         {
            removeChild(texto);
            removeChild(marco);
            removeChild(barra);
            nextFrame();
         }
      }

La función onLoadProgress() calcula el porcentajecargado y actualiza los clips del preload.
La función onLoadComplete() se ejecuta cuando la carga de la pelicula está completa, elimina los objetos del preload y manda la pelicula al segundo fotograma (donde está el contenido)

Código completo.

Ejemplo.

 

Tweet