Taller de Flash: Movies externas

La clase pasada terminamos de armar una sección de nuestro sitio de ejemplo, pero hubo algo que no me terminó de convencer. Utilizando botones invisibles pudimos crear interactividad con el usuario. Cada vez que el mouse se posaba sobre nuestros botones, algo pasaba pero… ¿No es un atentado a la usabilidad tener que dejar el mouse sobre el botón para que pase algo? ¿Y si el usuario quiere sacar el mouse del botón y hacer otra cosa? ¿Por qué tiene que desaparecer lo que está viendo?

Nuestra sección hasta ahora era “aceptable”. Hoy vamos a aprender a llamar a movies externas para lograr un sitio más dinámico…

¿Por qué utilizar movies externas?

La idea de la clase de hoy tiene mucho que ver con usabilidad: eso que la gente está acostumbrada a hacer en un sitio web y que ponen en práctica los diseñadores para que el uso de la web sea mucho más fácil. En fin… nuestra primer sección tenía una especie de “galería de imágenes”, pero tenía un problema. En primer lugar, había una espacio vacío inicial donde se veía algo únicamente cuando posábamos el mouse sobre alguno de los botones invisibles… ¡Eso es 100% antiusabilidad! ¡Yo quiero hacer cosas sin ser rehén de un botón!

Por eso, esta clase vamos a ver de qué manera podemos hacer que el contenido de nuestra galería de productos se active con un simple clic. Lo vamos a hacer en una nueva sección (yo voy a usar “Hilados”), para poder después hacer comparaciones.

Para empezar, necesitamos una imagen que nos sirva de botonera para la galería de productos, aunque pueden ser varias imágenes que funcionen como botones separados… Es tu elección. Yo en este caso voy a optar por utilizar varias imágenes a modo de botonera.

Repasamos los pasos para la botonera:

1. Pegar los thumbs (imágenes pequeñas)
2. Convertir cada una en botón (F8)
3. Hacer doble clic en cada botón para ingresar en su línea de tiempo
4. Crear nuevos fotogramas en la línea de tiempo

Se pueden hacer variaciones en los fotogramas, cambiando la apariencia del botón según interactúe el usuario. Yo voy a colorear levemente los botones cada vez que alguien pase el mouse encima, para lo cual debo convertir la imágen en gráfico o agregar una capa de color semitransparente sobre la imagen.

A continuación necesitamos mostrar en el espacio del costado (igual que la clase anterior) los detalles de cada uno de los thumbs. Pero esta vez queremos que queden estáticos al hacer clic.

La forma de lograr esto es creando movies (películas) separadas, lo que vamos a llamar movies externas. Como se ve en el gráfico, cada detalle va a estar en un archivo SWF nuevo.

Cada uno de los archivos nuevos (detallex.swf) deberán tener el mismo tamaño que el archivo original del sitio (sitio.swf). Funcionan como transparencias: la movie del detalle se va a superponer con la movie del sitio.

Para ubicar la imagen del detalle en el lugar correcto, puedes usar directamente el archivo original del sitio:

1. Ubica la imagen y el texto donde deberían estar
2. Copia todos los elementos
3. Pega con Ctrl + Shift + V
   De esta manera lo pegarás con precisión exactamente en la ubicación que tenía en el archivo original

Puedes repetir la operación para crear el resto de las movies. Recuerda nombrar los archivos con claridad para que sepas exactamente qué archivo se corresponde con cada botón.

Creando interactividad con ActionScript

Cuando ya tengas todas las movies externas podrás empezar a crear la interactividad. Esto se hace con programación en el cuadro de Acciones (F9).

Es bueno entender de qué estamos hablando. Para empezar aclaremos qué es lo que deseamos que suceda: “Quiero que al hacer clic en el thumb del producto 1 aparezca el detalle de ese producto a la derecha y que quede así hasta que el usuario decida hacer otra cosa… ¡Ah! Lo mismo con el resto de los thumbs…”

Ahora te voy a explicar el código:

on (release) { = haciendo clic
loadMovieNum("detalle1.swf", 2); = traigo la película “detalle1.swf” en el nivel 2

Te preguntarás qué son los niveles… bueno, Flash Player (el reproductor de Flash) utiliza niveles. Cada documento de Flash tiene una línea de tiempo principal ubicada en el nivel 0 de Flash Player. Cuando utilizas la acción loadMovie para cargar otros documentos de Flash (archivos SWF), el Flash Player los mostrará en otros niveles.

Cuando cargas documentos en niveles superiores al 0, estos se amontonan unos sobre otros, como acetatos. Así, la película que ubicamos en el nivel 2 va a estar debajo de la de nivel 3…

Ahora bien. Si primero hago clic en el botón 1 y cargo la película “detalle1.swf”… ¿Qué pasará cuando haga clic en otro botón para cargar otra película? ¡Se superpondrán las movies! Como eso no es lo que queremos, estamos obligados a decirle a Flash que descargue el resto de las movies cuando carguemos una nueva.

Verás que debajo de la acción loadMovie está unloadMovie que significa exactamente “descargar película”. Tenemos que especificar exactamente cuáles películas queremos descargar.

En este caso, la movie “detalle1.swf” corresponde al nivel 2. Tengo un total de 6 movies, o sea: 6 niveles. El nivel 1 lo dejo vacío por las dudas de que después quiera agregar algo. Así que empiezo desde el nivel 2.

Al hacer clic en el botón 1 se cargará detalle1.swf en el nivel 2 y descargo las movies desde el nivel 3 al 7. Cuando quiera cargar la movie detalle2.swf (nivel 3) voy a necesitar descargar la movie del nivel 2 y después las del nivel 4 al 7… Y así sucesivamente.

Por fin logré que al hacer clic sobre un botón (thumb de producto) se cargue una movie individualmente y se descarguen las demás. Pero cuando voy a otra sección del sitio… ¡Siguen las movies cargadas! Claro… es tengo que agregar el código de descarga en cada fotograma.

Como se ve en el gráfico, un fotograma de cada una de las secciones del sitio restantes tiene la acción de unloadMovie. Para insertar una acción en un fotograma, selecciona el fotograma directamente y agrega el código en el cuadro de Acciones. El código:

unloadMovieNum(2);
unloadMovieNum(3);
unloadMovieNum(4);
unloadMovieNum(5);
unloadMovieNum(6);
unloadMovieNum(7);

Ventajas de las movies externas

En este caso, los detalles de nuestros productos son externos. Hay muchas ventajas con las movies externas, pero la principal es que si en algún momento la empresa hace algún cambio de productos, directamente se reemplaza la movie con otra. Si el primer producto (detalle1.swf) cambia, cambio la movie detalle1.swf y cambio el thumb. No tengo que hacer ninguna modificación en el código…

Si sabes que probablemente tu galería de productos varíe con frecuencia, te recomiendo que el listado de thumbs lo hagas como en la clase anterior: una o varias imágenes de los productos por un lado y botones invisibles por otro. De esta forma te aseguras no tocar nada de nada y limitarte a reemplazar el thumb y la movie. Fácil, ¿no?

Bueno, eso es todo por ahora… Te dejo algunos archivos para que puedas ver cómo quedó el sitio y trabajar sobre los originales, reemplazar movies, hacer cambios y editar lo que quieras.

¡Haz clic para ver cómo va quedando nuestro sitio! (tengan paciencia que tarda en cargar)

Haz clic para descargar el archivo FLA original del sitio comprimido (1.64 MB)

Haz clic para descargar los archivo FLA originales de los 6 detalles de productos (598 kb)