Alejandra 27 de marzo de 2008 a las 13.00
   Imprimir artículo
elWebmaster.com

Taller de Flash: Botones


Flash IconLos botones son fundamentales para la interacción de cualquier sitio web creado en Flash. Desde el punto de vista del diseño, un botón debe ser notorio y evidente. Esto es para favorecer la usabilidad, guiando al usuario que navega en nuestro sitio hacia donde desee ir.

La función básica de un botón es la navegabilidad, llevándonos de una parte a otra de la página (de una escena a otra, de un fotograma a otro). Para esto vamos a necesitar conceptos básicos de ActionScript. No temas: es muy fácil.

Usabilidad

Un botón no es más que un símbolo, al que luego se le da la instancia de Botón. En lo que se refiere al aspecto gráfico de un botón, es bueno tener en cuenta nociones básicas de usabilidad. Un botón no es un link, sino algo más notorio que quiero destacar para que el usuario se desplace por mi página. Algunos diseñadores deciden innovar con el aspecto de los botones, sin tener en cuenta que los internautas ya tienen una estructura armada de cómo se ven los elementos web y esta estructura es muy difícil de romper.

Lo que se debe lograr con un botón es contraste, volumen (ya sea saliente o hundido) y pregnancia. El texto del botón debe ser lo más breve y claro posible, sin dar lugar a dudas.

El mismo tratamiento de un botón, se le puede dar a un grupo de solapas, aunque generalmente en este caso no es necesario utilizar volumen.

Diseño y creación de un botón

Los botones o solapas pasan por tres estados, según como va interactuando el usuario:

  1. Reposo: Es la vista pasiva del botón, sin ningún tipo de acción por parte del usuario.
  2. Sobre: Es cuando el usuario pasa el mouse sobre el botón. El diseñador puede incorporar algún cambio en esta instancia, por ejemplo que el botón se “ilumine” cuando se pase el cursor por arriba.
  3. Presionado: Es el momento en que el usuario hace clic sobre el botón. Puedes hacer que en ese instante, el botón se desplace, se oscurezca o lo que creas acorde al diseño.

Instancias de Botón en FlashNo es necesario animar o hacer que el botón varíe en cada una de las instancias. De hecho no es muy común ver variaciones en la tercera instancia.

No hay que abusar de los recursos de Flash, pero sí saber que esos recursos existen y que puedes hacer uso de ellos cuando creas conveniente. Muchas veces son los pequeños detalles de un sitio web los que hacen la diferencia.

Creación de un botón en FlashVeamos una forma sencilla de generar un botón:

  1. Crea el soporte, la forma.
  2. Agrega algún efecto para separar la forma del resto del diseño, dando volumen (esto es opcional).
  3. Escribe y ubica el texto del botón. Debe ser corto y claro.

Con estos tres pasos has creado un símbolo que luego pasará a ser un botón en estado de Reposo. Así se verá cuando ingreses al sitio, sin realizar ninguna acción.

Estructura de un botón

Lo que quieres lograr ahora es que el botón se anime según el comportamiento de los usuarios. Queremos llegar a los otros estados (sobre y presionado) y además queremos que al presionar el botón realmente suceda algo.

Como nos instruye Adobe, “los botones son en realidad clips de película interactivos de cuatro fotogramas. Cuando se selecciona el comportamiento del botón para un símbolo, Flash crea una línea de tiempo con cuatro fotogramas.

Instancias del botón: reposo, sobre y presionadoLos tres primeros fotogramas muestran los tres posibles estados del botón; el cuarto fotograma define el área activa del botón. La línea de tiempo no se reproduce realmente; reacciona a los movimientos y las acciones del puntero saltando al fotograma correspondiente.”

Cada estado del botón es independiente del otro. Puedes hacer que en el estado reposo el botón sea una flor, cuando el cursor esté encima se convierta en un corazón y cuando hagas clic pase a ser una nube.

En la temática de programación, las acciones deben asignarse a la instancia del botón del documento y no a los fotogramas de la línea de tiempo del botón. No te preocupes… esto lo veremos la siguiente clase.

Animar el botón

Ahora que sabes la estructura, convierte tu símbolo en Botón presionando F8. Cuando hagas doble clic sobre tu botón, notarás un cuadro similar al de la última imagen en tu línea de tiempo. La única diferencia es que solamente el fotograma de Reposo estará lleno. Puedes completar el resto de los fotogramas con F6, generando fotogramas clave.

