CREAR UN BOTN CON ADOBE FLASH CS6

11.2. 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 pulsaremosF6 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.
Aqu podemos ver una muestra de creacin de un botn lo ms simple posible

Como resultado obtenemos el botn que continuacin mostramos.

ste es un botn muy bsico, pero como veremos se pueden complicar mucho. Para
empezar nos servir con ste. Observa como cambian los estados de reposo (rojo
plido), sobre (rojo) y pulsado (azul).
Si una vez creado el botn queremos observar sus distintos estados y todava no hemos
terminado la pelcula entera y por
tanto no deseamos tener que reproducirla toda podemos hacerlo a travs del
men Control Habilitar botones simples. As podremos interactuar con el botn
hasta que desactivemos esta opcin.
11.3. 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.
Hay varias formas de botn tambin muy extendidas, como el botn con relieve sencillo
o los botones en forma de pldora. Puesto que existen muchas formas de conseguir estos
efectos, a continuacin tienes un ejercicio paso a paso que muestra una forma de
conseguir el relieve en un botn rectangular.
11.4. Incluir un clip en un botn
La inclusin de clips de pelcula en los botones puede dotar a stos de ms vistosidad.
Es habitual colocar un clip en el fotograma Sobre para indicar algn tipo de informacin
extra o una animacin para ir ms all de un cambio de color.
Tambin es comn ver un clip de pelcula actuando como un botn. Esto caso se puede
hacer por ejemplo poniendo el clip en el fotograma Reposo.
Veamos por ejemplo el botn siguiente:
Comprueba todos los estados del ratn. Por lo que nos dice el botn podemos intuir que
empieza algo, pero quiz no tengamos claro qu. Ayudara a la navegacin que al
ponernos sobre el cursor, el texto cambie para darnos informacin extra. Por ejemplo:
Lo nico que hemos cambiado es que tenemos el texto como un movie clip, en cuando el
cursor est encima, lo cambiamos por otro con la informacin.
O podemos usar los clips para animar elementos dle botn, como en el siguiente
ejemplo:

Incluir un Clip en un botn es muy sencillo. Tomando este ejemplo, y partiendo de que
tenemos los dos textos como clips en la biblioteca, slo tendremos que:
- Hacer doble clic sobre el botn para entrar en su modo de edicin.
- Seleccionamos el estado Sobre para modificarlo. Selecciona la instancia del texto.
Ahora tenemos dos opciones:
- Pulsa la tecla SUPRIMIR para eliminarlo.
- Desde la Biblioteca (men Ventana Biblioteca) arrastramos el clip con el nuevo
texto, para crear una instancia.
O la opcin ms prctica:
- En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo
objeto de texto.
- Por ltimo, centramos el nuevo texto en el botn, si es necesario.
Ya esta listo, ahora cuando pases el ratn sobre el botn el clip de pelcula empezar a
reproducirse.

Por supuesto, en vez de cambiar el texto podemos aadir otros clips, que simulen
movimientos, reflejos, etc.
11.5. Bitmaps y botones
Adems de clips, los botones tambin pueden contener smbolos de tipo Grfico.
Puesto que, como ya hemos visto, todo lo que se puede hacer con un grfico se puede
hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya
que estn muy extendidos como forma de expresin grfica 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 creacin de botones, pero no es as.
Bsicamente podemos hacer dos cosas:
1) Incluir en cada uno de los fotogramas del botn un bitmap distinto, obteniendo un
efecto como el que se consigue con lenguajes como javascript o CSS.
2) Aprovechar las propiedades de los Grficos en Flash. Para esto, deberamos importar
primero el Bitmap y despus convertirlo a smbolo botn. Posteriormente lo editaramos
y, despus de insertar cada fotograma clave, convertiramos su contenido a smbolo
Grfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta,
Brillo) podremos conseguir efectos bastante buenos.

