Consejo rápido Uso de códigos de tecla AS3

Aprenda a usar códigos de teclas en ActionScript 3.0 para detectar cuándo el usuario presiona una tecla específica.


Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos:

Prueba las respuestas presionando las teclas de tu teclado ...


Paso 1: Añadir cuadros de texto

Abra un nuevo documento de Flash. Agregue cuadros de texto estáticos a la izquierda que tienen los nombres de las teclas que detectará y cuadros de texto dinámicos con el texto "No" dentro de ellos.

Dé a sus cuadros de texto dinámico nombres de instancia con el siguiente formato: "keyname_txt". Los míos son ctrl_txt, shift_txt, left_txt, up_txt, right_txt, down_txt y space_text respectivamente.


Paso 2: Crear código base

Ir Archivo〉 Nuevo y seleccione Archivo Actionscript.

Ahora configure la clase de documento base así: (Si desea obtener más información sobre las clases de documentos, lea el Consejo rápido de Michael)

 paquete import flash.display.MovieClip; La clase pública KeyCodes extiende MovieClip public function KeyCodes () 

Paso 3: Crear los eventos de escucha

Para detectar cuándo el usuario presiona una tecla con AS3, debemos agregar escuchas de eventos que escuchen a un usuario presionando y soltando teclas. Podemos hacer esto agregando el siguiente código dentro de nuestro KeyCodes () función constructora:

 Función pública KeyCodes () stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress); // Agregar un detector de eventos al escenario que escucha una tecla presionada stage.addEventListener (KeyboardEvent.KEY_UP, onKeyRelease); // Agregar un detector de eventos al escenario que escucha una clave que se está liberando

Antes de continuar, necesitamos agregar una línea de código para importar el Evento del teclado. Agregue esta línea de código debajo de donde importamos el Clip de película clase en la línea 3:

 paquete import flash.display.MovieClip; import flash.events.KeyboardEvent;

Paso 4: Prueba simple

Debajo de nuestros oyentes, agregue dos funciones que se activarán cuando el usuario presione o suelte una tecla:

 Función pública KeyCodes () stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress); // Agregar un detector de eventos al escenario que escucha una tecla presionada stage.addEventListener (KeyboardEvent.KEY_UP, onKeyRelease); // Agregue un detector de eventos a la etapa que escucha la función de una tecla que se está liberando onKeyPress (e: KeyboardEvent): void  function onKeyRelease (e: KeyboardEvent): void 

Ahora podemos añadir un rastro() a cada función, de modo que cuando presiona una tecla, la tecla "presiona" en el panel de salida y la "tecla liberada" cuando se suelta la tecla. Para ello podemos agregar el siguiente código a nuestras funciones:

 Función pública KeyCodes () stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress); // Agregar un detector de eventos al escenario que escucha una tecla presionada stage.addEventListener (KeyboardEvent.KEY_UP, onKeyRelease); // Agregar un detector de eventos a la etapa que escucha una función que se está liberando de la tecla en KeyPress (e: KeyboardEvent): void trace ("key presionado");  function onKeyRelease (e: KeyboardEvent): void trace ("key release"); 

Pon a prueba tu película (Ctrl + Enter). Cuando presiona una tecla, debe rastrear "tecla presionada" en su panel de salida y "tecla liberada" cuando la suelta.


Paso 5: Detectar códigos clave

Puede detectar qué tecla ha sido presionada al rastrear el código de tecla. Cambia tu rastro desde traza ("tecla presionada") a trace (e.keyCode) y eliminar la clave de seguimiento liberado. Tu código ahora debería verse así:

 Función pública KeyCodes () stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress); // Agregar un detector de eventos al escenario que escucha una tecla presionada stage.addEventListener (KeyboardEvent.KEY_UP, onKeyRelease); // Agregue un detector de eventos a la etapa que escucha la función que se está liberando de una tecla en KeyPress (e: KeyboardEvent): void trace (e.keyCode);  function onKeyRelease (e: KeyboardEvent): void 

Ahora, cuando presiona una tecla, rastreará el código que se relaciona con esa tecla específica. Si presiono la flecha izquierda se trazará 37 en el panel de salida y la barra espaciadora rastreará 32.

Con esta información literalmente al alcance de su mano, puede ejecutar diferentes eventos para diferentes teclas, todo con un detector de eventos. Intente agregar este código a su función y vea qué sucede cuando presiona la barra espaciadora:

 function onKeyPress (e: KeyboardEvent): void trace (e.keyCode); if (e.keyCode == 32) // Si el código clave es igual a 32 (barra espaciadora) trace ("barra espaciadora presionada"); 

Ahora, si presiona la barra espaciadora, no solo trazará 32, sino también la barra espaciadora presionada. Puede usar esto para tratar con muchas teclas diferentes por separado dentro de una función.


Paso 6: Cambiar texto al presionar la tecla

Continúe y elimine la traza dentro de la declaración "if". Reemplázalo con esto:

 function onKeyPress (e: KeyboardEvent): void trace (e.keyCode); if (e.keyCode == 32) // Si el código clave es igual a 32 (barra espaciadora) space_txt.text = "Sí"; // Cambiar el cuadro de texto de la barra espaciadora a "Sí"

Ahora, cuando presiona la barra espaciadora, debería ver el cambio de la etiqueta de la barra espaciadora de "No" a "Sí".

