Los
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:
- Reposo: Es la vista pasiva del
botón, sin ningún tipo de acción por parte del usuario.
- 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.
- 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í 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.
Veamos una forma sencilla de generar
un botón:
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
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 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.
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
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:
- Agregar un fotograma clave
en el estado Sobre.
- Selecciona los elementos del
botón que van a tener movimiento (puede ser todo) y conviértelos en
“Clip de película”.
- Haz doble clic para ingresar
en la película.
- Convierte todos los
elementos de la película en Gráfico para poder generar la
animación.
- 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.
- 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.
- Agrega los fotogramas clave
en los estados de Presionando y Zona activa.
- ¡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.
Los símbolos de tipo Botón
son los que aportan la mayor parte de la interactividad de las películas
Flash con aquel que la está visualizando. Un botón, en Flash, es igual que
cualquier botón de cualquier entorno informático, sea web o cualquier otro.
Son
elementos que se prestan a que el usuario los presione, desencadenando al
hacerlo una serie de acciones. También es habitual ver como este tipo de
elementos reaccionan cuando se les pasa el ratón por encima o cuando se les
está pulsando, por ejemplo.
Pues
bien, para conseguir los efectos interactivos que acabamos de mencionar en
otros lenguajes orientados a la web, que es el caso que nos ocupa, debemos
crear programas relativamente grandes. Esto es un inconveniente bastante
grande ya que el uso de los botones es una práctica muy habitual en el diseño
en Internet. Sin embargo, en Flash no ocurre así. Su interfaz está diseñada
de manera especial para la creación de botones, lo que nos permite crear
todos estos efectos de una manera muy sencilla.
Al
igual que los otros símbolos de Flash 8, los botones tienen su propia línea
de tiempos. Esta es independiente pero, sin embargo, está formada únicamente
por cuatro fotogramas, uno para cada estado posible del botón.
Reposo.
Aspecto
por defecto del botón, es decir, cuando el puntero del ratón no está situado
sobre él.
Sobre. Aspecto del botón cuando
situamos el puntero sobre él.
Presionado.
Apariencia
que deseamos tenga nuestro botón mientras lo mantengamos pulsado.
Zona
activa. Aquí
debemos indicar el área real en la que queremos que actúe nuestro botón. Esto
es importante sobre todo en botones compuestos sólo por texto como veremos
más adelante.
Parece
que la limitación de fotogramas podría implicar una limitación en la capacidad
de espectacularidad y utilidad de estos símbolos, pero no es así.
Los
botones pueden contener a su vez otros símbolos, como clips o gráficos
(también de tipo Bitmap). La unión de las posibilidades de todos los símbolos
dota a los botones de gran espectacularidad.
En la creación de un botón podemos considerar dos fases. En la primera vamos
a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos
cómo completarlo internamente, lo que nos ayudará a entender mejor dicha
estructura.
|
Primeramente
crearemos el objeto que representará el aspecto por defecto de nuestro botón
con las herramientas que nos ofrece Flash 8.
Seleccionaremos el objeto y accederemos al menú
Insertar → Convertir en Símbolo, le daremos el comportamiento Botón y
asignaremos un nombre a nuestro nuevo símbolo
De esta forma ya tenemos transformado el objeto para que se comporte
como un botón. Ahora lo completaremos internamente.
Para
determinar cómo debe reaccionar el botón en función de las acciones del ratón,
lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo
botón y seleccionando la opción Editar.
Cuando tengamos delante la línea de tiempos del
botón (observa que tiene el aspecto que hemos mostrado anteriormente),
seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona
activa) y pulsaremos F6 para crear un
fotograma clave en cada uno de ellos
Ahora
ya podemos modificar el aspecto inicial del botón para cada posición del cursor
y marcar el área de acción del botón (fotograma Hit) en la que simplemente
podremos dejar la misma figura que la inicial (en este caso sólo es importante
la forma del objeto, no los colores u otras cosas) o bien dibujar con las
herramientas de dibujos de Flash una nueva figura, en cuya superficie "se
sentirá aludido" nuestro botón
Aquí
podemos ver una muestra de creación de un botón ovalado. Como resultado
obtenemos el botón que continuación mostramos
Este es
un botón muy básico, como veremos se pueden complicar mucho, pero para empezar
nos servirá con este.
Si una vez creado el botón queremos observar sus
distintos estados y todavía no hemos terminado la película entera y por tanto
no deseamos tener que reproducirla toda podemos hacerlo accediendo a la
Biblioteca de nuestra película y seleccionando el botón creado. Para ver lo que
comentábamos bastará con pulsar la tecla situada
a la derecha de la vista previa del símbolo.
FORMAS EN LOS BOTONES
Los botones son símbolos que pueden tener multitud de formas. Si bien lo más
habitual es ver botones rectangulares, cuadrados y circulares, cuya creación
es inmediata como vimos en el punto anterior, también hay otros muchos tipos
de botones que, pese a ser menos utilizados, es muy habitual verlos en
multitud de páginas web.
Entre
estos están los creados mediante formas poligonales, aquellos que están
formados por texto únicamente, dibujos con diferentes motivos, etc. Es
interesante su uso para dar más vistosidad ya que algunos resultan más
expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez
de creación de botones que sus herramientas de dibujo nos ofrece.
Hay
varias formas de botón también muy extendidas, como el botón con relieve sencillo
o los botones en forma de píldora. Puesto que existen muchas formas de
conseguir estos efectos, a continuación tienes un ejercicio paso a paso que
muestra una forma de conseguir el relieve en un botón rectangular.
|
|
