Share
Bine ați venit la o serie de lecții Quick Tip în care vom afla despre componentele din Flash Professional CS5. În tutorialul din această săptămână vom învăța despre componentele Button and Label.
În SWF veți vedea două butoane și două etichete. Când faceți clic pe butonul de sus, eticheta se va actualiza cu câte ori ați făcut clic pe buton. Butonul de jos acționează ca o comutare cu o stare pornită și oprită. Când faceți clic pe butonul din partea de jos, eticheta se modifică pentru a afișa dacă butonul este activat sau dezactivat.
Eticheta de jos permite diferite culori în același text. Acest lucru se realizează prin introducerea codului HTML în text (pe care îl vom acoperi și în acest tutorial).
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
Glisați două butoane și două etichete pe scenă.
În panoul Proprietăți dați primul buton denumirea instanței "basicButton". Dacă panoul Proprietăți nu se afișează, mergeți la Meniu> Fereastră> Componente sau apăsați CTRL + F3
Setați butonul X la 86.00 și Y la 107.00.
În panoul Proprietăți dați primei etichete numele de instanță "basicLabel".
Setați eticheta X la 239.00 și Y la 107.00
În panoul Proprietăți, dați celui de-al doilea buton denumirea instanței "toggleButton".
Setați butonul X la 86.00 și Y la 234.00
În panoul Properties, dați celei de-a doua etichete numele de instanță "htmlLabel".
Setați eticheta X la 239.00 și Y la 234.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. Faceți clic pe setările de lângă Script [Actionscript 3.0]
Debifați "Declare automat instanțe de scenă".
În Main.as Deschideți declarația de pachet și importați clasele pe care le vom folosi.
Adăugați următoarele la Main.as:
pachet import flash.display.MovieClip; import fl.controls.Button; import fl.controls.Label; // necesar pentru a dimensiona automat etichetele import flash.text.TextFieldAutoSize; importul flash.events.MouseEvent; importul flash.events.Event;
Adăugați declarația de clasă, extindeți-o MovieClip și a stabilit funcția constructorului nostru. Adăugați următoarele la Main.as:
public class Main extinde MovieClip // Aceasta este componenta noastra basicButton pe scena publica var basicButton: Button; // Aceasta este componenta noastră toggleButton pe scena publică var toggleButton: Button; // Aceasta este componenta noastră de bază de bază pe publicul de scenă var basicLabel: Label; // Aceasta este componenta noastră htmlLabel de pe scena publică var htmlLabel: Label; // folosit pentru a urmări de câte ori utilizatorul a făcut clic pe butonul var numClicks: Number = 0; funcția publică Main () // Folosit pentru a configura butoanele și a adăuga setupListeners setupButtons (); // Folosit pentru configurarea etichetelor setupLabels ();
Aici vom defini setupButton () și setupLabels () funcții.
În codul de mai jos folosim htmlText proprietatea etichetei; acest lucru ne permite să inserăm HTML în șirul de text. Trebuie remarcat faptul că Flash acceptă numai un set limitat de etichete HTML; consultați livedocs-ul pentru o listă de etichete HTML acceptate. Vom folosi pentru a modifica culoarea textului.
Adăugați următoarele la Main.as
funcția publică funcțiaButtons (): void // stabilește eticheta de pe butonul basicButton.label = "Click Me"; basicButton.addEventListener (MouseEvent.CLICK, basicButtonClick); toggleButton.label = "Activat"; // Noi folosim selectate aici pentru a pune butonul în starea lui "On" toggleButton.selected = true; // Folosit pentru a comuta butonul ... de fiecare dată când faceți clic pe butonul se transformă selectat la true / false toggleButton.toggle = true; // Proprietatea de comutare așteaptă o schimbare, deci aici folosim Event.CHANGE nu MouseEvent.CLICK toggleButton.addEventListener (Event.CHANGE, toggleButtonClick); funcția privată setupLabels (): void // Aceasta stabilește eticheta unde se mări în mod automat pentru a ține textul care îi este transmis basicLabel.autoSize = TextFieldAutoSize.LEFT; // Setează textul inițial al etichetei basicLabel.text = "Ați făcut clic pe butonul de 0 ori"; htmlLabel.autoSize = TextFieldAutoSize.LEFT; // Pentru a putea folosi blițurile acceptate de tagurile html, folosim htmlText-ul etichetei htmlLabel.htmlText = "Butonul este Pe";
Aici vom codifica ascultarea evenimentelor pe care am adăugat-o în Butoane. Adăugați următoarele la Main.as:
funcția privată basicButtonClick (e: Event): void // Creste numărul de apăsări ale utilizatorului numClicks ++; // Aici vom numC numClicks la un șir, deoarece textul așteaptă un șir basicLabel.text = "Ați făcut clic pe butonul" + String (numClicks) + "times"; funcția privată toggleButtonClick (e: Event): void // Dacă butonul este selectat, setăm htmlText-ul etichetei cu un verde "On"; // și schimbați eticheta cu butoane în "ON"; // Preferați să faceți ceva util aici ca să arătați un clip video dacă (e.target.selected == true) htmlLabel.htmlText = "Butonul este Pe"e.target.label =" ON "; // Face ceva util altceva // Dacă butonul nu este selectat, setăm htmlText al etichetei cu un roșu Off // și schimbăm butoanele Label în" OFF " ; // Preferați să faceți ceva util aici cum ar fi ascunderea unui clip video htmlLabel.htmlText = "Butonul este de pe"; e.target.label =" OFF "; // Face ceva util
Apoi, închideți declarațiile de clasă și pachet cu două bretele de încheiere curbate.
Folosirea componentelor Buton și Label este o modalitate simplă și rapidă de a avea butoane și etichete pe deplin funcționale, fără a fi nevoie să le construiți singuri.
Veți observa în panoul Component Parameters al componentelor pe care le puteți verifica și selecta anumite proprietăți.
Proprietăți ale componentelor butonului.
Accentsconagua
accentuat: o valoare booleană care indică dacă o margine este desenată în jurul componentei Buton când butonul este în starea în susactivat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatoruluieticheta: eticheta de text a componenteilabelPlacement: poziția etichetei în raport cu o pictogramă specificatăselectat: o valoare booleană care indică dacă un buton de comutare este comutat în poziția pornit sau opritcomutare: o valoare booleană care indică dacă un buton poate fi schimbatvizibil: o valoare booleană care indică dacă instanța componentei este vizibilăautosize: indică modul în care o etichetă este dimensionată și aliniată pentru a se potrivi cu valoarea proprietății textului acesteiacondenseWhite: o valoare booleană care indică dacă spațiul suplimentar alb, cum ar fi spațiile și rupturile de linii, ar trebui să fie eliminat dintr-o componentă de etichetă care conține text HTMLactivat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatoruluihtmlText: textul care trebuie afișat de componenta Etichetă, inclusiv marcajul HTML care exprimă stilurile acelui textselectabil: o valoare booleană care indică dacă textul poate fi selectattext: textul simplu care va fi afișat de componenta Etichetă.vizibil: o valoare booleană care indică dacă instanța componentei este vizibilăwordwrap: o valoare booleană care indică dacă eticheta acceptă înfășurarea cuvântuluiFișierele de ajutor sunt un loc minunat pentru a afla mai multe despre proprietățile componentelor pe care le puteți seta în panoul Component Parameters. Iată paginile livedocs pentru buton și pentru etichetă.
Vă mulțumim pentru lectură și urmăriți-vă pentru mai multe componente viitoare Quick Tips!