Haga esto para todas las teclas excepto control y cambio, ya que tienen formas especiales de ser detectadas.

 function onKeyPress (e: KeyboardEvent): void if (e.keyCode == 37) // 37 es el código clave para la flecha izquierda left_txt.text = "Sí";  if (e.keyCode == 38) // 38 es el código clave para la flecha hacia arriba up_txt.text = "Sí";  if (e.keyCode == 39) // 39 es el código clave para la flecha derecha right_txt.text = "Sí";  if (e.keyCode == 40) // 40 es el código clave para la flecha hacia abajo down_txt.text = "Sí";  if (e.keyCode == 32) // 32 es el código clave para la barra espaciadora space_txt.text = "Sí"; 

Paso 7: Detect Control and Shift

¿Cómo detectamos si se presionan los botones de control o de cambio? Cada uno tiene una variable incorporada fácil que se cambia automáticamente cuando se presionan las teclas. Puedes detectarlos usando el siguiente código. Ponga este código debajo de las otras declaraciones "si" en onKeyPress ().

 if (e.ctrlKey == true) ctrl_txt.text = "Yes";  if (e.shiftKey == true) shift_txt.text = "Yes"; 

Nota: también hay tecla Alt, que detectará si se presiona la tecla alt. Esto solo funcionará en aplicaciones de Adobe AIR, ya que al presionar alt mientras se enfoca en un archivo Flash casi siempre se enfocará desde el SWF y, por lo tanto, no funcionará.


Paso 8: Escribir la función de liberación

Para crear la función de liberación, todo lo que tenemos que hacer es copiar el código dentro de la onKeyPress () Funciona y solo cambia algunas cosas.

Necesitamos cambiar todo el texto para decir "No" en lugar de "Sí" y verificar si ctrlKey y tecla Shift son falso no cierto. Así es como debería verse el código final:

 paquete import flash.display.MovieClip; import flash.events.KeyboardEvent; La clase pública KeyCodes extiende MovieClip public function KeyCodes () stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress); // Agregar un detector de eventos al escenario que escucha una tecla presionada stage.addEventListener (KeyboardEvent.KEY_UP, onKeyRelease); // Agregue un detector de eventos a la etapa que escucha la función que se está liberando de una tecla en KeyPress (e: KeyboardEvent): void if (e.keyCode == 37) // 37 es el código clave para la flecha izquierda left_txt.text = "Sí ";  if (e.keyCode == 38) // 38 es el código clave para la flecha hacia arriba up_txt.text = "Sí";  if (e.keyCode == 39) // 39 es el código clave para la flecha derecha right_txt.text = "Sí";  if (e.keyCode == 40) // 40 es el código clave para la flecha hacia abajo down_txt.text = "Sí";  if (e.keyCode == 32) // 32 es el código clave para la barra espaciadora space_txt.text = "Sí";  if (e.ctrlKey == true) ctrl_txt.text = "Yes";  if (e.shiftKey == true) shift_txt.text = "Yes";  function onKeyRelease (e: KeyboardEvent): void if (e.keyCode == 37) // 37 es el código clave para la flecha izquierda left_txt.text = "No";  if (e.keyCode == 38) // 38 es el código clave para la flecha hacia arriba up_txt.text = "No";  if (e.keyCode == 39) // 39 es el código clave para la flecha derecha right_txt.text = "No";  if (e.keyCode == 40) // 40 es el código clave para la flecha hacia abajo down_txt.text = "No";  if (e.keyCode == 32) // 32 es el código clave para la barra espaciadora space_txt.text = "No";  if (e.ctrlKey == false) ctrl_txt.text = "No";  if (e.shiftKey == false) shift_txt.text = "No"; 

Declarar las funciones dentro del constructor significa que se recolectarán como basura si se eliminan los escuchas de eventos. Si prefieres que esto no suceda, puedes declararlos como métodos, de esta manera:

 paquete import flash.display.MovieClip; import flash.events.KeyboardEvent; La clase pública KeyCodes extiende MovieClip public function KeyCodes () stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress); // Agregar un detector de eventos al escenario que escucha una tecla presionada stage.addEventListener (KeyboardEvent.KEY_UP, onKeyRelease); // Agregar un detector de eventos a la etapa que escucha la liberación de una tecla función pública onKeyPress (e: KeyboardEvent): void if (e.keyCode == 37) // 37 es el código de tecla para la flecha izquierda left_txt.text = "Sí";  if (e.keyCode == 38) // 38 es el código clave para la flecha hacia arriba up_txt.text = "Sí";  if (e.keyCode == 39) // 39 es el código clave para la flecha derecha right_txt.text = "Sí";  if (e.keyCode == 40) // 40 es el código clave para la flecha hacia abajo down_txt.text = "Sí";  if (e.keyCode == 32) // 32 es el código clave para la barra espaciadora space_txt.text = "Sí";  if (e.ctrlKey == true) ctrl_txt.text = "Yes";  if (e.shiftKey == true) shift_txt.text = "Yes";  función pública onKeyRelease (e: KeyboardEvent): void if (e.keyCode == 37) // 37 es el código clave para la flecha izquierda left_txt.text = "No";  if (e.keyCode == 38) // 38 es el código clave para la flecha hacia arriba up_txt.text = "No";  if (e.keyCode == 39) // 39 es el código clave para la flecha derecha right_txt.text = "No";  if (e.keyCode == 40) // 40 es el código clave para la flecha hacia abajo down_txt.text = "No";  if (e.keyCode == 32) // 32 es el código clave para la barra espaciadora space_txt.text = "No";  if (e.ctrlKey == false) ctrl_txt.text = "No";  if (e.shiftKey == false) shift_txt.text = "No"; 

Conclusión

¡Pon a prueba tu película y todo debería estar bien! Si tiene algún comentario o problema, simplemente publíquelo en la sección de comentarios y yo (o alguien más) responderemos su pregunta..

Gracias por leer y espero que te haya ayudado a aprender más sobre las pulsaciones de teclas en Flash.