Adobe Flash y Actionscript 3

Como crear nuestros propios botones, y usar ActionScript 3 para controlarlos.

Botones en flash, como definir las acciones.

Para crear un botón en flash, tenemos que hacer un dibujo, o usar una imagen, para posteriormente convertirlo en simbolo->botón.

También podemos usar los botones que flash trae por defecto, en el menu Ventana – Bilblioteca communes. Donde tenemos varios tipos de botones. Para usarlos en nuestro fichero de flash, tendremos que arrastralo desde la biblioteca hasta el escenario.

Una vez que lo hemos convertido en botón (o sacado de la biblioteca) , tenemos que darle un nombre=instancia desde las propiedades, para poder usarlo desde actionscript.

Como podeis ver en las imágenes, primero crearemos el boton, y luego le daremos su nombre. En el caso de que queramos usar varios botones mas, pues haremos lo mismo, pero siempre dándole distintos nombres a los botones.

Una vez que tenemos los botones con nombres, ya podremos controlarlos desde código.

Para determinar el comportamiento del mismo, tendremos que crear listener=escuchas, que son eventos, que por decirlo asi de alguna forma, escuchan a los objetos, y el comportamiento de estos.

Por ejemplo, a un botón podemos hacerle clic, podemos presionarlo, podemos pasar por encima, podemos dejar de presionarlo, podemos alejarnos de su ámbito, podemos hacer doble clic, …

Para controlar cada uno de estos eventos, usaríamos un listener.

Por ejemplo, para el primer botón de nuestro ejemplo:

miBoton

Si queremos controlarlo, los listeners posibles serían los siguientes:

miBoton.addEventListener(MouseEvent.CLICK, fn_clic);

MouseEvent, significa que realizamos un evento de ratón. Para un botón tenemos varias opciones:

MOUSE_DOWN (Presionamos el mouse)

MOUSE_OVER (Nos ponemos encima del botón)

MOUSE_UP (Soltamos el raton cuando lo teniamos presionado..)

MOUSE_WHEEL (Le damos a la ruleta del ratón)

Si queremos poner todos estos comportamientos a un mismo botón, iríamos creando sus listeners:

miBoton.addEventListener(MouseEvent.MOUSE_DOWN, fn_down);

miBoton.addEventListener(MouseEvent.MOUSE_OVER, fn_over);

miBoton.addEventListener(MouseEvent.MOUSE_UP fn_up);

miBoton.addEventListener(MouseEvent.MOUSE_WHEEL, fn_wheel);

Estas sentencias de botón, traducidas a nuestro lenguaje colloquial sería algo asi como:

A mi boton con nombre: miboton, cuando realicemos un evento sobre el de tipo: clic, over, down, up, ….), que ejecute la function: fn_nombredelaFuncion

Para definir la funcion, usamos la palabra reservada function. Seguida del nombre de la función, y luego le indicamos el tipo de evento para la que usamos la misma.

function fn_clic (ev_miBoton:MouseEvent) {

//acciones a realizar, por ejemplo, gotoAndPlay(), gotoAndStop();

}

En este caso la traducción a nuestro lenguaje colloquial sería:

Crea una función con nombre: fn_clic, que se va a ejecutar cuando se produzca un evento de tipo ratón, sobre nuestro botón miBoton, y ejecuta las acciones que yo te diga…

En el caso de que tengamos varios botones, pues haremos lo mismo por cada botón.

A la pregunta:

¿donde pongo el código?.

La respuesta sería, en el primer fotograma de nuestra película. Para entender esto es sencillo… Si queremos usar los botones en toda nuestra película, pues los tenemos que poner desde el principio.

En cuanto al código, asi como en versions anteriores de actionscript 1 y 2, el código iba por decirlo alguna forma, embebido en los propios simbolos, en actionscript 3, el código va en la linea de tiempo.

Como vamos viendo a lo largo del curso, para encontrar fácilmente el código, lo mas sencillo, sería crear una capa (que llamaramos codigo, as3, actionscript, o como nos apetezca…), y poner en ella el código.

miBoton.addEventListener(MouseEvent.MOUSE_DOWN, fn_down);
miBoton.addEventListener(MouseEvent.MOUSE_OVER, fn_over);
miBoton.addEventListener(MouseEvent.MOUSE_UP, fn_up);
miBoton.addEventListener(MouseEvent.MOUSE_WHEEL, fn_wheel);

function fn_over (ev_miBoton:MouseEvent) {  trace (“mouse over”);}
function fn_down (ev_miBoton:MouseEvent) {trace (“mouse down”);}
function fn_up (ev_miBoton:MouseEvent) {trace (“mouse up”);}
function fn_wheel (ev_miBoton:MouseEvent) {trace (“mouse wheel”);}