1. ¿Por qué mi precarga aparece incompleta?

La precarga aparece incompleta debido al proceso de carga que sigue Flash Player. Diversos elementos de la película (clases importadas mediante import y símbolos exportados para ActionScript, fundamentalmente) se cargan en el primer fotograma de la película, para así poder ser usados en toda la línea de tiempo sin ningún error en tiempo de ejecución. No obstante, hasta que Flash no carga un fotograma, no puede mostrarlo; si estamos hablando del primer fotograma, tan sólo veremos un rectángulo blanco donde debería estar la película hasta que ese fotograma se cargue por completo. Si hay muchos elementos que se tienen que cargar en el primer fotograma y su tamaño es muy grande con respecto al de la película completa, tendremos que, para cuando la precarga aparezca, le faltará muy poco para terminar.

2. ¿Cómo puedo evitar que mi precarga aparezca incompleta?

Algunos de los elementos que se exportan en el primer fotograma pueden ser movidos para que se exporten en otro distinto; esto es lo único que podemos controlar. Las clases que importemos mediante la sentencia import siempre se cargarán en el primer fotograma. No obstante, liberar el primer fotograma de todos los símbolos de la biblioteca puede mejorar notablemente el tiempo inicial de carga de la película. Después de todo, nadie quiere que el usuario vea un espacio blanco durante demasiado tiempo.

Los símbolos que exportamos para ActionScript y que, por defecto, se cargan en el primer fotograma, son los que tienen activada la casilla “Exportar para ActionScript” (Fig. 1).
Si tienes la configuración por defecto, debajo aparece otra casilla titulada “Exportar en fotograma 1“. Desactivar esta casilla tan sólo tiene utilidad cuando el símbolo se coloca directamente en la línea de tiempo en tiempo de creación (la clase correspondiente se exportaría en el mismo fotograma en el que aparece el símbolo), pero no tiene ninguna utilidad cuando este se instancia dinámicamente; por tanto, vamos a prescindir de esta opción.

Así pues, vamos a cambiar el fotograma de exportación de clases. Para ello, en la versión CS4 nos dirigimos a Archivo –> Configuración de publicación … –> Configuración… (Script). En esta ventana (Fig. 2), en el recuadro “Exportar clases en fotograma:” escribimos un número distinto de 1 (si el fotograma no existe, el compilador emitirá un error), y ya tenemos solucionados gran parte de nuestros problemas. Esta medida sólo requiere la precaución de no hacer referencia por código a ningún símbolo de la biblioteca hasta que se cargue el fotograma 2. Por ello, todo el código del tipo

var foo:Square = new Square();

Que nosotros tuviéramos en el primer fotograma, tendremos que moverlo al segundo. Si este código estaba en la función constructora de una clase, tendremos que colocarlo en una función init() e invocarla cuando el segundo fotograma esté cargado, simplemente llamándola en ese momento.

3. Mi precarga aparece antes, pero no desde el 0%. ¿Por qué?

Como dije, no todos los elementos que se cargan en el primer fotograma pueden ser controlados por nosotros. Aun así, puedo dar algunos consejos prácticos para reducir el tamaño de ese primer fotograma:

• Cuidado con los objetos 3D en la línea de tiempo. Poner manualmente la propiedad z de un objeto en 1 (!) puede aumentar en un muchicientos por cien el peso del primer fotograma, mientras que colocándolo mediante código, ese aumento es mucho menos acusado.
• Los paquetes que no se utilizan no se añaden a la película, pero trata de optimizar tu código para que los que sí utilices estén eficientemente aprovechados.
• Aprovecha la carga de archivos externos. Esto, aparte de reducir peso en tu película, te permitirá obtener otras ventajas a la hora de actualizarla. Es una muy buena práctica.

Sin embargo, hay que notar también que el tiempo de espera antes de la aparición de la película y el porcentaje en el que comienza la precarga no van unidos. Por ejemplo, puede haber 300 KiB para cargar en el primer fotograma, pero si la película completa ocupa 600 KiB, entonces empezará en el 50%. No obstante, si ocupara 2 MiB, empezaría mucho antes.

