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:
- Pegar los thumbs (imágenes pequeñas)
- Convertir cada una en botón (F8)
- Hacer doble clic en cada botón para ingresar en su lÃnea de tiempo
- 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:
- Ubica la imagen y el texto donde deberÃan estar
- Copia todos los elementos
- 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)
| << CLASE ANTERIOR |
Lunes, 14 de Abril de 2008 a las 14.52
¡¡WOW!!
La verdad si que este Curso esta Super Interesante, Completo y Detallado
Te Felicito por este CURSO, Gracias me ha servido de gran ayuda, y que interesante trabajar con peliculas ya que a la hora de modificar información es mucho más fácil…
Martes, 10 de Junio de 2008 a las 01.03
El mejor curso de flash que he visto en años. Realmente no hay otro mejor que este va a ser un clásico de internet muy pronto
Martes, 17 de Junio de 2008 a las 14.28
Hay algo q no entiendo mi pagina integramente en flash tengo un menu con botones interactivos, el boton uno llama a swf externo, serie de fotos (15 fotos) al final tiene un stop; y un boton para regresar a menu principal (no funciona) para q luego del menu llamar al 2.swf lo hizo asi ON pres unloadnum(”cus001.swf , 1) que falta
saludos Victor Manuel Cordova Arequipa Peru