viernes, 25 de mayo de 2012

Programando X – ActionScript 3: Entrada de texto

¿Qué pasa si el usuario quiere escribir su nombre para que el prota de nuestro juego se llame como él/ella? Pues que necesitaremos un cuadro de texto que permita recoger desde el teclado y almacene los datos en una variable. Esto se consigue definiendo un TextField (que ya vimos en capítulos anteriores) de tipo INPUT. De esta forma podemos indicar que cuando se pulse una tecla determinada, el cuadro de texto recoja lo que hay escrito dentro de él.

Veamos:

var texto:TextField= new TextField();
texto.text=variable; 
texto.type=TextFieldType.INPUT; 

Con estas lineas de código definimos un TextField de tipo INPUT que toma valor de una variable en la que podremos almacenar lo que recojamos por teclado.

En un programita se ve mucho mejor:

import flash.text.TextField;
import flash.events.KeyboardEvent; 

var variable:String=""; 
var texto:TextField= new TextField(); 

texto.text=variable; 
texto.type=TextFieldType.INPUT; 
addChild(texto); 
texto.x=230; 
texto.y=300; 
texto.width=200; 
texto.height=30; 
texto.border=true; 

// Ahora vamos a guardarnos lo que se escriba en el cuadro de texto en "variable" (Usaremos una funcion) 

function acceptInput(){ 
    variable=texto.text;
    trace(variable); 
    removeChild(texto); // Asi eliminamos algo de la pantalla 


// LLamemos a la funcion con un Event listener

texto.addEventListener(KeyboardEvent.KEY_UP,checkForReturn); 

// Una funcion para comprobar la pulsacion de una tecla 

function checkForReturn(event:KeyboardEvent){
    if(event.charCode==13){ 
        acceptInput(); 
   } 


La salida de este programa (ilustrada con una bonita flecha en un software de dibujo para indicaros que lo que se introduce en el cuadro de texto sale por pantalla) sería:


Donde como vemos en el código, tras importar las clases necesarias para manejarnos con textos y eventos de teclado, creamos una variable de tipo String para almacenar lo que escriba el usuario. Luego creamos un TextField de tipo INPUT y lo añadimos a la pantalla con addChild, en una x e y determinadas y con un tamaño de ancho y alto (width y height) de 200x30, poniendo tam
bién su borde negro a verdadero (border=true), para que se vea el cuadro.

Tenemos también dos funciones. checkForReturn que retorna las teclas escritas por teclado al pulsar la tecla 13 (el Enter) y acceptInput que recoge lo escrito en el cuadro de texto dentro de variable, lo muestra por pantalla y luego elimina el cuadro de texto usando la función removeChild. Bastante sencillo.

Hay un EventListener que escucha las teclas que pulsa el usuario (pero solo si el cursor esta dentro del cuadro de texto que hemos creado) y espera al Enter para recoger todo lo escrito, mostrandolo luego por pantalla. Como lo que mostramos es el contenido de una variable, si tuvieramos un juego podriamos usar ese texto que ha escrito el jugador para indicar nombres de personajes o cosas por el estilo, que queremos que se puedan personalizar en nuestro proyecto.

Y para las próximas veces quedan algunos conceptos, algún ejemplillo más y… tal vez transformar el curso de programación a Unity, que es gratis y así aprendo más sobre él yo también. :P

6 comentarios:

  1. Como programo ya un cuadro de texto definido como tal, sin colocar áreas establecidas dentro del código, es decir llamando a la instancia... estoy haciendolo en Adobe Flash Professional CS5.5 en AC3

    ResponderEliminar
    Respuestas
    1. Tienes que darle un nombre de instancia al cuadro de texto antes de poder usarlo y en el código referirte a él con ese nombre.

      En las propiedades del cuadro de texto es donde pones dicho nombre. Un saludo!

      Eliminar
    2. Disculpame, retomé un programa que tenía viejo, quería saber era si ese pedazo del código en el que demarcaba mi cuadro de texto se omitía

      Eliminar
    3. No entiendo muy bien la pregunta. Podrías ser un poco más especifica?

      Eliminar
    4. Ando realizando un programa donde en la mayor parte necesito ingresar datos numéricos (cuadros de texto), yo ingresé cuadros de texto a cada escenario con sus respectivos nombres de instancia y en sus propiedades lo seleccioné como de "Introducción de Texto" y no como "Texto Dinámico" . Lo que no me queda claro como hacer el script para que el cuadro solo recoja los valores numéricos tecleados y guardarlos en la variable asignada para posteriormente utilizarlo en operaciones, sin realizar ediciones de tamaño y posición del cuadro respectivamente (ya que eso previamente lo hice). Gracias por la tan pronta respuesta, saludos!!

      Eliminar
    5. Para comprobar que son solo datos numéricos los ingresados en el cuadro de texto puedes hacerlo, por ejemplo, usando expresiones regulares, algo muy típico de los lenguajes de script para internet o aquellos que manejan formularios.

      Un saludo!

      Eliminar