4. Quiero una solución definitiva para este problema

No la hay. Hay una alternativa, que es cargar el SWF externamente, usando una película como contenedor. Esto ahorraría el espacio en blanco y haría que la precarga comenzara en el 0%. No obstante, esto no siempre es posible; por ejemplo, puede ser que enviemos un juego a una página de juegos en Flash, en cuyo caso sólo podríamos enviar un SWF (que yo sepa; nunca lo he probado, si dejaran enviar dos la solución consistiría en lo que acabo de decir).

Y eso es todo. Acuérdate de suscribirte a mi blog por correo o vía RSS.

¡Muchas gracias!

Related posts:

1. Precarga en ActionScript 3
2. Deep linking en Flash con SWFAddress
3. Centro Médico Betasalud

Yo usaré para este apunte la versión CS4 de Adobe Flash, pero puedes emplear también la versión CS3. Todos los documentos y archivos que creemos tendrán que tener como versión del lenguaje, obviamente, AS3. Para este apunte necesitaremos tres archivos .fla, todos ellos con la misma estructura. Los tres tendrán dos fotogramas clave: en el segundo colocaremos una imagen para poder simular la precarga más un comando stop(); que detenga la película al final, y en el primero colocaremos las acciones que correspondan a cada uno de los tres casos. Puedes descargar ahora los archivos que he utilizado en el apunte:

Descargar precarga_as3.zip
(2,24 MiB)

Recuerda que para probar la película como si se estuviera descargando, tienes que pulsar Ctrl + Intro dos veces, o bien ir a Control -> Probar película y después Ver -> Simular descarga. En Ver -> Configuración de descarga se puede ajustar la velocidad.

Primero vamos a hacer una pequeña introducción para comprender el sistema de carga de archivos de ActionScript 3.

Introducción. Sistema de carga de archivos en AS3; objeto LoaderInfo

Tal y como podemos leer en la documentación de Adobe Flash sobre la clase LoaderInfo, esta proporciona información sobre un archivo SWF cargado o un archivo de imagen cargado (JPEG, GIF o PNG), como por ejemplo los bytes cargados y por cargar o la URL del archivo, y distribuye una serie de eventos específicos relacionados con la carga y descarga de archivos. Atendamos ahora al diagrama extraído de la misma página:

Si prescindimos de los objetos Loader, que no nos interesan para este apunte, observamos que podemos acceder a la información de la carga de la instancia de la clase principal del archivo SWF mediante su propiedad loaderInfo (que, mucha atención, no pertenece a Stage). En cuanto a los eventos de esta clase, nos interesan especialmente dos:

• El evento progress, que se distribuirá durante la carga del archivo.
• El evento complete, que se distribuirá cuando la carga del archivo haya finalizado.

Además, emplearemos las dos propiedades especiales del evento ProgressEvent: bytesLoaded y bytesTotal, que creo que no necesitan explicación.

Así pues, la sintaxis que seguiremos será la siguiente:

1
2
3
4
5
6
7
8

loaderInfo.addEventListener(evento.TIPO, funcionPersonalizada);
 
function funcionPersonalizada(e:evento):void
{
	// ...
	// e.bytesLoaded son los bytes cargados
	// e.bytesTotal son los bytes totales
}

Y dicho esto, vamos a empezar con nuestro primer ejemplo.

1. Precarga básica en la línea de tiempo

Esta es la manera más rápida y más directa de precargar una película: escribiendo unas pocas líneas de código en la línea de tiempo. Si lo que quieres es una aplicación puntual y no te interesa complicarte la vida, este es tu método. Comienza por crear un documento vacío y guárdalo con el nombre precarga_timeline.fla. Lleva al fotograma 2 alguna imagen que pese bastante (un tamaño cercano a 1 MiB será suficiente, tampoco te pases), y acuérdate de poner un stop();. Ahora escribe en el fotograma 1, como hemos convenido, el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// Importamos los paquetes necesarios
import flash.events.ProgressEvent;
import flash.events.Event;
import flash.text.TextField;
 
// Declaramos las variables
var cargado:Number;
var total:Number;
var porcentaje:Number;
 
