viernes, 21 de junio de 2013

Tutorial ActionScript 3.0 Eventos: Controlar las teclas que pulsamos

En el siguiente tutorial flash ActionScript 3.0 lo que quiero es enseñar a controlar las teclas que pulsamos desde nuestro teclado. El objetivo es hacer algo sencillo que muestre la flecha de dirección que pulsamos y cuantas veces hemos pulsados las teclas, como esto:

Lo primero que tenemos que hacer es crear un nuevo documento ActionScript 3.0
En este documento crearemos con la herramienta de texto, una caja de la siguiente manera:
Nos vamos a las propiedades de nuestro texto. En nombre de instancia le pondremos cajaTexto y en tipo: Texto dinámico:
Guardaremos el archivo como teclas en formato .fla donde queramos:
Una vez guardado crearemos un nuevo documento pero esta vez Clase de ActionScript 3.0 con el nombre codigo:
Este archivo nos creará un pequeño código como este:
package  {
public class codigo {
public function codigo() {
// constructor code
}
}
}
Vamos a modificar el código que quede de esta forma:
package  {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.KeyboardEvent;
public class codigo extends MovieClip {
public function codigo() {
stage.addEventListener(KeyboardEvent.KEY_DOWN, teclaPulsada);
}
function teclaPulsada(e:KeyboardEvent):void{
switch(e.keyCode)
{
case 38 :
cajaTexto.text=("Superior");
break;
case 40 :
cajaTexto.text=("Inferior");
break;
case 39 :
cajaTexto.text=("Derecha");
break;
case 37 :
cajaTexto.text=("Izquierda");
break;
default:
cajaTexto.text=("Ninguna");
break;
}
}
}
}
Si observamos un poco el código:
Hicimos 3 importaciones al código y extendimos la clase codigo de MovieClip
En el constructor añadimos un evento para que cada vez que presionemos una tecla se llame a la función teclaPulsada:
stage.addEventListener(KeyboardEvent.KEY_DOWN, teclaPulsada);
La función tecla pulsada lo que tiene es un switch, dependiendo de la tecla que hayamos pulsado (teclas por código, el 38 equivale a la flecha superior, el 40 a la tecla inferior...) nos escribirá en nuestra caja de texto superior, inferior, derecha... en caso de haber pulsado otra tecla nos escribirá ninguna.
Una vez tenemos el codigo lo guardaremos en la misma carpeta donde anteriormente habíamos guardado nuestro archivo.fla Lo guardaremos con el nombre codigo en formato .as
Nos volvemos a nuestro archivo.fla y abrimos las propiedades del documento (no las de la caja de texto). Le añadiremos la clase codigo que hemos creado antes:
Guardamos todo y pulsamos Ctrl + Enter para probar nuetro programa. Cada vez que pulsemos una tecla de dirección nos tendrá que escribir cual hemos pulsado.
Para hacer un contador de todas las teclas que pulsamos, en nuestra clase teclas añadiremos la variable:
var contadorTeclas:Number = 0;
y dentro de la función teclaPulsada añadiremos:
contadorTeclas++;
cajaContador.text=String(contadorTeclas);
Solo nos queda volver a nuestro documento archivo.fla y hacer una nueva caja de texto en la que tenga por nombre de instancia cajaContador y el tipo de texto sea dinámico, al igual que hicimos en la primera caja de texto que creamos.
El código completo quedaría de la siguiente manera:
package  {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.KeyboardEvent;
public class codigo extends MovieClip {
var contadorTeclas:Number = 0;
public function codigo() {
stage.addEventListener(KeyboardEvent.KEY_DOWN, teclaPulsada);
}
function teclaPulsada(e:KeyboardEvent):void{
contadorTeclas++;
cajaContador.text=String(contadorTeclas);
switch(e.keyCode)
{
case 38 :
cajaTexto.text=("Superior");
break;
case 40 :
cajaTexto.text=("Inferior");
break;
case 39 :
cajaTexto.text=("Derecha");
break;
case 37 :
cajaTexto.text=("Izquierda");
break;
default:
cajaTexto.text=("Ninguna");
break;
}
}
}
}

No hay comentarios:

Publicar un comentario