Galería de Fotos Tipo Hilo Dental (Aprendiendo ActionScript 3.0)

Hace tiempo que no escribo sobre ActionScript 3.0 (AS3). Hoy por fin he termino una copia a un efecto hecho con Flash en un sitio que quitaron hace tiempo. Se trata de una tira de fotos que se mueve de un lado a otro como si fuera un hilo dental.


La película flash de arriba muestra como queda finalmente el efecto. Abajo un prototipo del efecto.


El proyecto se llama FlexFloss. Disculpen que mi inglés no sea muy bueno, pero según el diccionario, hilo dental en inglés se dice Floss.

En esta ocasión sólo voy a explicar algunos detalles importantes del proyecto. Pero el código completo lo pueden descargar aquí.

Esta desarrollado en Adobe Flex, pero si han leído los artículos anteriores podrán adaptarlo fácilmente al compilador de AS3 o Adobe Flash CS3.

El proyecto está compuesto por ocho clases:

1. AssetManager.as
2. Caption.as
3. FlexFloss.as
4. FlossPicture.as
5. GiveMeA.as
6. LoadBar.as
7. NervousLoadBar.as
8. Picture.as

Estás clases están relacionadas de esta forma:


^{¿Cómo representar métodos estáticos (static) en StarUML? En el diagrama de clases, dar click con el botón derecho a la clase que contiene ese método, click en Select In Model Explorer, en el panel Model Explorer expandir esa clase, seleccionar el método estático y en el panel Properties cambiar la propiedad OwnerScope de INSTANCE a CLASSIFIER.}

Entrada Del "Sistema"

La entrada de la aplicación es un archivo xml como el siguiente:

<photos>
	<photo>
		<file>http://www.stan.com.mx/flach/floss01.jpg</file>
		<description>muuuh! catsup!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss02.jpg</file>
		<description>mmmm! papas a la francesa!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss03.jpg</file>
		<description>muuuh! hamburguesa con doble queso!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss04.jpg</file>
		<description>mooh! mcflurry y sundae!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss05.jpg</file>
		<description>mooh! breakfast potato!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss06.jpg</file>
		<description>muuuh! lechitas!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss07.jpg</file>
		<description>muuuuuh! big mac!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss08.jpg</file>
		<description>auuu! mcpollo! (mcchicken)</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss09.jpg</file>
		<description>mmmmm! french fries!</description>
	</photo>
</photos>

Basta con editar este archivo para tener una tira de fotos diferentes con otras descripciones.

Barra de Progreso de Carga y Fotos

Bueno, aquí he diseñado algo rarito para lograr que la LoadBar refleje el porcentaje correcto de carga de todas las fotos.

1. Inicializo una LoadBar: loadBar = new NervousLoadBar(750, 150, 0xFF0066);
2. Agrego la LoadBar al escenario: addChild(loadBar);
3. Leo el archivo xml
4. Por cada foto en el archivo xml creo un FlossPicture: picture = new FlossPicture(node.file + "?" + date.time, loadBar, node.description);
5. El constructor de FlossPicture recibe una referencia a la LoadBar y se agrega automáticamente a un Array en la LoadBar: loadBar.add(this);
6. Agrego este FlossPicture al escenario: addChild(picture);
7. Cuando termino de agregar las fotos, entonces comienzo a cargar las fotos (antes no lo hago, porque corro el riesgo de terminar de cargar algunas fotos cuando todavía ni comienzo a procesar otras): loadBar.load();
8. Cuando todas las fotos han terminado de cargarse, entonces las despliego: if (percent == 100) display();

Esto se representa más o menos como en el siguiente diagrama de secuencia.


^{¿Cómo representar eventos (click con el mouse, presionar una tecla o finalizar la cargar de un archivo) en un diagrama de secuencia? ¿Tenía que usar un diagrama de actividades? Bueno, pues yo invente un actor llamado FlashPlayer que ejecuta estos eventos.}

Truco Para Ver La LoadBar Funcionar

A la ruta de cada foto le concateno un query string con la fecha y hora actual para que el navegador no guarde en caché las fotos y tú puedas apreciar el efecto de la barra de carga cada vez que presionas la tecla F5 (actualizar la página).

date = new Date();
...
picture = new FlossPicture(node.file + "?" + date.time, loadBar, node.description);

Entonces el fragmento de código + "?" + date.time no es indispensable en aplicaciones reales.

Asuntos de Seguridad

Pues si el archivo swf lo estamos corriendo en un dominio como http://localhost/ y el archivo xml o las fotos se encuentran en otro dominio como podría ser http://www.stan.com.mx, entonces tenemos que cumplir con las reglas (póliza) de seguridad de ActionScript 3.

Las fotos y el archivo xml deben de conceder un permiso al archivo swf. Para esto debemos crear un archivo crossdomain.xml en la raíz del sitio con una lista de dominios que tienen permisos de interactuar con los archivos de este dominio.

En este ejemplo sería algo así http://www.stan.com.mx/crossdomain.xml.

Y el contenido sería:

<?xml version="1.0"?>
<cross-domain-policy>
	<allow-access-from domain="*"/>
</cross-domain-policy>

El * significa que cualquier dominio puede ocupar los archivos de http://www.stan.com.mx. Pero puedes cambiar el * por cualquier nombre de dominio.

Tener cuidado, porque el Flash Player interpreta http://stan.com.mx y http://www.stan.com.mx como dominios diferentes.

Si trabajas todo en el mismo dominio, entonces no tendrás problemas. Pero sino es así, podrías tener muchas veces el error #2048 Security sandbox violation.

Más información sobre seguridad y dominios.

En Google Developer Day 2008 México

En el Google Developer Day 2008 México todos abuchearon la tecnología de Flash. Pero la tecnología de Flash se ve muy bien y la podemos encontrar en aplicaciones como:

• cajeros automáticos en otros países
• máquinas que venden boletos de avión
• máquinas que venden boletos de cine
• sistemas que controlan edificios (seguridad, comodidad, comunicaciones, compras ..) como el de Reforma 222
• mapas de rutas de aerolíneas
• mapas interactivos
• reproductores de video como el de Vimeo o YouTube que tienen descarga progresiva y streaming

¿Esto es posible hacerlo con JavaScript tan fácil y portable?

Disfruten los últimos días del verano y pónganse a programar con AS3 :] Si surge alguna duda de AS3, escríbeme un comentario y haré lo posible por ayudar.