Create et passord Maske klasse i Actionscript 3.0
Del
Del
to
Del
Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Passord felt tillate deg å lage et felt, som ligner på et tekstfelt, der brukerne kan skrive inn. En passordfeltet imidlertid forårsaker alt vises som stjerner (*), så tilskuere ikke kan se hva som blir skrevet.

I denne opplæringen, vil vi lage en statisk klasse som vil konvertere en Input Textfield til en iPhone- som passordfeltet

Trinn 1:. Kort oversikt

Vi vil gjøre bruk av statisk Anmeldelser attributt i Actionscript 3.0 å erklære en klasse som ikke trenger å brukes til å bli brukt, på denne måten vi kan kalle sine metoder uten å opprette et objekt med ny
operatør.

Vår klasse vil skape en Timer
som vil erstatte tegnene målet Textfield til en gitt karakter i den angitte tids

Trinn 2:. Starte

Åpne Flash og opprette en ny Flash-fil (Actionscript 3)

Sett scenen størrelsen til 600x300 og legge en grå lineær bakgrunn (#EEEEEE, #DDDDDD)

Trinn 3:.. Interface

La oss legge til noen grafiske detaljer til søknaden vår.

Velg rektangelverktøyet (R), opprette en 600x50px rektangel og fyll den med # 222222.

Opprett en statisk Textfield å legge til en tittel. Jeg brukte Helvetica Bold 21pt som tekstformat.

Bruk rektangel Primitive Tool til å lage en 200x30px rektangel (#AAAAAA) og endre avstanden til 6,00. Kopiere denne formen (Cmd + D), endre størrelse på det å 198x28px, endre sin farge til #EEEEEE og sentrere det i forrige form.

Legg til litt tekst å merke feltet

. Dette vil fullføre den grafiske delen

Trinn 4:. Passord Feltet

Vi vil skape en Input Textfield som vi skal bruke til å få brukerens input, og å angi et mål i vår passord maske klasse.

Velg Text Tool (T) og legger inn en Input Textfield i bakgrunnen vi laget før. Sette sitt eksempel navn til Pass

Trinn 5:.! Action

Opprett en ny Actionscript dokument og lagre det som iPass.as
. Dette vil være vår statisk
klasse

Trinn 6:. Må Classes

Klassene vi trenger. For spesifikk informasjon henvises det til Flash hjelp (F1)
pakke klasser {import flash.display.Sprite.; import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; import flash.ui.Keyboard; import flash.events.KeyboardEvent;
Trinn 7:. Utvide Class

Vi kommer til å bruke Sprite spesifikke metoder og egenskaper, slik at vi utvider med Sprite Class
public class iPass strekker Sprite {
Trinn 8: Variabler

Dette er de variablene vi vil bruke, forklarte i kommentarfeltet. Legg merke til at variabler deklareres som statisk
å ha tilgang uten en forekomst
public static Var pass: String = "";. //Dette vil lagre det opprinnelige passordet for noen usepublic Static Var målet: Textfield; //Tekstfeltet til maskprivate Static Var Regexp: RegExp = /./g; //A Regular Expresion, ser for ALLE characterspublic Static Var timer: Timer = new Timer (1000); //Timer objekt, vil utføre hvert sekund, da kalt
Trinn 9:.
Public static funksjon maskTextField Main Funksjon

Dette er den metoden vi vil kalle å bruke klassen (t: Textfield) : void //Vi trenger en parameter som vil angi målet Textfield {target = t; addListeners ();}
Trinn 10: Bytt Funksjon

Dette er funksjonen som skal erstatte tegnene i målfeltet
privat statisk funksjon replaceOnTime (e: Timerevent): void {target.. text = target.text.replace (regexp, "•"); //Erstatter alle tegnene i tekstfeltet med "•" timer.stop (); //Stopper tidtakeren når tegnene blir erstattet}
Trinn 11:. Begynn Timer

Denne funksjonen vil starte Timer når målet tekstfeltet er i fokus, og trykker på en tast
private statisk funksjon startTimer (e: KeyboardEvent): void {/* Hvis timeren ikke er i gang, starter det, ellers tilbakestille tidtakeren, erstatte alle tegn, men sist, og kjøre timer igjen * /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 (); /* Filtre gyldige nøkler, fra a til Z * /for (var i: int = 65; i < 123; i ++) {if (e.charCode == i) {passere + = String.fromCharCode (i); }} If (e.keyCode == Keyboard.BACKSPACE) {passere = pass.substring (0, pass.length - 1); //Hvis slette trykkes inn, slette siste røye}}
Trinn 12: Lyttere

Legger lytterne til timeren og Textfield gjenstander
private statiske funksjons addListeners (). Void {timer.addEventListener (TimerEvent.TIMER, replaceOnTime); target.addEventListener (KeyboardEvent.KEY_UP, startTimer);}
Trinn 13:. Hoved Class

Denne klassen vil kalle iPass statisk klasse og bestå Textfield i scenen som et parameter

Opprett en ny Actionscript dokument og lagre det som Main.as
pakke klasser {import classes.iPass.; import flash.display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main (): void {iPass.maskTextField (Passfield); //Henter iPass klassen} /* privat funksjon getPassword (): void {trace (iPass.pass); //Et eksempel på hvordan man kan få passordet} * /}}
Trinn 14: Dokument Class

Gå tilbake til FLA filen og i Properties Panel legge classes.Main
i Class-feltet for å gjøre det dokument Class

Konklusjon

Du har nå opprettet et passord masker klasse og lærte å lage og bruke en statisk klasse -.! eksperiment med sine fordeler

Takk for lesing!