// Detener la película al empezar
stop();
 
// Creamos un nuevo campo de texto
var tf:TextField = new TextField();
tf.text = "0% Cargado";
tf.x = (stage.stageWidth / 2) - (tf.width / 2); // Centrado horizontal
tf.y = (stage.stageHeight / 2) - (tf.height / 2); // Centrado vertical
addChild(tf); // Y lo añadimos al escenario
 
// Función para el comportamiento durante la carga
function onLoadProgress(e:ProgressEvent):void
{
	cargado = e.bytesLoaded;
	total = e.bytesTotal;
	porcentaje = Math.round((cargado / total) * 100);
	tf.text = porcentaje + "% Cargado";
}
 
// Función para el comportamiento al finalizar la carga
function onLoadComplete(e:Event):void
{
	// Eliminamos los listener
	loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onLoadProgress);
	loaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete);
 
	// Eliminamos el campo de texto
	removeChild(tf);
 
	// Que dé comienzo la película
	play();
}
 
// Se agregan los listener para las funciones
loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);

Los comentarios hablan por sí solos: estas líneas detendrán la película y mostrarán un cuadro de texto en el centro del escenario con el porcentaje cargado hasta el momento de la película. Fácil, ¿no?

Ver ejemplo de Precarga básica en la línea de tiempo

Como dije, esto es un ejemplo muy sencillo que te sacará de apuros cuando estés a punto de perder el avión y necesites añadir una precarga rápidamente, pero personalmente no me gusta nada porque me condena al copy & paste para siempre. De modo que vamos a ver otra manera:

2. Precarga básica con la clase de documento

Ahora, como buenos programadores en ActionScript 3, vamos a usar una clase para nuestro propósito, y la vamos a asignar a nuestro documento para que haga de clase para la instancia del archivo SWF principal. Crea otro documento con el nombre de precarga_dclass.fla (con la misma imagen en el segundo fotograma y su sentencia stop();) y un nuevo archivo ActionScript con el nombre de PrecargaBasica.as y colócalos en el mismo directorio. Al ser una clase de documento, ha de extender de la clase MovieClip de Flash:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package
{
	// Importamos los paquetes necesarios
	import flash.display.MovieClip;
 
	// Declaramos la clase
	public class PrecargaBasica extends MovieClip
	{
		function PrecargaBasica()
		{
			// Función constructora; se ejecutará al iniciarse la película
		}
	}
}

Ahora, básicamente tendremos que añadir el código que hemos escrito para el primer ejemplo, con algunas modificaciones. Así queda la clase al final:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

package
{
	// Importamos los paquetes necesarios
	import flash.display.MovieClip;
	import flash.events.ProgressEvent;
	import flash.events.Event;
	import flash.text.TextField;
 
	// Declaramos la clase
	public class PrecargaBasica extends MovieClip
	{
		// Declaramos las variables
		private var cargado:Number;
		private var total:Number;
		private var porcentaje:int;
 
		private var tf:TextField;
 
		function PrecargaBasica()
		{
			// Detener la película al empezar
			stop();
 
			// Creamos un nuevo campo de texto
			tf = new TextField();
			tf.text = "0% Cargado";
			tf.x = (stage.stageWidth / 2) - (tf.width / 2); // Centrado horizontal
			tf.y = (stage.stageHeight / 2) - (tf.height / 2); // Centrado vertical
			addChild(tf); // Y lo añadimos al escenario
 
			// Se agregan los listener para las funciones
			loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
			loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
		}
 
		// Función para el comportamiento durante la carga
		private function onLoadProgress(e:ProgressEvent):void
		{
			cargado = e.bytesLoaded;
			total = e.bytesTotal;
			porcentaje = (cargado / total) * 100;
			tf.text = porcentaje + "% Cargado";
		}
 
		// Función para el comportamiento al finalizar la carga
		private function onLoadComplete(e:Event):void
		{
			// Eliminamos los listener
			loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onLoadProgress);
			loaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete);
 
			// Eliminamos el campo de texto
			removeChild(tf);
 
			// Que dé comienzo la película
			play();
		}
	}
}

