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 鈥渟top鈥 - 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
Iniciar sesi贸n