Alejandra 10 de abril de 2008 a las 16.23
   Imprimir artículo
elWebmaster.com

Taller de Flash: Movies externas


Icono FlashLa 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.

Botonera en FlashPara 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.

Llamando movies externas en FlashLa 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).

loadmovie

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.

unloadMovieVer√°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.

unloadMovie inicialPor 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…

Reemplazando movies en Adobe FlashSi 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.

SWF sitio

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

Archivo Zip

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

Archivo Zip

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

<< CLASE ANTERIOR

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (15)

  1. Danniels Castillo dice:

    ¬°¬°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…

  2. Carlos Andrave dice:

    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

  3. victor cordova dice:

    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

  4. jhonatan dice:

    El curso esta muy interesante es sencillo y muy concreto.

    No enrredan como otros cursos.

    Gracias por estos tutoriales..

  5. xc70 dice:

    Felicidades, las explicaciones son de una claridad pasmosa. Estoy aprendiendo mucho con este taller. Saludos y sigan así.

  6. Giselle Rosales dice:

    Felicidades, estas clases son todas muy practicas con ellas estoy haciendo mi pagina web, precisamente la he trabajado toda llamando swf, en los botones principales de la pagina me funciona muy bien, pero cuando hago los detalles que tambien se deben llamar con un boton no funcionan he aplicado el mismo codigo y no funcionan y si lo hacen acumulan las otras peliculas cargadas y se queda mal, me puedes decir como lo soluciono para hacer que se descargen otras peliculas aparte de las que van con los botones principales, por favor ayudame ya me queda muy poco para terminar realmente solo me queda resolver este detalle.

    Gracias.

  7. Giselle Rosales dice:

    Hola, ya resolvi mi problema ahora si que me funcionan todos los btones con este tutorial ahora solo tengo el siguiente problema la pelicual 1 que esta en el index se me queda en el fondo cuando llamo a la siguiente pelicula es decir la pelicula dos la 1 aparce primero como soluciono esto, pues e slo unico que me queda para terminar, porfavor contesta y ayudame.

    Gracias.

  8. Rodolfo Guzman dice:

    En un galeria con botoneras que activac jpg externos.. como lograria que la imagen quede en memoria..para que no vuelva a cargarla a cada momento..si es que cambio de boton..y vuelvo a uno que lla lei..

    Gracias
    Rodolfo

  9. Guille dice:

    Hola, yo tengo un problema…

    Tengo un index.swf, que contiene una barra de men√ļ con botones que se despliegan en cascada. Cada bot√≥n llama a un swf externo.( Ej: el bot√≥n Contacto, llama a la Movie contacto.swf.)
    Mi intenci√≥n es que al pulsar el bot√≥n contacto(por ejemplo) la Movie contacto.swf se cargue en el fondo de Index, quedando por debajo de la barra de men√ļ y de los botones desplegados en cascada.
    (si contacto.swf se carga encima de Index, la Movie contacto.swf tapa los botones desplegables de la barra de men√ļ.)

    si alguien me quiere ayudar, mi Mail: Gracias de antemano!

  10. Guille dice:

    mail: guillermo.designer@gmail.com

  11. lucy dice:

    AMO ESTE TUTORIALL jaja GRACIASSS me quitaron esa duda y en cierta forma me salvaron xD, MUY BUENOOOOO

  12. hola dice:

    Esta p√°gina me parece lo mejor, todo muy bien explicado.

    Gracias!

  13. pedro (desde espa√Īa) dice:

    Gracias Alejandra, muchas gracias de nuevo.
    Dejo aqu√≠ una muestra de la aplicaci√≥n de esta lecci√≥n… Al clickar en cada car√°tula tienes la informaci√≥n del disco entera. Lo dem√°s es trabajar con la l√≠nea de tiempo y texto. Un poco de dise√Īo y ¬°voil√†! un resultado aparente

    Saludos desde Barcelona

  14. Ricardo dice:

    Felicidades por este tutorial, tengo una duda, ya teniendo todo, a la hora de corregir un “swf” externo ejemplo ‚Äúdetalle1.swf‚ÄĚ lo subo a la web pero no lee el nuevo archivo sigue apareciendo el anterior , que lo guarda en cache, ya le puse algunas cosas al html para evitar el cache pero no me funciona, existe alguna funcion dentro de flash para evitar esto.

    Gracias y sigan asi

  15. Oscar Satizabal dice:

    Excelente !!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder