Actionscript 3.0 Primeros pasos: Botones.Que felices eramos todos los flasheros en aquellos tiempos, principios del año 2006, programábamos nuestras aplicaciones con ActionScript 2, un par de líneas de código y se lograban grandes cosas: El mundo era perfecto.

Y de repente: ActionScript 3.0 ¡WOW! y el mundo empezó a ser diferente, buscábamos un tutorial para saber como pintaba la cosa ¡Y estaba en chino! Lo peor era que parecía que todo el mundo entendía de que trataba el dichoso lenguaje y los tutoriales eran super avanzados (Incluso los principiantes) Muchos decidieron no tener nada que ver con AS3, y siguieron sus vidas (Yo aún pienso que AS2 tiene mucho potencial y se le puede sacar buen provecho...)

Pero bueno, la vida continua. Así que este será el primero de una serie de tutoriales en donde explicaré de una manera muy sencilla como programar con AS3, tanto para los que no lo han hecho nunca, como para los que ya acostumbran trabajar con AS2.

En este primer tema enseñaré como trabajar con los símbolos tipo botón.

Repasemos un poco:

- En Flash podemos crear tres diferentes tipos de símbolos:

- Clip de película (Movie Clip) - Butón (Button) - Gráfico (Graphic)

El Clip de película se puede definir como una animación, que dentro de si misma puede contener otras animaciones (Tiene su propia línea de tiempo) y acepta nombre de instancia.

El botón tiene una línea de tiempo diferente, constituida de 4 fotogramas principales que mostrarán los diferentes estados de un botón: UP/ OVER/ DOWN/ HIT

El gráfico es un Clip de película simplificado (No acepta ser importado por actionscript)

Cosas a tomar en cuenta:

- En AS3 no se debe escribir código directamente en los símbolos (Como si se podía hacer en AS2) Solo se podrá escribir código en los fotogramas. - Debemos respetar el uso de mayúsculas y minúsculas, por ejemplo si una acción se escribe en minúscula: stop(); y lo escribimos en mayúscula: STOP(); o en una combinación de ambas: Stop(); dicho código no servirá.

Si el script tiene una combinación de mayúsculas y minúsculas y lo escribimos completamente en minúsculas o en mayúsculas, el script no servirá, por ejemplo:

MouseEvent

si lo escribimos de esta manera. mouseevent, simplemente no servirá.

Lo que quiero decir es que el lenguaje es sensible a las mayúsculas y las minúsculas, si nos equivocamos en esto, por culpa de una sola letra nuestro programa no servirá.

Recordemos que el nombre de instancia se le asigna a los símbolos:

1. Seleccionándolos 2. Escribiendo en el panel de propiedades en la casilla nombre de instancia, el nombre al cual nos referiremos al objeto en actionScript

Y a todo esto ¿Que significa instancia?

Instancia: Copia de un símbolo en la escena (Los símbolos nunca salen a trabajar,

mandan sus copias: Las instancias)

Para declarar las acciones de un botón en AS3 hay que hacer lo siguiente:

A- Declarar el evento al cual reaccionará el botón (Por ejemplo cuando el usuario presiona el botón izquierdo del mouse) ejemplo:

nombre_de-instancia.addEventListener(MouseEvent.MOUSE_DOWN, nombreDeLaFuncion);

B- Declarar la función que ejecutará el botón.

function nombreDeLaFuncion(event:MouseEvent):void { //void significa que la función no devolverá parámetros stop(); //En este ejemplo la función detiene la película, pero puede ser cualquier cosa. }

¡Empecemos!:

Creando la acción del botón

1- Descargue el archivo comprimido: botones.zip y descomprima su contenido

2- Abra el documento con Flash (Ejercicio_4-1.fla)

3- El trabajo está dispuesto de la siguiente manera

3 capas llamadas:

- Acciones - Botones - Hada

3- En la escena ubicado en la capa Hada encontrará una instancia del símbolo hada-rebota (El dibujo de un hada color blanco), haga clic sobre el símbolo en la escena y asignen en el panel de propiedades el nombre de instancia campanita_mc

4- En la capa botones hay dos botones (Con dos cajas de texto sobre que los identifican como: “detener” y “reanudar”) haga clic sobre el símbolo tipo botón llamado “detener” y en el panel de propiedades asignen el nombre de instancia detener_mc

5- Ahora haremos clic en el fotograma uno de la capa acciones, presionamos la tecla F9 para ver el panel de acciones, veremos las siguientes líneas de código:

detener_mc.addEventListener(MouseEvent.MOUSE_DOWN, detenerPrincipal);

function detenerPrincipal(event:MouseEvent):void { stop(); }

Esta función hará que la línea principal de tiempo se detenga, ya que esta vinculado a la instancia tipo botón detener_mc, pero podemos comprobar que el símbolo anidado de las alas sigue trabajando (Sería el Child de la instancia campanita_mc) continuemos:

6- Seleccione el botón identificado con la etiqueta reanudar y asignen en la barra de propiedades el nombre de instancia reanudar_mc haga clic nuevamente en la capa acciones fotograma 1 y añada las siguientes líneas de código al programa:

reanudar_mc.addEventListener(MouseEvent.MOUSE_DOWN, reanudarPrincipal);

function reanudarPrincipal(event:MouseEvent):void { play(); }

La función anterior define el evento play, hará que la animación en la línea principal continúe su ejecución

7- Haga clic sobre el botón identificado como detener alas y asignen el nombre de instancia alasStop

8- Haga clic sobre el botón identificado como reanudar alas y asignen el nombre de instancia alasGo

9- Haga doble clic sobre la instancia campanita_mc, dentro hay una animación con cuatro instancias (copias) en cuatro fotogramas (1,10 ,30 , 40) de nuestro personaje, asígnele a la instancia del primer fotograma el nombre en el panel de propiedades el nombre fair_mc

10- Haga doble clic sobre la instancia fair_mc, anidado dentro encontrará dos instancias más (el cuerpo y las alas del hada) seleccione la instancia de las alas y asignen el nombre en el panel de propiedades de alas_mc

11- Regrese a la línea de tiempo principal

12- Agregue la siguiente función al programa que estamos escribiendo en la capa acciones fotograma 1:

alasStop_mc.addEventListener(MouseEvent.MOUSE_DOWN, detenerAlas);

function detenerAlas(event:MouseEvent):void { campanita_mc.fair_mc.alas_mc.stop(); }

Esta función hace lo siguiente: ingresa dentro de la instancia campanita_mc, luego ingresa a la instancia fair_mc Y asigna a la instancia alas_mc el evento stop

13- Para reanudar el movimiento de las alas solamente agregaremos al código que tenemos en la capa acciones, fotograma 1:

alasGo_mc.addEventListener(MouseEvent.MOUSE_DOWN, detenerAlas);

function detenerAlas(event:MouseEvent):void { campanita_mc.fair_mc.alas_mc.stop(); }

Así comprobamos como podemos asignar eventos a instancias anidadas y hacerlo desde la línea de tiempo principal.

Ya podemos detener y echar a andar el recorrido que hace el hada en la línea de tiempo principal, también podemos detener la animación contenida dentro de la instancia alas, ahora a manera de reto y para comprobar que me entendieron intenten detener el movimiento de subir y bajar que ejecuta la animación, agregando las funciones correspondientes al programa que estamos escribiendo en el fotograma 1 de la capa acciones fotograma 1, tal y como se ve en el siguiente ejemplo: