AS3 – Precargar la película principal

Publicado por Iván Gajate el 14 de abril de 2009 en AS3, Flash, Tutoriales

UPDATED: He mejorado un poco la precarga, se puede ver aquí.

Hay varias formas de hacer precargas en AS3, pero la solución más sencilla es precargar nuestra peli principal desde otro swf que haga todo el trabajo sucio.

El método consiste en una peli ligera ‘precargador.swf’ que es la que se embebe en el html, y se le pasa como parámetro la peli que queremos cargar. Cuando se termine la carga, el precargador añade la peli principal al escenario y ésta funciona como si se hubiese cargado directamente en el html.

Así podemos trabajar en nuestra película principal sin preocuparnos de su precarga y sin cambiar nuestra rutina de trabajo, y cuando queramos verla online, tan solo hay que poner el precargador de 8 KB al lado 🙂

Ahora el html podría quedar así (uso el SWFObject):

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
        var flashvars = {cargar:"main.swf", colorPrecarga:"666666", evitarCache:true, texto:"Hola Mundo"};
        var params = {menu:"false", bgcolor:"ffffff"};
        //swfobject.embedSWF(swfUrl,      id,    width, height, version, expressInstallSwfurl, flashvars, params)
        swfobject.embedSWF("precargador.swf", "miFlash", "100%", "100%", "9.0.0", false, flashvars, params);
</script>

Se le pasa como parámetro ‘cargar’ el nombre de nuestra película principal, en este caso ‘main.swf

El único requisito es que nuestra peli principal no realice ninguna acción en el constructor, sino que el DocumentClass tenga un método que inicialice todo cuando se añada al escenario (ADDED_TO_STAGE), así:

public function Main() {
	this.addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event):void{
	// Comienza mi aplicacion		
}

De esta manera, nuestra peli principal, puede ser probada en tiempo de desarrollo, sin necesidad del html, pues al ser el DocumentClass, el evento ADDED_TO_STAGE salta cuando se compila, y también desde el precargador.

La precarga por defecto lleva una animación básica para visualizar el progreso de carga, pero se puede cambiar por otra editando ‘precarga.fla’. Se puede cambiar el color de esta animación mediante la flashvar ‘colorPrecarga’ en el html (por defecto está en negro).

La gestión de esa animación es responsabilidad de la clase PrecargaPreview, que recibe los eventos de OPEN, PROGRESS y COMPLETE para realizar los cambios visuales necesarios.

Se puede evitar la caché del navegador con ‘evitarCache’ (por defecto a false).

También se pueden pasar más flashvar al precargador, y éste se las pasará a la película principal para que las recoja de forma normal medianta ‘loaderInfo.parameters’.

Estoy moderadamente contento con el resultado, me resulta muy útil y fácil de utilizar, y sobre todo súper rápida. Tan solo tengo que copiar el html y el precargador, y darle las dimensiones correctas en el html. Además la película principal una vez cargada se comporta de forma normal, incluso a la hora de hacer un resize del fondo a pantalla completa.

Pero hay unos puntos que en el futuro me gustaría revisar:

  • El modo scaleMode está puesto a NO_SCALE, es la única manera que he encontrado de que se comporte de una forma medio normal, y aunque es el modo que uso siempre, me gustaría hacer esto más flexible.
  • La anchura y altura de la película precargador están puestas a pelo, 400×400 y aunque no es necesario cambiarlo para nada, tampoco me hace mucha gracia tenerlo así.
  • La visualización del progreso de carga, no está todo lo separada que me gustaría (se maneja mediante la clase PrecargaPreview, pero hay varias referencias directas a ella dentro de la clase Precargador.

Ver ejemplo (Flash al 100%):

Ver ejemplo (Flash con dimensiones fijas)

Descargar ejemplo 1 del Precargador

Descargar ejemplo 2 del Precargador

 

13 comentarios para “AS3 – Precargar la película principal”

  1. Muy Bueno

  2. Muy bueno realmente excelente tu entrada, me abres los ojos, una forma sencilla de crear una precarga completamnte reutilizable, y editable gracias…

  3. He tenido la ocasión de probar este método y puedo dar fe de que es realmente útil y rápido.

    Si no te gusta lo del scaleMode, quizás podrías pasarlo también como parámetro desde el html, aunque me parece algo de menor importancia, igual que el tamaño de la película, que se puede cambiar perfectamente cuando edites la animación (porque habiendo creativos de por medio, *siempre* hay que cambiarla)

    Un saludo