Y esto es todo; tiene la misma funcionalidad que el primer ejemplo. Como veis, esto nos da más posibilidades: simplemente tengo que tener la clase accesible para poder reutilizarla en mis proyectos, asignándoles a cada uno esta clase de documento.

Ver ejemplo de Precarga básica con la clase de documento

No obstante, y aunque esto contentará a la mayoría, yo todavía tengo algunas pegas:

• ¿Qué pasa si no me interesa que salga un cuadro de texto, sino, por ejemplo, una barra? Tendré que reescribir la clase cada vez que la quiera usar. Yo no llamaría a eso “reutilizar”.
• ¿Qué pasa si yo ya quería usar una clase de documento? Tendré que meter el comportamiento de mi película dentro de la clase PrecargaBasica. Un poco raro, ¿no?

Por estas razones, y esta es mi aportación personal para aquellos a quienes les surjan las mismas dudas, vamos a definir un tercer método con el que hacer una clase de precarga reutilizable de verdad (¿acaso no se inventaron las clases para eso?), aprovechando los métodos de herencia de la programación orientada a objetos.

3. Precarga personalizada con una clase extensible

Vamos a repasar los objetivos que queremos lograr a la hora de desarrollar nuestra clase:

1. Independencia de la clase de documento
2. Mínima cantidad de código para activar la precarga
3. Clase ampliable

Crea otro documento con la misma estructura que los anteriores y llámalo precarga_custom.fla. Copia ahora la clase que hemos desarrollado en el ejemplo 2 en una carpeta llamada precarga, dentro de otra llamada clases, y cámbiale el nombre a PrecargaSuper.fla. Las primeras líneas tienen que quedar ahora así:

1
2
3
4
5
6
7
8
9
10
11

package clases.precarga
{
	// Importamos los paquetes necesarios
	import flash.display.MovieClip;
	import flash.events.ProgressEvent;
	import flash.events.Event;
	import flash.text.TextField;
 
	// Declaramos la clase
	public class PrecargaSuper extends MovieClip
	{

No obstante, si ahora mismo creamos una instancia de PrecargaSuper, bien desde la línea de tiempo o desde la nueva clase de documento, para imitar el comportamiento que hemos diseñado en los dos ejemplos anteriores:

1
2
3

import clases.precarga.PrecargaSuper;
 
var precarga:PrecargaSuper = new PrecargaSuper();

Vemos que no ocurre nada especial; la película se detiene, sí, pero no aparece ningún cuadro de texto. Esto es así porque todas las propiedades y métodos estaban referidos a this (que se omitía) al ser la clase del documento, pero esto ya no sirve si no es así. De modo que tenemos dos opciones: o añadir la instancia de PrecargaSuper al escenario, o pasarle el escenario como parámetro al constructor. Creo que habéis adivinado que esta última me gusta mucho:

1
2
3

import clases.precarga.PrecargaSuper;
 
var precarga:PrecargaSuper = new PrecargaSuper(this);

Y ahora haremos algunas modificaciones a la clase. En primer lugar, ya no hace falta que extienda de MovieClip, ya que no la vamos a añadir al escenario; en segundo, habrá que especificar un parámetro del tipo DisplayObjectContainer en la función constructora; y en tercero, habrá que referir todas las propiedades y métodos a la propiedad root de ese parámetro. Además, para cumplir el tercero de nuestros objetivos (hacer que la clase sea ampliable), vamos a hacer un par de modificaciones más en PrecargaSuper: vamos a quitar todo el comportamiento complementario y vamos a hacerla extensible, cambiando los private por protected. Después de lo dicho este debería ser el aspecto de la clase:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

package clases.precarga
{
	// Importamos los paquetes necesarios
	import flash.display.MovieClip;
	import flash.events.ProgressEvent;
	import flash.events.Event;
 
	// Declaramos la clase
	public class PrecargaSuper
	{
		// Declaramos las variables
		protected var target:MovieClip;
 
		protected var cargado:Number;
		protected var total:Number;
		protected var porcentaje:int;
 
		function PrecargaSuper(_target:*)
		{
			// Se asigna a la propiedad target de la instancia la referida en la
			// función constructora
			target = _target.root;
 
			// Detener la película al empezar
			target.stop();
 
			// Se agregan los listener para las funciones
			target.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
			target.loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
		}
 
		// Función para el comportamiento durante la carga
		protected function onLoadProgress(e:ProgressEvent):void
		{
			cargado = e.bytesLoaded;
			total = e.bytesTotal;
			porcentaje = (cargado / total) * 100;
		}
 
		// Función para el comportamiento al finalizar la carga
		protected function onLoadComplete(e:Event):void
		{
			// Eliminamos los listener
			target.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onLoadProgress);
			target.loaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete);
 
			// Que dé comienzo la película
			target.play();
		}
	}
}

Ahora la clase PrecargaSuper se limita a parar la película al principio, asignar valores a las variables cargado, total y porcentaje y reanudar la reproducción cuando finaliza la carga. Y ahora es cuando viene lo interesante: vamos a hacer una clase llamada Precarga que extienda de PrecargaSuper y que añada el ya famoso cuadro de texto, empleando la palabra clave override para sustituir los métodos de la clase padre y super para invocarlos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

package clases.precarga
{
	// Importamos los paquetes necesarios
	import flash.display.MovieClip;
	import flash.events.ProgressEvent;
	import flash.events.Event;
	import flash.text.TextField;
 
	// Declaramos la clase
	public final class Precarga extends PrecargaSuper
	{
		// Declaramos las variables
		var tf:TextField;
 
		function Precarga(_target:*)
		{
			super(_target);
 
			// Creamos un nuevo campo de texto
			tf = new TextField();
			tf.text = "0% Cargado";
			tf.x = (target.stage.stageWidth / 2) - (tf.width / 2); // Centrado horizontal
			tf.y = (target.stage.stageHeight / 2) - (tf.height / 2); // Centrado vertical
			target.addChild(tf); // Y lo añadimos al escenario
		}
 
		// Función para el comportamiento durante la carga
		override protected function onLoadProgress(e:ProgressEvent):void
		{
			super.onLoadProgress(e);
 
			tf.text = porcentaje + "% Cargado";
		}
 
		// Función para el comportamiento al finalizar la carga
		override protected function onLoadComplete(e:Event):void
		{
			// Eliminamos el campo de texto
			target.removeChild(tf);
 
			super.onLoadComplete(e);
		}
	}
}

Y después de cambiar tres palabras en nuestra película:

1
2
3

import clases.precarga.*;
 
var precarga:Precarga = new Precarga(this);

…ya hemos llegado al final de nuestro ejemplo: tenemos una clase, PrecargaSuper, con el comportamiento básico de la carga y que realmente podremos extender en cada uno de nuestros proyectos; y una clase Precarga, que implementa ese comportamiento básico y además añade funciones nuevas: en este caso mostrar un cuadro de texto, pero puede ser una barra, el típico círculo… Depende de tu creatividad , tan sólo tienes que seguir el modelo que hemos escrito usando super.funcionPadre(parámetros); en cada uno de los métodos.

Ver ejemplo de Precarga personalizada con una clase extensible

Y hasta aquí hemos llegado con nuestros ejemplos de cómo hacer una precarga con ActionScript 3. Espero que te sean muy útiles; siéntete libre de descargar ahora los archivos que yo he utilizado y de adaptarlos a tu gusto y no dudes en poner tus comentarios y sugerencias.

Descargar precarga_as3.zip
(2,24 MiB)

Así mismo, no olvides suscribirte a mi blog por correo o a mi feed RSS si quieres estar al día sobre las novedades en JLC Productions. ¡Muchísimas gracias!

Actualización: Archivos .fla actualizados para poder ser abiertos con Flash CS3
Actualización 2: Error corregido que impedía usar una clase de documento con PrecargaSuper (gracias a AndyX®)
Actualización 3: En este apunte se trata el problema de la precarga que empieza a medias
Actualización 4: Corregido error en el ejemplo básico gracias a Pedro Antonio

Related posts:

1. Precarga en Flash aparece a la mitad
2. Deep linking en Flash con SWFAddress
3. Centro Médico Betasalud