Share
În acest sfat rapid pentru instrumentele Flash Professional CS5 vom examina componentele Text Area și Text Input.
Să aruncăm o privire rapidă asupra a ceea ce facem în acest Quick Tip:
În demo veți vedea cinci etichete, patru dintre ele sunt doar etichete statice care descriu ce componente sunt pentru. Eticheta din stânga jos arată câte caractere sunt disponibile pentru a fi tipărite și se va schimba de fiecare dată când utilizatorul introduce textul în textul comentariilor. Intrarea textului pentru nume permite numai numere și spații majuscule și minuscule. Caseta de parolă afișează textul ca o parolă cu asteriscuri și permite introducerea a numai 16 caractere (deoarece majoritatea parolei sunt o lungime setată). Comentariile textArea permit utilizatorului să introducă text, dar permite doar 250 de caractere. Zona de text cu stil este creată utilizând o combinație a textului TextFormat Obiect și HTML.
Deschideți un nou document Flash și setați următoarele proprietăți:
Deschideți fereastra componentelor accesând Meniu> Fereastră> Componente sau apăsați CTRL + F7.
Trageți cinci etichete, două intrări TextInputs și două TextAreas pe scenă.
În panoul Proprietăți dați primei etichete numele de instanță "nameLabel". Dacă panoul Proprietăți nu se afișează, mergeți la Meniu> Fereastră> Componente sau apăsați CTRL + F3.
Setați eticheta X la 35.00 și Y la 45.00
Setați lățimea etichetei la 100.00 și înălțimea acesteia la 22.00
Creați un nou fișier ActionScript și dați-i numele Main.as. Vom declara componentele noastre in Main.as asa ca trebuie sa dezactivati "instantele de declarare automata a etapelor", avantajul de a face acest lucru este ca veti primi sugestii de cod pentru instanta.
Accesați Meniu> Fișier> Setări publicare și faceți clic pe Setări de lângă Script [Actionscript 3].
Debifați "declararea automată a instanțelor de etapă".
În Main.as, deschideți declarația pachetului și importați clasele pe care le vom folosi. Adăugați următoarele la Main.as:
pachet // Componente import fl.controls.Label; import fl.controls.TextArea; import fl.controls.TextInput; // Necesitatea de a extinde clipul video pentru a le importa importul flash.display.MovieClip; // Necesitatea de a dimensiona automat etichetele noastre import flash.text.TextFieldAutoSize; // Evenimente import flash.events.TextEvent; importul flash.events.Event; // Aveți nevoie de stil pentru textul importului flash.text.TextFormat;
Adăugați clasa, extindeți MovieClip și configurați funcția Constructor. Adăugați următoarele la Main.as:
clasa publică Extensie principală MovieClip // Etichete public var nameLabel: Label; public var passwordLabel: Etichetă; public var commentsLabel: Etichetă; public var numCharsLabel: etichetă; public var styledLabel: Etichetă; // Introduceri de text public nume nameTI: TextInput; public var parolaTI: TextInput; / / Text Area public var comentariiTA: TextArea; public var styledTA: TextArea; // Numărul de caractere permise în zona de comentarii private var numChars: uint = 250; // Folosit pentru a modela zona de text var taFormat: TextFormat; // String pentru a fi folosit în textArea var theString: String; funcția publică Main () // Folosit pentru a configura setările noastre lablesLabels (); // S-a folosit pentru a configura textInputs setupTextInputs (); // Folosit pentru a configura TextFormat pentru TextArea setupFormat (); // Stabiliți setarea String-ului pe care îl folosim în TextArea setupString (); // Folosit pentru a seta = până zona de text setupTextAreas ();
Aici definim funcțiile utilizate în constructorul nostru. Iată ce vom face:
În setupTextInputs () funcția pe care o folosim restrânge proprietate pentru a restricționa caracterul pe care utilizatorul îl poate introduce. Din moment ce acesta este un nume propriu, restrângem utilizarea la litere și spații litere și minuscule (fără numere).
Prin utilizarea displayAsPassword, când utilizatorul introduce textul, intrarea va afișa asteriscuri (foarte asemănătoare cu ceea ce ați face în HTML).
Prin utilizarea MAXCHARS am setat un număr predefinit de caractere pe care utilizatorul le poate introduce; aici pot introduce până la 16 caractere.
TextFormat este un Obiect pe care îl vom trece la TextArea. Aici setăm culoarea, mărimea și setarea cursivei la adevărat.
Când am setat șirul pentru TextArea vom încorpora HTML, care va fi disponibil utilizând TextArea lui htmlText proprietate.
În setupTextAreas () funcția facem comentariile TextArea editabile astfel încât utilizatorul să le poată scrie; am setat, de asemenea, numărul maxim de caractere și setați cuvântul "wrap wrap" la adevărat, astfel încât cuvintele se vor înfășura la atingerea sfârșitului textului. Stabiliți htmlText egal cu șirul pe care l-am creat și configurați formatul textului. Codul HTML din șir suprascrie textFormat dar restul șirului moștenește ceea ce am introdus în Obiectul TextFormat.
Adăugați următoarele la Main.as
Accentsconagua
funcția privată setupLabels (): void // Configurarea textului pentru etichetele noastre nameLabel.text = "Introduceți numele propriu"; passwordLabel.text = "Introduceți parola"; commentsLabel.text = "Introduceți comentariile dvs."; // Aici vom arunca numChars la un șir deoarece proprietatea textului așteaptă un șir numCharsLabel.text = String (numChars) + "caractere rămase"; styledLabel.text = "O zonă de text"; // Folosim autosize astfel încât eticheta noastră să poată stoca întregul text nameLabel.autoSize = nameLabel.autoSize = TextFieldAutoSize.LEFT; parolaLabel.autoSize = parolaLabel.autoSize = TextFieldAutoSize.LEFT; commentsLabel.autoSize = commentsLabel.autoSize = TextFieldAutoSize.LEFT; numCharsLabel.autoSize = numCharsLabel.autoSize = TextFieldAutoSize.LEFT; styledLabel.autoSize = styledLabel.autoSize = TextFieldAutoSize.LEFT; funcția privată setupTextInputs (): void // Aici restrângem intrarea numai la literele mici a-z, majuscule A-z și spații nameTI.restrict = "a-zA-Z"; // Utilizați displayAsPassword pentru a face afișarea textului ca o parolă pentru câmpul de parolăTI.displayAsPassword = true; // Limitați numărul de caractere pe care utilizatorul le poate introduce de la majoritatea parolelor parolaTI.maxChars = 16; funcția privată setupFormat (): void // Aici am creat un obiect TextFormat care este folosit pentru a adăuga // stil la textArea taFormat = new TextFormat; taFormat.size = 16; taFormat.color = 0x0000FF; taFormat.italic = adevărat; funcția privată setupString (): void // Acesta este șirul care conține HTML care trecem la textArea theString = "Acest text este îndrăznețPutem schimba culoarea la "; theString + ="Și roșu folosind HTML "; theString + =" Restul acestui text este setat de textul Format "; funcția privată setupTextAreas (): void // Stabilirea textului pentru a fi editabil, pe care utilizatorul îl poate scrie commentTA.editable = true; // Setează numărul maxim de caractere pe care câmpul de text îl poate conține aici dorim comentarii // Pentru a avea 250 de caractere sau mai puține comentariiTA.maxChars = numChars; // Setează wrappingul cuvântului la adevărat, cuvintele se vor înfășura la atingerea sfârșitului // din textArea commentsTA.wordWrap = true; commentsTA.addEventListener (TextEvent.TEXT_INPUT, textEntered); styledTA.htmlText = theString; // Aici setăm formatul la textArea styledTA.setStyle ("textFormat", taFormat); textEntered () funcția este utilizată de către commentsTA eventsListener. Aici obținem numărul de caractere disponibile pentru tastare și actualizare
pentru a arăta câți au rămas.
Apoi închidem clasa și pachetul.
funcția privată textEntered (e: Event): void // Obține numărul de caractere avialabile rămase pentru a tasta var charsLeft: uint = numChars - e.target.length; // Aruncați charsLeft într-un șir și actualizați eticheta numCharsLabel.text = String (charsLeft) + "characters left"; // închideți clasa // închideți pachetul
Utilizarea textInputs și TextAreas este o modalitate excelentă de a permite utilizatorului să introducă text sau să afișeze textul în stil.
Veți observa în panoul parametrilor componentei componentelor pe care le puteți verifica și selecta anumite proprietăți.
Imaginea de mai sus este pentru componenta TextArea
condenseWhite: o valoare booleană care indică dacă spațiul suplimentar alb este eliminat din componenta care conține text HTMLeditabil: o valoare booleană care indică dacă câmpul de text poate fi editat de utilizatoractivat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatoruluihorizontalScrollPolicy: setează politica de derulare pentru bara orizontală de defilare. Aceasta poate fi una dintre următoarele valori: ScrollPolicy.ON: Bara de derulare orizontală este întotdeauna activă.ScrollPolicy.OFF: Bara de defilare este întotdeauna oprită.ScrollPolicy.AUTO: Bara de defilare se activează când este necesar.AUTO htmlText: textul care trebuie afișat de componenta Etichetă, inclusiv marcajul HTML care exprimă stilurile acelui textMAXCHARS: numărul maxim de caractere pe care un utilizator le poate introduce în câmpul text.restrânge: șirul de caractere acceptat de câmpul de text de la un utilizatortext: un șir care conține textul care este în componentă verticalScrollPolicy: politica de defilare pentru bara verticală de defilare. Aceasta poate fi una dintre următoarele valori: ScrollPolicy.ON: Bara de derulare este întotdeauna activă.ScrollPolicy.OFF: Bara de defilare este întotdeauna oprită.ScrollPolicy.AUTO: Bara de defilare se activează când este necesar.AUTO vizibil: o valoare booleană care indică dacă instanța componentei este vizibilăwordwrap: o valoare booleană care indică dacă textul se înfășoară la sfârșitul linieidisplayAsPassword: o valoare booleană care indică dacă instanța curentă a componentei TextInput a fost creată pentru a conține o parolă sau pentru a conține texteditabil: o valoare booleană care indică dacă câmpul de text poate fi editat de utilizatoractivat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatoruluiMAXCHARS: numărul maxim de caractere pe care un utilizator le poate introduce în câmpul text.restrânge: șirul de caractere acceptat de câmpul de text de la un utilizatortext: un șir care conține textul care este în componentă vizibil: o valoare booleană care indică dacă instanța componentei este vizibilăPentru a vedea proprietățile etichetei, asigurați-vă că verificați sfatul meu rapid rapid de pe etichete și butoane.
Fișierele de ajutor sunt un loc excelent pentru a afla mai multe despre proprietățile componentelor pe care le puteți seta în panoul parametrilor.
Vă mulțumim că ați citit și urmăriți pentru următoarea componență viitoare Quick Tip!
