¿Y por qué no? - Programación Flash

Ya hemos visto como instalar Eclipse con el plugin de Flex para editar ActionScript, pero no sabemos cómo vincular un clip de película de la biblioteca al escenario, lo que en AS2 era un attachMovie.

En Flash lo haríamos así:

var cuadrado:Cuadrado = new Cuadrado();
cuadrado.x = 100;
cuadrado.y = 100;
addChild(cuadrado);

donde Cuadrado es el nombre de la clase asociada a ese clip de la biblioteca, pero en Eclipse no tenemos biblioteca. Entonces, ¿como lo hacemos???

Tenemos que exportar la biblioteca como un archivo swc, e importarlo luego en nuestro proyecto de Eclipse. El resto es exactamente igual.

Leer el resto de esta entrada

Al final me han liado para instalar y empezar a usar Eclipse como editor de código ActionScript. Ya lo habían intentado yo solo hace algún tiempo, pero es mas fácil cuando te lo explica alguien desde el principio

Y como es un poco lioso la primera vez, voy a explicar paso a paso desde su instalación hasta un Hola Mundo.

Lo que vamos a hacer es instalar Eclipse, un editor de código gratuito que se usa para programar en diferentes lenguajes. Luego instalaremos el plugin de Flex para que entienda la sintaxis ActionScript y para poder compilar nuestros proyectos desde el Eclipse. El plugin es de pago.

Hay otro plugin que permite editar ActionScript llamado FDT, también de pago, pero no permite editar mxml de Flex, y tiene que tener el SDK de Flex para poder compilar SWFs. Hay un estupendo vídeo explicativo en xinterface de cómo instalarlo y crear un proyecto.

Leer el resto de esta entrada

Ya había hablado antes del TweenLite, una librería para hacer tweens de forma súper sencilla a la que estoy totalmente enganchado. Lo hago todo con ella.

Si se nos queda corta, podemos utilizar el TweenMax, que es exactamente igual, pero con más propiedades. Se basa en el primero, y añade cosas como la posibilidad de hacer tweens sobre filtros, movimientos con curvas Bezier, pausar un tween o hacerle un loop, así como acceder a muchas propiedades internas del tween.

Aquí se pueden ver los tweens con filtros sobre una imagen:

Como se basa en el TweenLite, sólo voy a poner las cosas que tiene diferente a éste:

Leer el resto de esta entrada

Una de las cosas que permite AS3 es cambiar un objeto a la lista de visualización de otro contenedor.

Si tenemos un clip de película en el escenario principal, tal vez nos interese colocarlo dentro de otro clip, para hacerlo arrastrable, o para que adquiera las modificaciones de forma de su contenedor… pero sin tener que eliminarlo y volverlo a crear dentro, como ocurría en AS2.

Podemos asignarle los listeners en una clase y luego mandarle la referencia a cualquier otra clase por muy profunda que esté, para que haga el addChild, y nuestros listeners seguirán apuntando a las funciones de la primera clase. Brutal!

Vamos a verlo con un ejemplo sencillo pero muy común:

Requerimientos: Nos mandan hacer una botonera para un menú lateral, y como no nos dicen nada, pues la programamos en nuestra clase principal, le asignamos los listeners ahí para que cuando se pulse un botón, cargar otra sección en ese mismo ámbito. Como todo está al mismo nivel, es fácil recoger los eventos y actuar en consecuencia.

// Creo una botonera con 5 botones
_botonera = new Botonera(["Quienes somos", "Trabajos", "Contrátanos", "Soluciones", "Contacto"]);

// Le pongo un listener para el evento "botonPulsado" que emite cada vez que se pulsa un boton
_botonera.addEventListener("botonPulsado", opcionSeleccionada);

// La añado al escenario principal. Por defecto en el 0,0
this.addChild(_botonera);

Leer el resto de esta entrada

Una función muy útil para sumar los elementos de un array numérico:

