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. La burocracia es que es un primor

Soy consciente de que el tema esta muy mal documentado en castellano; de hecho, yo encontré muy poca información en los buscadores cuando quise aprender a utilizar esta librería (salvo el videotutorial en DeCabeza.net, que me ayudó muchísimo). Además, los ejemplos que hay disponibles para descargar en su sitio web, aparte de estar repetidos, son, en mi opinión, malísimos. Por esta razón me ha parecido conveniente escribir mi propia aportación para gente que esté interesada en mejorar la indexación de sus webs en Flash y que tenga pereza de buscar información en inglés o que simplemente necesite una explicación detallada de cómo implementar la librería de manera sencilla.

Para este apunte voy a utilizar ActionScript 3 (ya hay un ejemplo muy bueno en AS2 en unijimpe), que es el que recomiendo utilizar. Además, necesitaremos también la librería SWFObject para incrustar nuestros archivos .swf en el documento HTML. Si lo deseas, puedes descargar ya los archivos que he utilizado para el apunte para poder comprobar cómo quedan los ejemplos:

Descargar swfaddress.zip
(66,63 KiB)

Introducción: Descargar las librerías SWFAddress y SWFObject

En primer lugar, dirígete al sitio web de SWFAddress: http://www.asual.com/swfaddress/, y haz click en el enlace “Descargar SWFAddress 2.2″ (esa es la última versión en el momento de escribir esto). El archivo contiene varias carpetas, con montones de ejemplos y documentación además de los archivos en sí, pero nos vamos a dirigir al directorio samples y, dentro de este, al de CS3. Esta carpeta contiene un ejemplo de uso de SWFAddress en ActionScript 3, al que puedes echar una ojeada, pero vamos a construir nosotros nuestro propio ejemplo. Para ello, extrae en un mismo directorio las carpetas swfaddress y swfobject y las clases de ActionScript SWFAddress.as y SWFAddressEvent.as. Ahora ya tenemos todo lo necesario para comenzar a trabajar en nuestro mini sitio web en Flash.

1. Preparar el documento Flash

Crea un nuevo documento en Flash con ActionScript 3 con las dimensiones y la velocidad de fotogramas por segundo que consideres convenientes, y titúlalo swfaddress_web.fla. Yo he utilizado el tamaño estándar de Flash, 550 px de ancho y 400 px de alto, y 30fps. Ahora vamos a incluir algunos elementos para que nuestra película tenga la pinta de un microsite en Flash. Yo he agregado los siguientes elementos:

• En una capa, un campo de texto estático con el texto “SWFAddress fácil con Juanlu” que hace las veces de título.
• En otra, tres botones para la navegación, con el texto “Inicio”, “¿Qué?” y “¿Cómo?”, y los nombres de instancia inicio_bt, que_bt y como_bt respectivamente.
• En una tercera, dos campos de texto dinámicos donde cargaremos el contenido.

El aspecto de la película en este momento es este:

Ya tenemos preparada nuestra película; vamos ahora a añadirle funcionalidad.

2. Agregar el código para el manejo de SWFAddress

Vamos a crear un nuevo documento de ActionScript llamado Document.as y se lo vamos a asignar como clase de documento a nuestra película. Para empezar, escribe las siguientes líneas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	import SWFAddress;
	import SWFAddressEvent;
 
	public class Document extends Sprite
	{
		var webXMLData:XML;
 
		function Document():void
		{
			// Función constructora
		}
	}
}

No tiene ningún misterio. Ahora, vamos a definir en una variable XML el contenido de la web para después cargar la parte que corresponda mediante tres listener que se activen al hacer clic en cada uno de los botones que tenemos en el escenario. Hay que añadir este código a la clase:

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

function Document():void
{
	// Definimos el contenido de la web
	webXMLData =
 
			/
 
			<![CDATA[Cuando estamos trabajando en una web 100% hecha en Flash, lo que más nos preocupa a los desarrolladores es el <u>SEO</u>, es decir, que dicha web esté <i>correctamente posicionada en los buscadores</i>. Para mejorar este aspecto, nos serviremos de una pequeña pero potente librería que cambiará totalmente nuestra filosofía a la hora de enfocar nuestros nuevos proyectos: <b>SWFAddress</b>, la cual nos permitirá asignar a cada estado de nuestra película una URL distinta.
			]]>
			</content>
		</seccion>
		<seccion>
 
			<url>/que/</url>
			<content>
			<! [CDATA[Qué 			]]>
			</content>
		</seccion>
		<seccion>
 
			<url>/como/</url>
			<content>
			<![CDATA[Cómo 			]]>
 
	;
 
	// Añadimos los listener
	inicio_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
	que_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
	como_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
}
 
function mouseHandler(e:MouseEvent):void
{
	// Manejo de los botones
}

Ahora es cuando viene lo interesante: en la función mouseHandler que acabamos de definir, para no complicarnos más la vida ya podríamos cargar en nuestro campo de texto la sección correspondiente al botón en el que se hizo click, pero con SWFAddress esto no se hace así. Este es el código de la función mouseHandler:

1
2
3
4
5
6
7
8
9
10
11

function mouseHandler(e:MouseEvent):void
{
	var _url:String = (String(e.target.name) == "inicio_bt") ? "/" : "/" + String(e.target.name).replace("_bt", "/");
	// Este código producirá, en función del nombre del botón, esto:
	// nombre_bt --> /nombre/
	// que será lo que tomemos como "url"
	// NOTA: El condicional terciario es para transformar /inicio/ en /, más útil
 
	// Línea clave
	SWFAddress.setValue(_url);
}

