Botones en Flash CS5

¿Qué es un botón?

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 las está visualizando. Un botón, en Flash, es igual que un 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 cómo este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando están pulsados.

La interfaz de Flash 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 CS5, los botones tienen su propia línea de tiempo. 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.

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í. Ten en cuenta que podemos tener todas las capas que queramos.

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 pueden dotar a los botones de efectos asombrosos.

Todo esto es lo referente a la apariencia del botón. Después, tenemos que programar lo que queremos que haga el botón, cómo queremos que afecte a la película. Y esto lo haremos con ActionScript.

Creación de un botón

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.

Comenzamos creando el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash CS5. Recuerda que puedes usar varias capas.

Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le daremos el Tipo 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 tiempo 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.

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.

Acciones en los botones

Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos de Flash CS5 vamos a comentar dos de las más comunes.

Nota: Al crear un archivo, habrás visto que podemos elegir distintas versiones de ActionScript (3.0 o 2.0). Esto se refiere al lenguaje de programación que podemos empelar en Flash y que lo convierte

en una herramienta realmente potente. En las versiones 1 y 2, se podían agregar comportamientos directamente en las propiedades de los botones. Pero nosotros venimos empleando las versión 3.0. Esta versión nos obliga a escribir el código ActionScript.

Comenzamos por crear o añadir nuestro botón, y asignarle un nombre de instancia. El nombre que le demos es muy importante, porque nos permitirá acceder a él desde el código.

Aunque podemos escribir el código en la misma capa, recomendamos crear una capa exclusivamente para el código, por tenerlo todo mejor organizado.

Ahora, abrimos en el panel Acciones (menú Ventana → Acciones). Se mostrará un área en blanco en la que podemos escribir:

Este panel, en el área blanca de la derecha, nos permite escribir o editar acciones directamente.

También encontramos la ventana Fragmentos de código. Desde ella, podemos generar breves instrucciones de código para el símbolo seleccionado, lo que la mayoría de veces nos facilitará la tarea, ya que se trata de las opciones más repetidas.

Ahora veamos algunas de las acciones más comunes.

1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de internet (o una película Flash), lo que nos servirá para irnos desplazando por webs que contengan más de una página, o permitir al usuario descargarse archivos entre otras cosas.

La forma más sencilla de hacerlo es seleccionar el botón que queramos usar (en el siguiente ejemplo, hemos llamado a la instancia btnVisitarAulaclic) y buscar la acción que queremos en el panel Fragmentos de código. En la carpeta Acciones hacemos doble clic sobre Hacer clic para ir a página Web. Se generará un código como el siguiente:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/* Hacer clic para ir a página Web

Al hacer clic en la instancia del símbolo especificado, la dirección URL se carga en una nueva ventana del navegador.

 

Instrucciones:

1. Reemplace http://www.adobe.com por la dirección URL que desee.

   Conserve las comillas ("").

*/

 

btnVisitarAulaclic.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage);

 

function fl_ClickToGoToWebPage(event:MouseEvent):void

{

    navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");

}

Lo primero que encontramos en el código generado son comentarios. Este código, normalmente en gris claro, no se ejecuta como tal, y solo sirve para indicar cosas al usuario. En este caso, nos da explicaciones de cómo usar el código generado.

Lo único que hemos de hacer es reemplazar la url de ejemplo (www.adobe.com) por la de la página a la que queramos que nos envíe el botón.

La instrucción en ActionScript que nos permite hacerlo es navigateToURL(new

URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es" se refiere a la página que queremos abrir, y "_blank" indica que se abrirá en una página nueva.