Procesos

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 elcursor 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.
No 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í saberque 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.
Veamos 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 elbotó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.
Los tres primeros fotogramas muestran los tres posibles estados del botón; el cuarto fotograma define el área activa del botón. La línea detiempo 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 lainstancia 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 fotogramade 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 deedició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 elarchivo SFW.
El á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...