// Devuelve la suma de los elementos de un array numerico
function sum(array:Array, ini:int=0, fin:int=-1):Number{
	fin = (fin==-1) ? array.length : fin;
	var suma:Number=0;
	for (var i:uint = ini; i<fin ; i++){
		if(typeof(array[i]) == "number"){
	    		suma += array[i];
		}
	}
	return suma;
}

Para usarlo se le pasa un array y opcionalmente un índice de principio y otro de fin (con base cero, el primer elemento es el 0 y el último array.length). Si no se proporcionan esos valores devuelve la suma de todo el array:

var valores:Array = [2, 3, 4];

trace(sum(valores));
// Devuelve 9 (2+3+4)

trace(sum(valores, 1));
// Devuelve 7 (3+4)

trace(sum(valores, 0, 2));
// Devuelve 5 (2+3)

Lo típico, tienes un array de números, y quieres saber el valor máximo. Extrañamente no hay ningún método en los Arrays de AS3 para hacerlo ¿? y con un sort a veces se le pira la pinza y no lo hace bien. Además, se supone que es mas costoso de rendimiento.

// Devuelve el valor maximo de un array numerico
function max(array:Array):Number{
	var maxVal:Number = 0;
	for each(var item:Number in array){
		maxVal=(item>maxVal) ? item : maxVal;
	}
	return maxVal;
}

var miArray:Array = [1, 4, 35, -76, 2];
trace(max(miArray));  // Devuelve 35

Ya hemos visto cómo construir un evento personalizado en AS3 en el que podamos pasarle parámetros, lo cual nos permite crearnos un evento genérico donde incluiremos todos los parámetros extra que queramos, y así­ reutilizar nuestra clase en distintos proyectos.

Además, funciona como un array asociativo, donde podemos preguntar por cada valor a partir de su nombre de variable, o incluso recorrerlo con un bucle for-in. Muy cómodo.

El evento que queremos emitir con sus parámetros extra:

import EventExtra;

// Emito el evento con todos los parametros que quiera
dispatchEvent(new EventExtra("accionTerminada", {nombre:"Iván", puntuacion:59, registrado:true, telefono:"620 32 54 28", posiciones:[1,2,3,4,5]} ));

La clase EventExtra:

package {

	import flash.events.*;

	// Extiendo la clase Event para que funcione como un evento mas al enviarse y recibirse.
	public class EventExtra extends Event{

		// Variable privada donde almaceno los parametros extra en un objeto
		private var _extra:Object;

		// Recibo los parametros extra en un objeto
		public function EventExtra(nombre:String, extra:Object=null, bubbles:Boolean=false, cancelable:Boolean=false){
			// Inicializo el constructor de Event
			super(nombre, bubbles, cancelable);
			// Si llega el parametro extra, lo almaceno.
			// Y si no, creo un objeto vacio para que no genere un error al intentar acceder a el.
			if(extra){
				_extra = extra;
			}else{
				_extra = new Object();
			}
		}

		// Devuelve un objeto con los parametros extra en formato de objeto
		public function get extra():Object{
			return _extra;
		}
	}
}

Y nuestro detector de eventos:

import EventExtra;

// Escucho si objetoEmisor emite el evento "accionTerminada" y le indico su detector de eventos.
objetoEmisor.addEventListener("accionTerminada", detectorAccionTerminada);

// El detector del evento, recibe un objeto evento de tipo EventExtra
function detectorAccionTerminada(evento:EventExtra):void{
	// Puedo recoger los parametros a traves del objeto evento.extra
	for (var e:String in evento.extra){
		trace(e + " --> " + evento.extra[e]);
	}
}

/* Devuelve el valor de cada elemento del objeto extra:
nombre --> Iván
telefono --> 620 32 54 28
puntuacion --> 59
posiciones --> 1,2,3,4,5
registrado --> true
*/

Ya vimos que se pueden emitir eventos personalizados para recogerlos con un listener, no tenemos que limitarnos a los que trae Flash por defecto.

