Botones en Flash CS5

Qu es un botn?
Los smbolos de tipo Botn son los que aportan la mayor parte de la interactividad de las pelculas
Flash con aquel que las est visualizando. Un botn, en Flash, es igual que un botn de cualquier
entorno informtico, sea web o cualquier otro.
Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de
acciones. Tambin es habitual ver cmo este tipo de elementos reaccionan cuando se les pasa el
ratn por encima o cuando estn pulsados.
La interfaz de Flash est diseada de manera especial para la creacin de botones, lo que nos
permite crear todos estos efectos de una manera muy sencilla.
Al igual que los otros smbolos de Flash CS5, los botones tienen su propia lnea de tiempo. Esta es
independiente pero, sin embargo, est formada nicamente por cuatro fotogramas, uno para cada
estado posible del botn:

Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est situado
sobre l.

Sobre. Aspecto del botn cuando situamos el puntero sobre l.

Presionado. Apariencia que deseamos tenga nuestro botn mientras lo mantengamos

pulsado.

Zona activa. Aqu debemos indicar el rea real en la que queremos que acte nuestro botn.

Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad de

espectacularidad y utilidad de estos smbolos, pero no es as. Ten en cuenta que podemos tener
todas las capas que queramos.
Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de tipo Bitmap).
La unin de las posibilidades de todos los smbolos pueden dotar a los botones de efectos
asombrosos.
Todo esto es lo referente a la apariencia del botn. Despus, tenemos que programar lo que
queremos que haga el botn, cmo queremos que afecte a la pelcula. Y esto lo haremos con
ActionScript.

Creacin de un botn
En la creacin de un botn podemos considerar dos fases. En la primera vamos a convertir nuestro
objeto a smbolo de tipo botn y posteriormente veremos cmo completarlo internamente, lo que nos
ayudar a entender mejor dicha estructura.
Comenzamos creando el objeto que representar el aspecto por defecto de nuestro botn con las
herramientas que nos ofrece Flash CS5. Recuerda que puedes usar varias capas.

Seleccionaremos el objeto y accederemos al men Insertar Convertir en Smbolo, le daremos el

Tipo Botn y asignaremos un nombre a nuestro nuevo smbolo.

De esta forma ya tenemos transformado el objeto para que se comporte como un botn. Ahora lo
completaremos internamente.
Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo editaremos
haciendo clic con el botn derecho del ratn sobre nuestro nuevo botn y seleccionando la opcin
Editar.
Cuando tengamos delante la lnea de tiempo del botn (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 botn para cada posicin del cursor y marcar el
rea de accin del botn (fotograma Hit) en la que simplemente podremos dejar la misma figura que
la inicial (en este caso slo 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 botn.

Formas en los botones

Los botones son smbolos que pueden tener multitud de formas. Si bien lo ms habitual es ver
botones rectangulares, cuadrados y circulares, cuya creacin es inmediata como vimos en el punto
anterior, tambin hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy
habitual verlos en multitud de pginas web.
Entre estos estn los creados mediante formas poligonales, aquellos que estn formados por texto
nicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar ms vistosidad ya

que algunos resultan ms expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez
de creacin 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 ms comunes.
Nota: Al crear un archivo, habrs visto que podemos elegir distintas versiones de ActionScript (3.0 o
2.0). Esto se refiere al lenguaje de programacin que podemos empelar en Flash y que lo convierte
en una herramienta realmente potente. En las versiones 1 y 2, se podan agregar comportamientos
directamente en las propiedades de los botones. Pero nosotros venimos empleando las versin 3.0.
Esta versin nos obliga a escribir el cdigo ActionScript.
Comenzamos por crear o aadir nuestro botn, y asignarle un nombre de instancia. El nombre que le
demos es muy importante, porque nos permitir acceder a l desde el cdigo.
Aunque podemos escribir el cdigo en la misma capa, recomendamos crear una capa exclusivamente
para el cdigo, 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.
Tambin encontramos la ventana Fragmentos de cdigo. Desde ella, podemos generar breves
instrucciones de cdigo para el smbolo seleccionado, lo que la mayora de veces nos facilitar la
tarea, ya que se trata de las opciones ms repetidas.

Ahora veamos algunas de las acciones ms comunes.

1) Abrir una pgina web. Con esto conseguiremos abrir una pgina cualquiera de internet (o una
pelcula Flash), lo que nos servir para irnos desplazando por webs que contengan ms de una
pgina, o permitir al usuario descargarse archivos entre otras cosas.
La forma ms sencilla de hacerlo es seleccionar el botn que queramos usar (en el siguiente ejemplo,
hemos llamado a la instancia btnVisitarAulaclic) y buscar la accin que queremos en el panel
Fragmentos de cdigo. En la carpeta Acciones hacemos doble clic sobre Hacer clic para ir a pgina
Web. Se generar un cdigo como el siguiente:

/* Hacer clic para ir a pgina Web

2 Al hacer clic en la instancia del smbolo especificado, la direccin URL se carga en una nueva ventana del navegador.
3
4 Instrucciones:
5 1. Reemplace http://www.adobe.com por la direccin URL que desee.
6

Conserve las comillas ("").

7 */
8
9 btnVisitarAulaclic.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage);
10
11 function fl_ClickToGoToWebPage(event:MouseEvent):void
12 {
navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");

13
14

Lo primero que encontramos en el cdigo generado son comentarios. Este cdigo, normalmente en
gris claro, no se ejecuta como tal, y solo sirve para indicar cosas al usuario. En este caso, nos da
explicaciones de cmo usar el cdigo generado.
Lo nico que hemos de hacer es reemplazar la url de ejemplo (www.adobe.com) por la de la pgina a
la que queramos que nos enve el botn.
La

instruccin

en

ActionScript

que
nos
permite
hacerlo
es
navigateToURL(new
URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es" se refiere a la pgina que
queremos abrir, y "_blank" indica que se abrir en una pgina nueva.