Unidad 12.  Botones (II)

Botones de texto. La importancia de la zona activa

Los botones, como hemos visto, poseen un fotograma en el que indicamos la zona activa. En los ejemplos vistos hasta el momento esto parecía poco útil, ya que es común pensar que obviamente la zona activa que queremos que tenga nuestro botón es el área que comprenden los límites de dicho botón.

Veamos como esto no es siempre tan trivial. Aquí se muestran dos botones creados en Flash 8. Comprobemos lo que sucede al pasar el ratón por encima de uno y de otro.

Aunque parezcan iguales, la diferencia está en el momento en el que situamos el ratón en uno de los huecos que existe entre letra y letra o, en general, todos aquellos lugares que no pertenezcan al texto propiamente dicho.

En el texto de la izquierda el botón se activa sólo cuando situamos el puntero del ratón sobre la letra. Esto puede ser incómodo y puede llevar a confusión, ya que aquel que navegue por nuestras páginas simplemente querrá hacer uso del botón y no tener que intentar apuntar concretamente a unas letras que quizá sean muy estrechas.

Esto es debido al mal uso de la zona activa. Para solucionar este problema sigue los siguientes pasos:

1. Haz doble clic sobre el botón para entrar en su modo de edición.

2. Haz clic sobre el fotograma de Zona Activa, si no hubiese ningún fotograma clave creado haz clic sobre él y pulsa la tecla F6 para crear uno.

3. Una vez en el estado Zona Activa seleccionamos la herramienta Rectángulo y dibujamos un rectángulo sobre el texto tapándolo en su totalidad. Así definiremos toda el área del rectángulo como zona activa al ratón.

4. Vuelve al modo de edición normal pulsando el enlace a Escena 1 sobre la Línea de tiempos.

Aquí tienes un ejemplo de cómo hacerlo correctamente. 

Incluir un clip en un botón

  La inclusión de clips de película en los botones puede dotar a éstos de más vistosidad.

     Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información extra o una animación para ir más allá de un cambio de color.

     También es común ver un clip de película actuando como un botón. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo.

Veamos por ejemplo el botón siguiente:

Comprueba todos los estados del ratón. Por lo que nos dice el botón podemos intuir que empieza algo, pero quizá no tengamos claro qué.

Si nosotros en determinado momento no queremos que esto ocurra en nuestras páginas web, podemos recurrir a la introducción de un Clip en el botón, que explique un poco más acerca de lo que pasará si pulsamos.

Incluir un Clip en un botón es muy sencillo. Tomando este ejemplo, sólo tendrás que, primero, hacer doble clic sobre el botón para entrar en su modo de edición.

Haz clic en el estado Sobre para modificarlo. Selecciona el texto y pulsa la tecla SUPRIMIR para eliminarlo.

Ahora abre la Biblioteca desde el menú Ventana → Biblioteca donde se encontrará el clip que habremos creado previamente. Selecciónalo y arrástralo sobre el botón.

Ya esta listo, ahora cuando pases el ratón sobre el botón el clip de película empezará a reproducirse.

Aquí puedes seguir el proceso que acabamos de comentar 

Y este es el resultado. 

Bitmaps y Botones

  Además de clips, los botones también pueden contener símbolos de tipo Gráfico.

     Puesto que, como ya hemos visto, todo lo que se puede hacer con un gráfico se puede hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que están muy extendidos como forma de expresión gráfica a lo largo y ancho de la Red.

     Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer poco interesante hacer uso de ellos en la creación de botones, pero no es así.

     Básicamente podemos hacer dos cosas:

     1) Incluir en cada uno de los fotogramas del botón un bitmap distinto, obteniendo un efecto como el que se consigue con lenguajes como javascript (siempre considerando la mayor sencillez de Flash).

     2) Aprovechar las propiedades de los Gráficos en Flash. Para esto, deberíamos importar primero el Bitmap y después convertirlo a símbolo botón. Posteriormente lo editaríamos y, después de insertar cada fotograma clave, convertiríamos su contenido a símbolo Gráfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos.

     He aquí una pequeña muestra en la que sólo hemos utilizado un Bitmap de tipo GIF, sacado de la Red y lo hemos convertido en un botón gráfico aplicándole un efecto Alfa (Transparencia) al estado de reposo, lo que da la sensación de estar apagado (también podríamos haber aplicado brillo). En el fotograma Sobre hemos dejado el GIF original para que al pasar sobre el botón de la sensación de encenderse. Finalmente le hemos aumentado la cantidad de rojo en el fotograma Presionado para que parezca estar incandescente.