Ahora vamos a dar un paso más. Queremos emitir un evento que diga que se ha terminado una acción, pero además queremos indicar si ha ido bien (true), o ha ido mal (false).

Este es el evento que queremos emitir:

dispatchEvent(new EventExtra("accionTerminada", true));

Creamos un nuevo evento de tipo EventExtra donde le indicamos el nombre del evento que queremos emitir y los parámetros que queramos, que para eso es nuestro evento

Vamos a ver la clase EventExtra:

package {

	import flash.events.*;

	// Extiendo la clase Event para que funcione como un evento mas al enviarse y recibirse.
	public class EventExtra extends Event{

		public var exito:Boolean;

		public function EventExtra(nombre:String, exito:Boolean=true){
			// Inicializo el constructor de Event
			super(nombre);
			// Guardo el valor de exito en una variable para poder acceder luego a ella.
			this.exito = exito;
		}
	}
}

No tiene nada especial, es un envoltorio de la clase Event pero recibe un parámetro extra que almaceno para luego poder acceder a su valor.

Así es como se recogería nuestro evento, con un listener, como siempre en AS3:

// Escucho si objetoEmisor emite el evento "accionTerminada" y le indico su detector de eventos.
objetoEmisor.addEventListener("accionTerminada", detectorAccionTerminada)

// El detector del evento, recibe un objeto evento de tipo EventExtra
function detectorAccionTerminada(evento:EventExtra):void{
	// Como tengo una referencia al evento, puedo acceder a sus variables publicas (exito).
	trace(evento.exito)
}

Leer el resto de esta entrada

La gestión de eventos de AS3 es muy buena, aunque a veces nos obliga a estar demasiado “encorsetados” en el trabajo día a día.

Algo que es muy común es poner un botón con su listener y una función detectora del evento, que recibe un parámetro de tipo MouseEvent:

import flash.events.MouseEvent;

miBoton.addEventListener(MouseEvent.MOUSE_DOWN, miOnMouseDown);

function miOnMouseDown(evento:MouseEvent):void{
	trace("Boton pulsado!!");
}

Hasta aquí todo guay. El problema viene cuando queremos llamar a esa función directamente, sin haber pulsado el botón, por ejemplo si queremos simular la acción del usuario o ejecutar el código de miOnMouseDown nada mas entrar en la sección. Nuestra función espera un evento de tipo MouseEvent como parámetro, y si hacemos la llamada sin ese parámetro nos dará un error al compilar.

La solución pasa por pasarle un parámetro de tipo MouseEvent construido por nosotros mismos:

miOnMouseDown(new MouseEvent(MouseEvent.MOUSE_DOWN));

Leer el resto de esta entrada

Ahora en AS3 es mucho mas fácil emitir un evento personalizado desde un objeto y recogerlo con un listener. Se hace mediante dispatchEvent.

Al igual que cuando queremos recoger el evento de ratón mouseDown lo hacemos así:

import flash.events.MouseEvent;

boton_btn.addEventListener("mouseDown", botonPulsado);

function botonPulsado(evento:MouseEvent):void{
	trace("Boton pulsado!!");
}

también podemos hacer que nuestros objetos emitan eventos para que otros objetos puedan recogerlos con un listener.

En AS3 todos los objetos que hereden de alguna subclase de DisplayObject (todos los de la lista de visualización) pueden emitir eventos, con lo que si nuestra clase extiende de Sprite, que será lo mas normal, pues ya podemos hacerlo.

Para emitir un evento haremos esto:

dispatchEvent(new Event("accionTerminada"));

donde accionTerminada es nuestro evento personalizado. Para recoger este evento usamos un listener:

import flash.events.Event;

emisor.addEventListener("accionTerminada", onAccionTerminada)

function onAccionTerminada(evento:Event):void{
	trace("Accion Terminada");
}

Leer el resto de esta entrada