Crea una classe Masking password in ActionScript 3.0

I campi della password ti consentono di creare un campo, simile a un campo di testo, che gli utenti possono digitare. Un campo password, tuttavia, fa apparire tutto come asterischi (*) in modo che gli spettatori non possano vedere ciò che viene digitato.

In questo tutorial, creeremo una classe statica che convertirà un campo di testo di input in un campo di password simile all'iPhone.




Passaggio 1: breve panoramica

Useremo il statico attributo in ActionScript 3.0 per dichiarare una classe che non dovrà essere istanziata per essere utilizzata, in questo modo possiamo chiamare i suoi metodi senza creare un oggetto usando il nuovo operatore.

La nostra classe creerà a Timer che sostituirà i caratteri del campo di testo di destinazione con qualsiasi dato carattere nel tempo specificato.

Passaggio 2: avvio

Apri Flash e crea un nuovo file Flash (ActionScript 3).

Imposta le dimensioni dello stage su 600x300 e aggiungi uno sfondo lineare grigio (#EEEEEE, #DDDDDD).

Passaggio 3: interfaccia

Aggiungiamo alcuni dettagli grafici alla nostra applicazione.

Seleziona lo strumento Rettangolo (R), crea un rettangolo 600 x 50 px e riempilo con # 222222.

Crea un campo di testo statico per aggiungere un titolo. Ho usato Helvetica Bold 21pt come TextFormat.

Usa lo Strumento Rettangolo Primitivo per creare un rettangolo di 200x30 px (#AAAAAAA) e modifica il raggio a 6,00. Duplica questa forma (Cmd + D), ridimensionala a 198x28px, cambia il suo colore in #EEEEEE e centralo nella forma precedente.

Aggiungi del testo per etichettare il campo.

Questo completerà la parte grafica.

Passaggio 4: campo password

Creeremo un Input TextField che utilizzeremo per ottenere l'input dell'utente e per specificare un target nella nostra classe di mascheramento della password.

Seleziona lo strumento di testo (T) e posiziona un campo di testo di input nello sfondo che abbiamo creato in precedenza. Imposta il nome dell'istanza su Passfield.

Passaggio 5: ActionScript!

Crea un nuovo documento ActionScript e salvalo come iPass.as. Questo sarà il nostro statico classe.

Passaggio 6: Classi obbligatorie

Le classi di cui avremo bisogno. Per informazioni specifiche, consultare la guida di Flash (F1).

 classi di pacchetti import flash.display.Sprite; import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; import flash.ui.Keyboard; import flash.events.KeyboardEvent;

Passaggio 7: estensione della classe

Useremo i metodi e le proprietà specifici di Sprite per estendere l'uso della classe Sprite.

 la classe pubblica iPass estende Sprite 

Passaggio 8: variabili

Queste sono le variabili che useremo, spiegate nei commenti. Si noti che le variabili sono dichiarate come statico avere accesso senza un'istanza.

 var statico pubblico: String = ""; // Questo memorizzerà la password originale per qualsiasi destinazione pubblica statica target: TextField; // The TextField per mascherare la variabile statica privata regExp: RegExp = /./g; // A Regular Expresion, cerca TUTTI i caratteri public static var timer: Timer = new Timer (1000); // L'oggetto del timer, verrà eseguito ogni secondo, quando chiamato

Passaggio 9: Funzione principale

Questo è il metodo che chiameremo per usare la classe.

 funzione statica pubblica maskTextField (t: TextField): void // Abbiamo bisogno di un parametro che specificherà il campo di testo di destinazione target = t; addListeners (); 

Passaggio 10: Sostituisci funzione

Questa è la funzione che sostituirà i caratteri nel campo obiettivo.

 funzione statica privata replaceOnTime (e: TimerEvent): void target.text = target.text.replace (regExp, "•"); // Sostituisce tutti i caratteri nel campo di testo con "•" timer.stop (); // Interrompe il timer quando i caratteri vengono sostituiti

Passaggio 11: Avvia timer

Questa funzione avvierà il timer quando il campo di testo di destinazione è a fuoco e viene premuto un tasto.

 funzione statica privata startTimer (e: KeyboardEvent): void / * Se il timer non è in esecuzione, avviarlo, altrimenti, resettare il timer, sostituire tutti i caratteri tranne l'ultimo ed eseguire nuovamente il timer * /! 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 chiavi valide, dalla a alla Z * / per (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  

Passaggio 12: ascoltatori

Aggiunge i listener agli oggetti Timer e TextField.

 funzione statica privata addListeners (): void timer.addEventListener (TimerEvent.TIMER, replaceOnTime); target.addEventListener (KeyboardEvent.KEY_UP, startTimer); 

Step 13: Main Class

Questa classe chiamerà la classe statica iPass e passerà il TextField nello stage come parametro.

Crea un nuovo documento ActionScript e salvalo come Main.as.

 classi di pacchetti import classes.iPass; import flash.display.Sprite; public class Main extends Sprite public function Main (): void iPass.maskTextField (passfield); // Chiama la classe iPass / * private function getPassword (): void trace (iPass.pass); // Un esempio di come ottenere la password * /

Passaggio 14: Classe documento

Torna al file .Fla e nel pannello Proprietà aggiungi classes.Main nel campo Class per renderlo la Document Class.

Conclusione

Ora hai creato una classe masker password e hai imparato come creare e utilizzare una classe statica: sperimenta i suoi vantaggi!

Grazie per aver letto!