AS3 Ideas–> Ideas para ActionScript3

En Flash, utilizando actionScript 3, podemos hacer que un movieclip, botón, campo de texto, o cualquier objeto instanciado en el escenario se desplace a través del mismo con el teclado.

Si asociamos un movimiento a una tecla específica, lo más probable es que cuando probemos la animación/aplicación no funcione el movimiento en caso de que presionemos más de una tecla al mismo tiempo. Por esta razón, el movimiento debe ser encargado a funciones que se realicen en asociación con un evento de tiempo (TimerEvent) o de fotogramas (ENTER_FRAME).

Veamos el código que utilizamos y posteriormente lo abordamos paso a paso:

Para que el código funcione debe existir el objeto en el escenario, y tener como nombre de instancia, en este caso ‘objeto’.

var pressArriba:Boolean=false;
var pressAbajo:Boolean=false;
var pressIzquierda:Boolean=false;
var pressDerecha:Boolean=false;
var velocidad:int=2;
stage.addEventListener(KeyboardEvent.KEY_DOWN, presionaTecla);
function presionaTecla(e:KeyboardEvent) {
switch (e.keyCode) {
case 37 :pressIzquierda=true;break;
case 38 :pressArriba=true;break;
case 39 :pressDerecha=true;break;
case 40 :pressAbajo=true;break;
}
}
stage.addEventListener(KeyboardEvent.KEY_UP, liberaTecla);
function liberaTecla(e:KeyboardEvent) {
switch (e.keyCode) {
case 37 :pressIzquierda=false;break;
case 38 :pressArriba=false;break;
case 39 :pressDerecha=false;break;
case 40 :pressAbajo=false;break;
}
}
var tiempo:Timer=new Timer(10,0);
tiempo.start();
tiempo.addEventListener(TimerEvent.TIMER, mover);
function mover(e:TimerEvent) {
if (pressAbajo==true) {
objeto.y+=velocidad;
}
if (pressArriba==true) {
objeto.y-=velocidad;
}
if (pressIzquierda==true) {
objeto.x-=velocidad;
}
if (pressDerecha==true) {
objeto.x+=velocidad;
}
}

Para realizar esta acción necesitamos:

- Definir las variables:

una variable del tipo Boolean (true/false) para cada tecla que queramos activar. Esto con el fin de crear un listener para saber cuándo ha sido presionada una tecla, y que nos active cada variable dependiendo de la tecla que se presione. Es decir, si se presiona, la variable pasa a tener el valor ‘true’.
Por otra parte hemos definido una variable que hace referencia a la velocidad, aunque esta no es del todo necesaria. Sin embargo es util porque dese allí podemos modificar la velocidad para todos los movimientos del objeto.
Para esto escribimos:
var pressArriba:Boolean=false;
var pressAbajo:Boolean=false;
var pressIzquierda:Boolean=false;
var pressDerecha:Boolean=false;
var velocidad:int=2;

- Crear Listeners y funciones:

Crear Listener y funcion para tecla presionada:

En primer lugar vamos a crear un listener que nos avisará cuando ha sido presionada una tecla. Este debemos asociarlo al escenario (stage). Y le indicamos que al ser presionada una tecla ejecute la función ‘presionaTecla’:
stage.addEventListener(KeyboardEvent.KEY_DOWN, presionaTecla);
Y pasamos a definir la función. Lo que hace esta función es comprobar el código de la tecla presionada (37-38-39-40 corresponden a las flechas del teclado) a través de keyCode. Al comprobar cual tecla está presionada, cambia el valor de la variable comprometida a true.
function presionaTecla(e:KeyboardEvent) {
switch (e.keyCode) {
case 37 :pressIzquierda=true;break;
case 38 :pressArriba=true;break;
case 39 :pressDerecha=true;break;
case 40 :pressAbajo=true;break;
}
}

Crear Listener y funcion para tecla liberada:

Para hacer que el objeto deje de moverse al soltar la tecla, debemos hacer lo mismo pero con la función contraria, es decir, que al soltar la tecla el valor de la variable comprometida pase a false.
stage.addEventListener(KeyboardEvent.KEY_UP, liberaTecla);
function liberaTecla(e:KeyboardEvent) {
switch (e.keyCode) {
case 37 :pressIzquierda=false;break;
case 38 :pressArriba=false;break;
case 39 :pressDerecha=false;break;
case 40 :pressAbajo=false;break;
}
}

Crear Listener y funcion para controlar el movimiento:

Para programar el movimiento directamente, podemos hacerlo de dos formas: a través de una función con ENTER_FRAME, o a través de un Timer. La ventaja del Timer sobre el ENTER_FRAME es que con el primero se ejecuta la acción cada determinado tiempo, y por lo tanto el movimiento no depende de la velocidad de reproducción de los fotogramas. Por lo tanto definimos un Timer, lo inicializamos, y le añadimos un listener para escuchar cuando este realice la acción. Si quieres saber más sobre la utilización, definición y configuración y más información del Timer, haz clic aquí.
var tiempo:Timer=new Timer(10,0);
tiempo.start();
tiempo.addEventListener(TimerEvent.TIMER, mover);
Hecho esto, creamos la función que se encargará específicamente del movimiento del objeto modificando las propiedades .x y .y del objeto:
function mover(e:TimerEvent) {
if (pressAbajo==true) {
objeto.y+=velocidad;
}
if (pressArriba==true) {
objeto.y-=velocidad;
}
if (pressIzquierda==true) {
objeto.x-=velocidad;
}
if (pressDerecha==true) {
objeto.x+=velocidad;
}
}

En este momento nuestro código debe funcionar a la perfección, siempre y cuando hayamos dado el nombre de instancia al objeto que queremos mover. Para este caso, debe llamarse objeto.

Espero que esta información sea de utilidad para muchos. Cualquier problema o inconsistencia, pueden añadir un comentario aquí mismo. Igualmente, si encuentras útil el artículo, deja un comentario. Un saludo.
Samuel Jiménez. EsK.