He aqu una pequea muestra en la que slo hemos utilizado un Bitmap de tipo GIF,
sacado de la Red y lo hemos convertido en un botn grfico aplicndole un efecto Alfa
(Transparencia) al estado de reposo, lo que da la sensacin de estar apagado (tambin
podramos haber aplicado brillo). En el fotograma Sobre hemos dejado el GIF original
para que al pasar sobre el botn de la sensacin de encenderse. Finalmente le hemos
aumentado la cantidad de rojo en el fotograma Presionado para que parezca estar
incandescente.
11.6. 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 a lo largo del curso, por
ser la ms actual y potente. Esta versin nos obliga a escribir el cdigo ActionScript.
Veremos cosas bsicas, y entraremos un poco ms en ActionScript a partir del tema 16.
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. De momento no profundizaremos en esto, y ta lo haremos en el tema
correspondiente.
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.

Sin entrar en detalle de qu es cada palabra, pues esto ya lo veremos, este es el aspecto
general del cdigo asociado a un botn:
?
1

miBoton.addEventListener(MouseEvent.CLICK, accionesMiBoton);

2
3

function accionesMiBoton(event:MouseEvent):void

5
6

//acciones
}

Donde miBoton ser el nombre de la instancia del botn.

A esta instancia, le indicamos que queremos que reaccione al clic del ratn
(MouseEvent.CLICK), ejecutando las acciones llamadas accionesMiBoton (podemos
darle el nombre que queremos).
accionesMiBoton contiene las acciones a realizar, y podemos verlo a continuacin. Solo
habra que cambiar el texto //acciones por las acciones a realizar.
Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es
nico. Tambin tenemos que dar un nombre nico a accionesMiBoton para cada uno, a
no ser que queramos que realicen la misma accin.

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:
?
1

/* Hacer clic para ir a pgina Web

Al hacer clic en la instancia del smbolo especificado, la direccin URL se carga en una nuev

3
4

Instrucciones:

1. Reemplace http://www.adobe.com por la direccin URL que desee.

6
7

Conserve las comillas ("").

*/

8
9

btnVisitarAulaclic.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage);

10
11

function fl_ClickToGoToWebPage(event:MouseEvent):void

12

13
14

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

}

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.

2) Controlar una pelcula en curso. Si estamos reproduciendo una pelcula Flash y

queremos permitir que el usuario la detenga, la ponga en marcha, avance, retroceda...
Para ello podemos emplear las acciones:

stop(); para detener.

play(); para reproducir.

gotoAndPlay(numeroFotograma); para ir a un fotograma determinado.

Por ejemplo, podemos tener el botn btnPausar para parar la pelcula y el

botn btnContinuar para reproducir. Nos ser ms cmodo si usamos el panel
Fragmentos de cdigo para generar el evento Clic del botn (carpeta Controladores de
eventos evento MouseClick). En el cdigo generado, reemplazamos el cdigo
personalizado por nuestras funciones:
?
1

btnPausar.addEventListener(MouseEvent.CLICK, fl_PausarReproduccion);

function fl_PausarReproduccion(event:MouseEvent):void

4
5

stop();
}

6
7

btnContinuar.addEventListener(MouseEvent.CLICK, fl_ContinuarReproduccion);

function fl_ContinuarReproduccion(event:MouseEvent):void

10
11

play();
}

Tal cual lo hemos puesto, afectara a la pelcula principal. Si lo que queremos parar o
reproducir es un clip determinado, habra que escribirlo delante de la accin, separado
por un punto. Por ejemplo miClip.stop();.

Reconocemos que aunque ActionScript 3.0 es ms potente que la versin 2.0, puede
resultar mas liosa para usuarios sin conocimientos previos. Si quieres ver cmo seran
estos mismos ejemplos en ActionScript 2, te invitamos a echar un vistazo a esta pgina
de nuestro curso de Flash CS3.
En este videotutorial de introduccin a ActionScript 3 puedes ver cmo empezar a poner
cdigo en un botn.
11.7. Incluir sonido en un botn

Si nuestras pginas van a tener sonido, el sonido en los botones es una parte
fundamental. Podemos hacer, por ejemplo que se activen sonidos al pulsar un botn.
Para ello, simplemente debemos editar nuestro botn y seleccionar el
fotograma Presionado, e insertar el sonido. Como vimos en el tema correspondiente. Es
este caso, el tipo de sincronizacin ms conveniente suele ser Evento.
Por ejemplo podramos importar uno desde nuestro disco duro o bien tomar alguno que
ya tengamos en la biblioteca.
El resultado podra ser algo as: