Taller de Flash: Botones avanzados

Habíamos visto la clase pasada cómo hacer botones básicos en Flash. Los botones no son más que símbolos –animados o no, con efectos o no– que están “activados” para realizar determinada acción. Cuando el usuario haga clic sobre nuestro botón, algo pasará.

En general los botones son objetos que al pasar el mouse encima, muestra algún cambio. Sin embargo, no hace falta tener un botón para realizar alguna acción. No es necesario crear la forma del botón. Veamos…

Botones invisibles

Un botón clásico pensaría “Tengo que ser visible y notorio porque quiero que me hagan clic para poder ir a próxima sección del sitio”. La persona que ingresa al sitio ve el botón y piensa “¡Ah! Un botón. Voy a hacer clic para ir a tal sección…”.

Funciona muy fácil. Ahora bien, existen los “botones invisibles” que se usan en casos muy diferentes al de la conversación anterior. Pero antes de explicar esto les voy a decir algo sobre los botones: no siempre son “botones”. Los botones en Flash son “cosas” que generan acciones. O sea que no necesariamente un botón es un círculo con la palabra “aceptar”.

Supongamos que en nuestro sitio tenemos que hacer un muestrario de productos (una especie de galería de imágenes). Vamos a tomar de base la web de lanas que comenzamos a planificar en la clase anterior. En este caso, tenemos una imagen donde están todos los productos en vista pequeña (thumbs) y por otro lado fotos con mayor detalle de los productos que queremos mostrar.

Lo que quiero lograr es que al pasar el mouse por encima de cada foto pequeña, me muestre al costado el detalle de ese producto. Pero NO quiero que cada thumb sea un botón. Lo que voy a hacer es crear botones invisibles…

1. En una capa nueva pego la imagen con los thumbs.
2. Genero un cuadrado pequeño sobre el primer thumb (cuadrado gris).
3. Convierto el cuadrado en botón y hago doble clic encima para entrar a la línea de tiempo del botón.
4. En la línea de tiempo, hago clic sobre el primer fotograma y, manteniendo presionado el botón del mouse, llevo el fotograma clave al último fotograma (zona activa), tal como se ve en la imagen de la derecha.
   Verás al salir que el cuadrado es ahora de un celeste transparente. Eso indica que el botón es invisible. Lo único material del botón es la zona activa.
5. Copio el botón invisible y lo pego sobre el resto de los thumbs, preocupándome que queden espacios entre los botones y que nunca se superpongan.

Lo que conseguí es tener 6 botones invisibles que generan acciones independientemente de la imagen que tengan debajo.

Ya tenemos la primer parte resuelta. Ahora vamos a generar las vistas en detalle del producto. Puede servir para una galería de imágenes, un juego interactivo y otros usos. Lo importante es saber que la imagen del menú (la que tiene los thumbs), los botones invisibles y cada uno de los detalles son elementos separados. Por eso, no es mala idea incluso trabajarlos en capas separadas.

Vamos a empezar con uno de los detalles:

1. Ubico la fotografía ampliada y un texto de explicación del producto en el lugar donde quiero que luego aparezcan.
2. Convierto todo en gráfico y luego en película.
3. Ingreso en la película y creo dos fotogramas clave nuevos. Supongamos, uno en el fotograma 5 y otro en el 10.
4. En el fotograma 1 y el 10 edito el gráfico desde el panel de propiedades eligiendo la opción Alpha 0%. Ahora en esos fotogramas, el gráfico se ve transparente.
5. Le doy interpolación de movimiento a toda la línea de tiempo.
6. Selecciono el primer fotograma y desde el panel de acciones (F9), hago doble clic en Stop (Acciones/Control de película o Global Functions/Timeline Control). Lo mismo en el fotograma 5. Esto es para detener la animación en el primer fotograma y en el quinto, que justamente son transparentes, invisibles.
7. Al salir de la película voy a ver el recuadro invisible. Ahora voy a darle un nombre a la película. La selecciono y –en el cuadro de propiedades– escribo un nombre sin dejar espacios donde dice “nombre de instancia” o “instance name”. En este caso, el nombre va a ser “Producto1″.
8. Repito estos pasos con el detalle de los otros productos.

Uso básico de ActionScript en Flash

Una vez que tenemos todos los botones y todos los detalles convertidos en películas y nombrados vamos a proceder a darle acciones a estos botones. Básicamente, lo que quiero es que inicialmente no se vea nada y, al pasar el mouse sobre un thumb, al costado se pueda ver el detalle del producto, pero al sacar el mouse vuelva a verse la pantalla blanca.

En palabras Flash: quiero que, pasando el mouse sobre el thumb 1, se reproduzca la película “Producto1″. Lo mismo con el resto de los thumbs…

La película a la que llamamos “Producto1″ tiene 3 fotogramas clave: el 1, donde la imagen se ve transparente, el 5 donde se ve con claridad y el 10 donde vuelve a verse transparente.

Ahora yo quiero que al pasar el mouse sobre el thumb 1, se reproduzca la película “Producto1″ y que se detenga en el fotograma 5. Como el fotograma 1 y el 5 tienen la acción Stop, cada vez que la película se reproduzca, quedará congelada en esos fotogramas. Entonces, si quiero llegar al fotograma 5, tengo que comenzar la reproducción por el fotograma 2 que no está detenido.

Las acciones se agregan al botón invisible que está sobre el thumb 1. Se selecciona el botón y presionando F9 se accede al panel de acciones donde escribiré el código ActionScript o lo seleccionaré del listado. Los códigos se escriben en inglés. Y para esta primera esta primera parte se verá así:

on (rollOver) {
tellTarget ("Producto1") {
gotoAndPlay(2);
}
}

Explico:

on (rollOver) = cuando paso el mouse por encima
tellTarget ("Producto1") = le digo a la película “Producto1″
gotoAndPlay(2) = que se reproduzca a partir del fotograma 2

Como en el fotograma 5 tenemos un Stop. Significa que la película se va a reproducir hasta ese fotograma, quedando completamente visible el detalle del producto. Ahora vamos a hacer que al sacar el mouse por fuera del thumb 1, la película se deje de mostrar (llegue al fotograma 10, donde el gráfico es transparente):

on (rollOut) {
tellTarget ("Producto1") {
gotoAndPlay(6);
}
}

Explico:

on (rollOut) = cuando saco el mouse del botón
tellTarget ("Producto1") = le digo a la película “Producto1″
gotoAndPlay(6) = que se reproduzca a partir del fotograma 6

O sea que al desplazar el mouse por fuera del botón, la película va a reproducirse desde el fotograma 6 en adelanta, hasta llegar al fotograma 10, donde la película vuelve a ser transparente o invisible.

Varios botones pueden llamar a la misma película. Se pueden lograr cosas verdaderamente buenas con estas sencillas acciones. Te recomiendo que practiques con las acciones porque es una parte muy importante del programa. Muchas cosas que parecen sencillas no se pueden hacer si no tienes un conocimiento básico de ActionScript.

Para que puedas trabajar en base a algo concreto, te dejo el SWF del sitios que estamos construyendo juntos. En la sección Lanas verás aplicados los conceptos de esta clase.

Haz clic para abrir el SWF (1.86 MB)

Haz clic para descargar el archivo FLA original comprimido (1.87 MB)
(Para ver este archivo debes contar con la versión 8 de Flash o superior)

Échale una mirada a estos archivos para terminar de cerrar la idea y probar acciones… ¡Hasta la próxima!