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