Creați o clasă de mascare a parolelor în ActionScript 3.0

Câmpurile de parolă vă permit să creați un câmp, similar unui câmp de text, pe care utilizatorii îl pot scrie. Totuși, un câmp de parolă face ca totul să apară ca asteriscuri (*), astfel încât privitorii să nu poată vedea ce este scris.

În acest tutorial, vom crea o clasă statică care va converti un TextField de intrare într-un câmp de parolă asemănător iPhone-ului.




Pasul 1: Prezentare succintă

Vom face uz de static atributul în ActionScript 3.0 pentru a declara o clasă care nu va trebui să fie instanțiată pentru a fi utilizată, astfel putem să-i apelăm metodele fără a crea un obiect utilizând nou operator.

Clasa noastră va crea o Cronometrul care va înlocui caracterele TextField țintă cu orice caracter dat în timpul specificat.

Pasul 2: Începând

Deschideți Flash și creați un fișier Flash nou (ActionScript 3).

Setați dimensiunea scenei la 600x300 și adăugați un fond liniar gri (#EEEEEE, #DDDDDD).

Pasul 3: Interfața

Să adăugăm câteva detalii grafice aplicației noastre.

Selectați instrumentul Rectangle (R), creați un dreptunghi de 600x50px și completați-l cu # 222222.

Creați un text static pentru a adăuga un titlu. Am folosit Helvetica Bold 21pt ca TextFormat.

Utilizați instrumentul Primitiv dreptunghi pentru a crea un dreptunghi de 200x30px (#AAAAAA) și schimbați raza la 6.00. Duplicați această formă (Cmd + D), redimensionați-o la 198x28px, modificați culoarea în #EEEEEE și centrați-o în forma anterioară.

Adăugați un text pentru a eticheta câmpul.

Aceasta va completa partea grafică.

Pasul 4: Câmp de parolă

Vom crea un TextField de intrare pe care îl vom folosi pentru a obține intrarea utilizatorului și pentru a specifica o țintă în clasa noastră de mascare a parolelor.

Selectați Instrumentul de Text (T) și plasați un TextField de intrare în fundalul pe care l-am creat înainte. Setați numele de instanță la Passfield.

Pasul 5: ActionScript!

Creați un nou document ActionScript și salvați-l ca iPass.as. Asta va fi al nostru static clasă.

Pasul 6: Clasele necesare

Clasele de care avem nevoie. Pentru informații specifice, consultați ajutorul Flash (F1).

 pachete clase import flash.display.Sprite; import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; import flash.ui.Keyboard; import flash.events.KeyboardEvent;

Pasul 7: Extinderea clasei

Vom folosi metode și proprietăți specifice Sprite, astfel încât să extindem folosind clasa Sprite.

 clasa publica iPass extinde Sprite 

Pasul 8: Variabile

Acestea sunt variabilele pe care le vom folosi, explicate în comentarii. Observați că variabilele sunt declarate ca static să aibă acces fără o instanță.

 pasul static public var: String = ""; // Aceasta va stoca parola originala pentru orice destinatie publica statica var: TextField; // TextField pentru a masca privat static var regExp: RegExp = /./g; // O Expresie Regulară, caută TOATE caracterele public static var timer: Timer = timer nou (1000); // Obiect temporizator, se execută în fiecare secundă, atunci când este apelat

Pasul 9: Funcția principală

Aceasta este metoda pe care o vom folosi pentru a folosi clasa.

 funcția statică publică maskTextField (t: TextField): void // Avem nevoie de un parametru care să precizeze țintă TextField target = t; addListeners (); 

Pasul 10: Înlocuiți funcția

Aceasta este funcția care va înlocui caracterele din câmpul țintă.

 funcția statică privată replaceOnTime (e: TimerEvent): void target.text = target.text.replace (regExp, "•"); // Înlocuiește toate caracterele din câmpul de text cu "•" timer.stop (); // Oprește cronometrul când caracterele sunt înlocuite

Pasul 11: Porniți cronometrul

Această funcție va porni temporizatorul atunci când câmpul text țintă este în focalizare și o tastă este apăsată.

 Funcția statică privată startTimer (e: KeyboardEvent): void / * Dacă temporizatorul nu rulează, porniți-l, altceva, resetați temporizatorul, înlocuiți toate caracterele, dar ultima și executați temporizatorul din nou * /! 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 (); / * Filtrează cheile valide, de la a la Z * / pentru (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  

Pasul 12: Ascultători

Adaugă ascultătorii la obiectele Timer și TextField.

 funcția statică privată addListeners (): void timer.addEventListener (TimerEvent.TIMER, replaceOnTime); target.addEventListener (KeyboardEvent.KEY_UP, startTimer); 

Pasul 13: Clasa principală

Această clasă va apela clasa iPass statică și va trece TextField în stadiu ca parametru.

Creați un nou document ActionScript și salvați-l ca Main.as.

 pachete clase import classes.iPass; import flash.display.Sprite; clasa publică principală se extinde Sprite funcția publică principală (): void iPass.maskTextField (passField); // solicită clasa iPass / * funcția privată getPassword (): void trace (iPass.pass); // Un exemplu despre cum să obțineți parola * /

Pasul 14: Clasa de documente

Reveniți la fișierul .Fla și în panoul Proprietăți adăugați classes.Main în câmpul Clasă pentru ao face clasa de documente.

Concluzie

Ați creat acum o clasă de mască a parolei și ați învățat cum să creați și să utilizați un experiment Static Class - cu avantajele sale!

Vă mulțumim pentru lectură!

Cod