Añadir funciones al teclado con Actionscript 3

En este Tip escribiré una sencilla clase que nos permitirá de forma fácil añadir la ejecución de una función al presionar una determinada tecla del teclado.

para ello crearemos una clase "Teclado" y la colocaremos en nuestro package de clases de actionscript 3.

La clase la extenderemos de EventDispatcher para poder lanzar eventos desde ella, y la escribiremos siguiendo un patrón Singleton ya que solo nos interesa tener un único controlador del teclado y queremos tener acceso global a él.

Código :

package com.zguillez.events
{
   public class Teclado extends EventDispatcher
   {
      public static  var _instancia:Teclado;
      //-------------------------------------------
      public function Teclado(s:Singleton,clip) {}
      //-------------------------------------------
      public static function getInstancia(clip:MovieClip):Teclado
      {
         if (_instancia == null)
         {
            _instancia = new Teclado(new Singleton(),clip);
         }
         return _instancia;
      }
      //-------------------------------------------
   }
}
//-----------------------------------------
class Singleton {}

En la función getInstancia que es la que nos creará la instancia de la clase y nos dará acceso global a ella le pasaremos como parámetro el clip al que asignaremos el listener para el teclado. Ese clip lo registraremos en el constructor de la clase de igual manera que crearemos dos arrays uno para guardar las teclas a las que hemos asignado una función y otro para guardar referencia a esas funciones.

Código :

public function Teclado(s:Singleton,clip)
{
   _clip = clip;
   _funciones = new Array();
   _teclas = new Array();
   _clip.stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
}

Ahora crearemos una función publica con la que registraremos las teclas con sus respectivas funciones a ejecutar.

Código :

public function addTecla(n:uint, f:Function):void
{
   _teclas.push(n);
   _funciones.push(f);
}

Solo nos queda escribir la función onKeyDown que es la que se ejecuará al presionar una tecla del teclado. Esta función comprobará si la tecla presionada está dentro de la lista de teclas con una función asignada, y de ser así ejecutará dicha función.

Código :

private function onKeyDown(tecla:KeyboardEvent):void
{
   var total:uint = _teclas.length
   if (total > 0) {
      for (var i:uint = 0; i < total ; i++) {      
         if (tecla.keyCode == _teclas[i])
         {
            _funciones[i](tecla.keyCode);
         }
      }
   }
   _tecla = tecla.keyCode;
   dispatchEvent(new Event(Teclado.KEY_PRESS));
}

De más a más, Le añadiremos un dispatchEvent por si nos interesase detectar desde fuera de la clase el hecho de haber presionado una tecla. En la variable _tecla guaremos referncia del código de la última tecla presionada para acceder a ella al escuchar el dispatch. Deberemos crearnos un getter para esa variable.

Para utilizar esta clase, en nuestra pelicula FLA colocaremos esto:

Código :

import com.zguillez.events.Teclado;

var teclado:Teclado = Teclado.getInstancia(this);
teclado.addTecla(70,traceTecla);
teclado.addTecla(71,traceTecla);
teclado.addTecla(72,traceTecla);


function traceTecla(keycode)
{
   trace("Presioné la tecla " + keycode);
}

Con esto haremos que al presionar la tecla con los keyCodes 70, 71 y 72 (las teclas F,G y H) se ejecute la función traceTecla (aunque podíamos haber asignado una función diferente a cada tecla).

Hay que fijarse que las funciones que queramos asignar han de recibir como parámetro el keyCode de la tecla (esto lo podemos omitir al ejecutar la función desde la clase, pero siempre va bien saber el keyCode que te ejecuta la función, sobretodo en funciones que son ejecutadas por varias teclas como en este caso).

Así que la clase completa queda asi:

Código :

package com.zguillez.events
{
   import flash.display.Stage;
   import flash.display.MovieClip;
   import flash.events.Event;
   import flash.events.KeyboardEvent;
   import flash.events.EventDispatcher;
   //-------------------------------------------
   public class Teclado extends EventDispatcher
   {
      public static  var _instancia:Teclado;
      public static  var KEY_PRESS:String = "onKeyPress";
      private var _clip:MovieClip;
      private var _funciones:Array;
      private var _teclas:Array; 
      private var _tecla:uint; 
      //-------------------------------------------
      public function Teclado(s:Singleton,clip)
      {
         _clip = clip;
         _funciones = new Array();
         _teclas = new Array();
         _clip.stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
      }
      //-------------------------------------------
      public static function getInstancia(clip:MovieClip):Teclado
      {
         if (_instancia == null) {
            _instancia = new Teclado(new Singleton(),clip);
         }
         return _instancia;
      }
      //-----------------------------------------
      public function addTecla(n:uint, f:Function):void
      {
         _teclas.push(n);
         _funciones.push(f);
      }
      //-------------------------------------------
      private function onKeyDown(tecla:KeyboardEvent):void
      {
         var total:uint = _teclas.length
         if (total > 0) {
            for (var i:uint = 0; i < total ; i++) {      
               if (tecla.keyCode == _teclas[i])
               {
                  _funciones[i](tecla.keyCode);
               }
            }
         }
         _tecla = tecla.keyCode;
         dispatchEvent(new Event(Teclado.KEY_PRESS));
      }
      //-------------------------------------------
      public function get tecla():uint
      {
         return _tecla;
      }
      //-------------------------------------------
   }
}
//-----------------------------------------
class Singleton
{
}

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.