Een maskeerklasse voor wachtwoorden maken in ActionScript 3.0

Met wachtwoordvelden kunt u een veld maken, vergelijkbaar met een tekstveld, waarin gebruikers kunnen typen. Een wachtwoordveld zorgt er echter voor dat alles als asterisken wordt weergegeven (*), zodat toeschouwers niet kunnen zien wat er wordt getypt.

In deze zelfstudie maken we een statische klasse die een Input TextField naar een iPhone-achtig wachtwoordveld converteert.




Stap 1: Kort overzicht

We zullen gebruik maken van de statisch attribuut in ActionScript 3.0 om een ​​klasse te declareren die niet hoeft te worden geïnstantieerd om te worden gebruikt, op deze manier kunnen we de methoden aanroepen zonder een object te maken met behulp van de nieuwe operator.

Onze klas zal een maken timer die de tekens van het doel TextField zal vervangen door een bepaald teken in de opgegeven tijd.

Stap 2: starten

Open Flash en maak een nieuw Flash-bestand (ActionScript 3).

Stel de werkgebiedgrootte in op 600x300 en voeg een grijze lineaire achtergrond toe (#EEEEEE, #DDDDDD).

Stap 3: Interface

Laten we wat grafische details toevoegen aan onze applicatie.

Selecteer het gereedschap Rechthoek (R), maak een rechthoek van 600x50px en vul deze met # 222222.

Maak een statisch tekstveld om een ​​titel toe te voegen. Ik gebruikte Helvetica Bold 21pt als TextFormat.

Gebruik het Primitive Tool Rechthoek om een ​​rechthoek van 200x30px (#AAAAAA) te maken en de straal in 6.00 te veranderen. Dupliceer deze vorm (Cmd + D), verklein hem naar 198x28 px, verander zijn kleur in #EEEEEE en centreer hem in de vorige vorm.

Voeg wat tekst toe om het veld te labelen.

Hiermee wordt het grafische gedeelte voltooid.

Stap 4: Wachtwoordveld

We zullen een Input TextField maken dat we gebruiken om de invoer van de gebruiker te krijgen en om een ​​doel op te geven in onze wachtwoordmaskingsklasse.

Selecteer het Tekstgereedschap (T) en plaats een Input TextField in de achtergrond die we eerder hebben gemaakt. Stel de naam van het exemplaar in op Passfield.

Stap 5: ActionScript!

Maak een nieuw ActionScript-document en sla het op als iPass.as. Dit zal onze zijn statisch klasse.

Stap 6: Vereiste klassen

De lessen die we nodig hebben. Raadpleeg de Help van Flash (F1) voor specifieke informatie..

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

Stap 7: De klasse uitbreiden

We gaan Sprite-specifieke methoden en eigenschappen gebruiken, dus we breiden het gebruik van de Sprite-klasse uit.

 public class iPass breidt Sprite uit 

Stap 8: Variabelen

Dit zijn de variabelen die we zullen gebruiken, uitgelegd in de opmerkingen. Merk op dat de variabelen worden gedeclareerd als statisch toegang hebben zonder een instantie.

 public static var pass: String = ""; // Hiermee wordt het originele wachtwoord voor elk gebruik opgeslagen openbaar statistisch var-doel: TextField; // Het tekstveld om privéstatistieken te maskeren var regExp: RegExp = /./g; // A Regular Expresion, zoekt naar ALLE personages public static var timer: Timer = new Timer (1000); // Timer-object, wordt elke seconde uitgevoerd wanneer deze wordt aangeroepen

Stap 9: Hoofdfunctie

Dit is de methode die we zullen gebruiken om de klas te gebruiken.

 public static function maskTextField (t: TextField): void // We hebben een parameter nodig die het doel TextField target = t; addListeners (); 

Stap 10: vervang de functie

Dit is de functie die de tekens in het doelveld zal vervangen.

 private static function replaceOnTime (e: TimerEvent): void target.text = target.text.replace (regExp, "•"); // Vervangt alle tekens in het tekstveld met "•" timer.stop (); // Stopt de timer wanneer de tekens worden vervangen

Stap 11: start de timer

Deze functie start de Timer wanneer het doeltekstveld in focus is en een toets wordt ingedrukt.

 persoonlijke statische functie startTimer (e: KeyboardEvent): void / * Als de timer niet loopt, start deze dan, anders reset timer, vervang alle tekens maar laatste en voer de timer opnieuw uit * /! 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 (); / * Filter geldige sleutels, van a tot Z * / for (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  

Stap 12: Luisteraars

Voegt de listeners toe aan de objecten Timer en TextField.

 private static function addListeners (): void timer.addEventListener (TimerEvent.TIMER, replaceOnTime); target.addEventListener (KeyboardEvent.KEY_UP, startTimer); 

Stap 13: Hoofdklasse

Deze klasse roept de statische klasse van iPass aan en geeft het TextField als parameter door.

Maak een nieuw ActionScript-document en sla het op als Main.as.

 pakket klassen import classes.iPass; import flash.display.Sprite; public class Belangrijkste uitbreidingen Sprite public function Main (): void iPass.maskTextField (passField); // Roept de iPass-klasse aan / * private functie getPassword (): void trace (iPass.pass); // Een voorbeeld van hoe u het wachtwoord kunt ophalen * /

Stap 14: Documentklasse

Ga terug naar het .Fla-bestand en voeg in het Properties Panel toe classes.Main in het veld Klasse om er de documentklasse van te maken.

Conclusie

U hebt nu een wachtwoordmaskerklasse gemaakt en hebt geleerd hoe u een statische klasse maakt en gebruikt - experimenteer met de voordelen ervan!

Bedankt voor het lezen!