Cuando tengas todos completos, ve al fotograma Sobre y realiza cambios en el símbolo. ¿Qué cambios hacer? Agrega luz para “iluminar el botón”, desplázalo para darle movimiento, incorpora sombra, cambia el tono del color, etc. Puedes convertir el símbolo en gráfico para tener más opciones de edición o convertirlo en película para que, al dar movimiento, este sea más suave y controlado.

En general no se utiliza la instancia de Presionado, pero en el caso que quieras que tu botón se vea diferente cuando alguien haga clic sobre él, puedes repetir el paso anterior.

El cuarto fotograma es el estado Zona activa, que define el área que responde al clic del mouse. Esta área es invisible en el archivo SFW.

Ejemplos de la Zona Activa de un botónEl área es generalmente de igual tamaño y forma que el botón. De hecho, cuando creamos un nuevo fotograma clave en Zona activa, se repite la figura del símbolo y no tenemos necesidad de crear un recuadro para delimitar el área. Pero te voy a dar un caso en el que sí es necesario que el área sea diferente: supongamos que los botones son pequeños y el texto está a un lado.

En la imagen, la zona activa del Botón 1 es únicamente el botón. Esto significa que el usuario deberá llevar el cursor directamente encima del círculo para poder hacer clic, algo muy preciso sin sentido (dale facilidades a los que visiten tu web). Por otro lado, la zona activar del Botón 2 abarca el texto. En este último caso, el usuario podrá hacer clic tanto en el círculo como en la palabra para activar el botón. ¡Es mucho más práctico!

Botones animados

Animar los botones no es más que seguir la lógica de los clips de película. Veamos: en el estado reposo voy a tener un símbolo sin movimiento. Lo que quiero es que cada vez que pase el mouse sobre el botón, éste se mueva. A ver si me sigues:

  1. Agregar un fotograma clave en el estado Sobre.
  2. Selecciona los elementos del botón que van a tener movimiento (puede ser todo) y conviértelos en “Clip de película”.
  3. Haz doble clic para ingresar en la película.
  4. Convierte todos los elementos de la película en Gráfico para poder generar la animación.
  5. Crea la animación. Es exactamente igual que hacer una película, sólo que estavez la película está dentro de un botón.
  6. Antes de cerrar la instancia de película, selecciona el último fotograma ocupado en la línea de tiempo. Presiona F9 y haz doble clic en la opción “stop” del menú izquierdo, en la carpeta Control de película. La clase siguiente hablaremos de programación, pero para empezar… Lo que estás haciendo con este comando es decirle a Flash que detenga la animación en el último fotograma, de otra manera se repetiría indeterminadamente.
  7. Agrega los fotogramas clave en los estados de Presionando y Zona activa.
  8. ¡Listo! Prueba tu animación (Ctrl+Enter).

Verás que cada vez que pases el cursor sobre el botón, este se moverá. Hay infinitas posibilidades. Sé creativo porque hay quienes dicen que Internet está todo dicho, pero no es así. Flash nos da suficientes elementos como para poner en práctica nuestra capacidad de diseñadores.

He creado un sitio de ejemplo para que veas una botonera en su hábitat ;) Una botonera funcional. A continuación podrás descargar un listado de archivos SWF con distintas alternativas con animaciones y cambios de color:

icono swfBotones con cambio de color

icono swfBotones con iluminaciones

icono swfBotones con movimiento

icono swf Botón con cambios en el estado de Presionado

Además, te ofrezco descargar los archivos originales FLA comprimidos (ZIP) para que puedas ver cómo estan hechas las botoneras, desde la creación de los botones hasta el proceso de animación y la programación:

Zip file Archivos originales FLA comprimidos (1,79 MB)

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


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