Este es un punto importante en el flujo del programa: aunque si ahora probamos la película no notaremos ningún cambio, le estamos diciendo a la clase SWFAddress que estamos en la URL definida en la variable _url. Ahora escribiremos la función que manejará esos cambios de URL, la pieza central de nuestro apunte:

1
2
3
4
5
6
7
8

function Document():void
{
	// Añadimos un listener para la función
	SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onSWFAddressChange);
	// El valor al inicio es /
 
	// [...]
}

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

function onSWFAddressChange(e:SWFAddressEvent):void
{
	// URL actual
	var _url:String = e.value;
 
	// Almacenamos en una variable XMLList la sección actual
	var seccion:XMLList = webXMLData.seccion.(url == _url);
 
	trace("SWFAddress value: " + _url);
 
	// Cargamos el contenido
	contenido.htmlText = seccion.content;
 
	// Cambiamos el título
	titulo.text = seccion.title;
	SWFAddress.setTitle("SWFAddress Fácil - " + seccion.title);
}

El código de la clase Document queda ahora así:

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
60
61
62
63
64
65
66
67
68
69

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	import SWFAddress;
	import SWFAddressEvent;
 
	public class Document extends Sprite
	{
		var webXMLData:XML;
 
		function Document():void
		{
			// Añadimos un listener para la función
			SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onSWFAddressChange);
			// El valor al inicio es /
 
			// Definimos el contenido de la web
			webXMLData =
 
					/
 
					<span style="text-decoration: underline;">SEO</span>, es decir, que dicha web esté <em>correctamente posicionada en los buscadores</em>. Para mejorar este aspecto, nos serviremos de una pequeña pero potente librería que cambiará totalmente nuestra filosofía a la hora de enfocar nuestros nuevos proyectos: <strong>SWFAddress</strong>, la cual nos permitirá asignar a cada estado de nuestra película una URL distinta.
					]]&gt;
 
					/que/
 
					/como/
 
			;
 
			// Añadimos los listener
			inicio_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
			que_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
			como_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
		}
 
		function onSWFAddressChange(e:SWFAddressEvent):void
		{
			// URL actual
			var _url:String = e.value;
 
			// Almacenamos en una variable XMLList la sección actual
			var seccion:XMLList = webXMLData.seccion.(url == _url);
 
			trace("SWFAddress value: " + _url);
 
			// Cargamos el contenido
			contenido.htmlText = seccion.content;
 
			// Cambiamos el título
			titulo.text = seccion.title;
			SWFAddress.setTitle("SWFAddress Fácil - " + seccion.title);
		}
 
		function mouseHandler(e:MouseEvent):void
		{
			var _url:String = (String(e.target.name) == "inicio_bt") ? "/" : "/" + String(e.target.name).replace("_bt", "/");
			// Este código producirá, en función del nombre del botón, esto:
			// nombre_bt --&gt; /nombre/
			// que será lo que tomemos como "url"
			// NOTA: El condicional terciario es para transformar /inicio/ en /, más útil
 
			// Línea clave
			SWFAddress.setValue(_url);
		}
	}
}

Ahora sí: si probamos nuestra película, podemos ver cómo el texto de las secciones cambia al hacer clic en cada uno de los botones:

Pero la magia no acaba aquí: la gracia está en que queremos que funcione como una página web. Para eso necesitamos, como no podía ser de otra manera, un documento HTML.

3. Final: el documento HTML

Ahora, para finalizar, vamos a crear el documento HTML en el que insertaremos la película. En un nuevo archivo llamado index.htm escribe este código:

1
2
3
4
5
6
7
8
9

<!-- Importamos las dos librerías necesarias -->
<script src="swfobject/swfobject.js" type="text/javascript"><!--mce:0--></script>
<script src="swfaddress/swfaddress.js" type="text/javascript"><!--mce:1--></script>
 
<!-- Insertamos el contenido Flash -->
<script type="text/javascript"><!--mce:2--></script>
<div id="flashcontent" style="margin: 0 auto">
 
<strong>Necesitas Flash Player. </strong></div>

Y ya hemos terminado nuestro ejemplo. Para comprobar las posibilidades de SWFAddress, sigue el siguiente enlace:

Ver ejemplo terminado de SWFAddress en Flash

Ahora puedes comprobar que, cuando haces clic en las diferentes secciones, además de variar el contenido varía la URL y el título de la página. Esas distintas URL funcionan como una dirección de internet normal: por ejemplo, las puedes agregar a favoritos y acceder siempre que quieras a esa parte de la web que te interesa. Y por si fuera poco, se pueden emplear los botones atrás y adelante del navegador, algo a lo que los usuarios están muy acostumbrados y que agradecerán enormemente al visitar tu sitio.

Aquí tienes los archivos que he utilizado disponibles para descargar:

Descargar swfaddress.zip
(66,63 KiB)

Te animo a que los utilices y a que, si te he ayudado, puntúes este apunte o escribas un comentario. No olvides suscribirte a mi blog por correo o vía RSS si quieres tener noticias sobre mi actividad

¡Muchas gracias!

Related posts:

1. Precarga en ActionScript 3
2. Precarga en Flash aparece a la mitad
3. Bienvenidos a JLC Productions

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