Crear una clase de máscara de contraseña en ActionScript 3.0

Los campos de contraseña le permiten crear un campo, similar a un campo de texto, en el que los usuarios pueden escribir. Sin embargo, un campo de contraseña hace que todo se muestre como un asterisco (*) para que los usuarios no puedan ver lo que se está escribiendo..

En este tutorial, crearemos una clase estática que convertirá un campo de texto de entrada en un campo de contraseña similar a un iPhone.




Paso 1: Breve descripción

Haremos uso de la estático atributo en ActionScript 3.0 para declarar una clase que no necesita ser instanciada para ser utilizada, de esta manera podemos llamar a sus métodos sin crear un objeto usando el nuevo operador.

Nuestra clase creará una Minutero que reemplazará los caracteres del TextField objetivo a cualquier carácter dado en el tiempo especificado.

Paso 2: Inicio

Abra Flash y cree un nuevo archivo Flash (ActionScript 3).

Establezca el tamaño del escenario en 600x300 y agregue un fondo lineal gris (#EEEEEE, #DDDDDD).

Paso 3: Interfaz

Añadamos algunos detalles gráficos a nuestra aplicación..

Seleccione la herramienta Rectángulo (R), cree un rectángulo de 600x50px y rellénelo con # 222222.

Crea un campo de texto estático para agregar un título. Usé Helvetica Bold 21pt como TextFormat.

Use la Herramienta primitiva de rectángulo para crear un rectángulo de 200x30px (#AAAAAA) y cambie el radio a 6.00. Duplique esta forma (Cmd + D), cambie su tamaño a 198x28px, cambie su color a #EEEE y céntrela en la forma anterior.

Agrega un texto para etiquetar el campo.

Esto completará la parte gráfica..

Paso 4: Campo de contraseña

Crearemos un campo de texto de entrada que usaremos para obtener la entrada del usuario y para especificar un objetivo en nuestra clase de máscara de contraseña.

Seleccione la herramienta de texto (T) y coloque un campo de texto de entrada en el fondo que creamos anteriormente. Establezca su nombre de instancia en campo de pase.

Paso 5: ActionScript!

Cree un nuevo documento ActionScript y guárdelo como iPass.as. Esta será nuestra estático clase.

Paso 6: Clases Requeridas

Las clases que necesitaremos. Para obtener información específica, consulte la ayuda de Flash (F1).

 clases de paquetes import flash.display.Sprite; importar flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; importar flash.ui.Keyboard; import flash.events.KeyboardEvent;

Paso 7: Extendiendo la Clase

Vamos a utilizar métodos y propiedades específicos de Sprite, por lo que ampliamos el uso de la Clase Sprite.

 clase pública iPass extiende Sprite 

Paso 8: Variables

Estas son las variables que utilizaremos, explicadas en los comentarios. Observe que las variables se declaran como estático tener acceso sin instancia.

 public static var pass: String = ""; // Esto almacenará la contraseña original para cualquier uso public static var target: TextField; // El campo de texto para enmascarar var estático privado regExp: RegExp = /./g; // Una Expresión regular, busca TODOS los caracteres public static var timer: Timer = new Timer (1000); // Timer objeto, se ejecutará cada segundo, cuando se llama

Paso 9: Función principal

Este es el método al que llamaremos para usar la clase..

 función estática pública maskTextField (t: TextField): void // Necesitamos un parámetro que especifique el TextField de destino target = t; addListeners (); 

Paso 10: Reemplazar la función

Esta es la función que reemplazará los caracteres en el campo de destino..

 función estática privada replaceOnTime (e: TimerEvent): void target.text = target.text.replace (regExp, "•"); // Reemplaza todos los caracteres en el campo de texto con "•" timer.stop (); // Detiene el temporizador cuando se reemplazan los caracteres

Paso 11: Iniciar el temporizador

Esta función iniciará el temporizador cuando el campo de texto de destino esté enfocado y se presione una tecla.

 función estática privada startTimer (e: KeyboardEvent): void / * Si el temporizador no se está ejecutando, inícielo, reinicie el temporizador, reemplace todos los caracteres pero el último y vuelva a ejecutar el temporizador * /! timer.running? timer.start (): timer.reset (); var msk: String = target.text.substring (0, target.length - 1); target.text = msk.replace (regExp, "•") + String.fromCharCode (e.charCode); timer.start (); / * Filtra claves válidas, de la a a la Z * / para (var i: int = 65; i < 123; i++)  if (e.charCode == i)  pass += String.fromCharCode(i);   if (e.keyCode == Keyboard.BACKSPACE)  pass = pass.substring(0, pass.length - 1); //If delete is pressed, delete last char  

Paso 12: Oyentes

Agrega los oyentes a los objetos Timer y TextField.

 función estática privada addListeners (): void timer.addEventListener (TimerEvent.TIMER, replaceOnTime); target.addEventListener (KeyboardEvent.KEY_UP, startTimer); 

Paso 13: Clase principal

Esta clase llamará a la clase estática iPass y pasará el campo de texto en la etapa como un parámetro.

Cree un nuevo documento ActionScript y guárdelo como Main.as.

 clases de paquetes import classes.iPass; importar flash.display.Sprite; public class Main extiende Sprite public function Main (): void iPass.maskTextField (passField); // Llama a la clase iPass / * función privada getPassword (): void trace (iPass.pass); // Un ejemplo de cómo obtener la contraseña * /

Paso 14: Clase de documento

Vuelva al archivo .Fla y en el Panel de propiedades agregue clases.principal en el campo Clase para que sea la Clase de documento.

Conclusión

Ahora ha creado una clase de enmascaramiento de contraseñas y ha aprendido a crear y utilizar una clase estática: experimente con sus ventajas!

Gracias por leer!