Comentarios (22)

  1. Nelson dice:

    Hola: en realidad no es taaaan complicado, aunque en principio “saca canas”, bonita la clase de hoy, realmente se pueden realizar muchas cosas solo con esto, espero ancioso la siguiente clase.

    PD: La imagen de la semana está buenísima, me hizo reir bastante. chau

  2. juan dice:

    Gracias por el apoyo
    me estoy iniciando en esto y me parece bueno las lecciones
    un abrazo

  3. marialix quintero dice:

    me parecio buenisima la clase, pero si quiero que ese boton llame a un swf . ¿como hago?. por cierto como hago para programar un boton salir, con la finalidad de cerrar el swf por medio de un boton

  4. Alejandra dice:

    Hola Marialixm! Para hacer que un botón abra un swf, sólo debes ir al panel de acciones y agregar la siguiente acción:
    on (release) {
    loadMovieNum(“”, 0);
    }

    Dentro de las comillas indica el archivo (y la ubicación, si es que está en otro lugar que el swf con que estás trabajando) o el URL de la película que quieres llamar y escoge el nivel que deseas darle a esta película.

    Puedes leer más sobre esto en la clase de Movies externas:
    http://www.elwebmaster.com/talleres/taller-de-flash-movies-externas

  5. David Montellano dice:

    Muchas gracias por estos tips, ahora veo la potencia que tiene flash, y tambien se puede conbinar con el css verdad? bueno estoy muy emocionado creo jejeje saludos y animo sigue igual con tus enseñanzas hasta ahorita le voy entendiendo a la mayoria hasta aquí.

  6. Veronica dice:

    A quien Corresponda:
    Quisiera hacerle una consulta ya que yo realice el curso de flash en el 2004, quisiera realizar un cd interactivo y no me acuerdo como se hacia para que todos los botones de la primera escena se copien el en las sigientes. Desde ya les agradeceria que me quiten esa duda.
    Veronica

  7. orlando dice:

    muy bueno, pero trato de que al hacer click en uno de los botones me lleve a otra fotograma pero no he podido me podrian ayudar, gracias

  8. Alejandra dice:

    Por favor, indícame paso a paso qué has hecho para poder ayudarte. Saludos.

  9. oscar ivan dice:

    hola me gustaria que me enviaras todas estas clases sobre flash es que la verdad siempre me ha llamado la atencion este software y quiero aprender lo mas que se pueda y prometo enviarte mis avances jeje bueno te agradeceria si me los mandas

    gracias y un cordial saludo

  10. Alejandra dice:

    Hola Oscar. Puedes seguir las clases directamente desde este blog. Te dejo el índice con todas las clases para que puedas empezar en orden:
    http://www.elwebmaster.com/talleres/taller-de-flash-temario
    ¡Saludos y cualquier duda que tengas, déjala en los comentarios!

  11. garcia montes gisel dice:

    me parece muy bien pero le falta como ponerle acciones a un botton para que corra completamente

  12. Alejandro dice:

    Hola, excelentes las explicaciones. Mi problema es uno, o dos, no sé. Por un lado, al colocar el archivo mediante html en mi sitio (aún no lo tengo on line) la imagen o el objeto en cuestión aparece muy pequeño, sin el tamaño real. Pasa con los botones que realicé yo y también con el que bajé de esta página. Probé agrandarlo y se me sale del lugar. ¿Habrá solución? Gracias, muy amable.

  13. Anon dice:

    Exelente te agradesco la clase!!!
    Un gran Abrazo!!

  14. manuelromeor dice:

    soy principiante yestoy analizando me interesa bastante la clase de formulario pero tengo que empeasar e o

  15. manuelromeor dice:

    me gustaria un archivo comprimido en .zip con una esplicacion de formularo para enviar comentario al corre. les agradeceria mucho como la delos botenes exelente

  16. jose nava nava dice:

    pues esta chida la informacion

  17. Carlos Eduardo dice:

    Hola bueno el tuturial esta genial, pero no me cabe aun la idea de la zona activa, tengo unos botones que cuando se les presione queden marcados de alguna forma, asi sabran en que lugar estan los que navegan, crei que eso se realizaba en Zona Ectiva es asi…? y si lo es como se realiza pues no tengo la mas minima idea

  18. Internauta dice:

    Gracias por el aporte, aunque es muy sensillo realmete muy interesante. Y agradesco que compartas tu conocimiento ya que estas contribuyendo al “codigolibre” (aunque sea indirectamente) Gracias.

  19. Margarita dice:

    Hola, excelente tutorial me ha ayudado a recordar lo que vi en la universidad. Sólo tengo una duda, al presionar F9 para hacer doble clic en la opción “stop” – mi mac hace otra función, cual es la forma larga para buscar el stop? lo busque en acciones fotograma/fl.motion/animator/metodos/stop pero no se detiene con eso. Me puedes ayudar de favor. Gracias!!

  20. Mnk dice:

    muy bueno =D
    se sacaste de un lio
    GRACIAS! ^^

  21. Javier velasquez dice:

    dejeme felicitarlo tiene un tutorial muy detallado, muchas gracias por tu aporte

  22. leonardo corradi dice:

    Hola necesito saber como puedo agregar TAGS a un sitio hecho en flash para ayudar a busqueda… POR FAVORRR!! SALUDOS

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