Share
În această introducere rapidă la componentele profesionale Flash, vom examina UILoader și bara UIScroll.
Uitați-vă la previzualizare. În SWF, pe partea stângă există o componentă UILoader care este invizibilă la prima vedere (pentru că nu există nimic în ea); vom încărca o imagine în acest sens.
Sub UILoader există o etichetă cu textul "Image Not Loaded"; după încărcarea cu succes a imaginii vom modifica textul acestei etichete pentru a citi "Imaginea încărcată".
Butonul de sub etichetă este utilizat pentru a începe încărcarea imaginii. În partea dreaptă există un câmp de text și o bară UIScroll care sunt inițial invizibile (câmpul de text este invizibil deoarece nu există nimic în el); la apăsarea butonului cu eticheta "Load Text", încărcăm textul dintr-un fișier text exemplu și setăm bara UIScroll să fie vizibilă.
Deschideți un nou document Flash și setați următoarele proprietăți:
Deschideți fereastra componentelor accesând Meniu> Fereastră> Componente sau apăsând CTRL + F7.
Glisați un UILoader, o etichetă, două butoane și o bară UIScroll pe scenă.
În panoul Proprietăți dați UILoader numele instanței "imageLoader". Dacă nu apare panoul Proprietăți Meniu> Fereastră> Proprietăți sau apăsați CTRL + F3.
Setați poziția X a UILoader la 37 și Y la 20
Dați etichetei numele de instanță "loadedLabel". Setați eticheta X la 37 și Y la 182.
Dați primul buton numele de instanță "loadImageButton" și setați eticheta X la 37, Y la 213.
În panoul Instrumente, selectați instrumentul Text și trageți un TextField pe scenă. Dacă nu se afișează panoul Instrumente Meniu> Fereastră> Instrumente sau apăsați CTRL + F2.
Dați TextField numele de instanță "loremText". Setați TextField X la 272 și Y la 15, apoi setați lățimea la 243, înălțimea sa la 101.
Dați barei UIScroll numele de instanță "textScroller". Setați bara UIScroll X la 525.00 și Y la 15
Dați celui de-al doilea buton numele de instanță "loadTextButton" și setați X la 272, Y la 213.
Componenta UILoader este un container care poate afișa fișierele SWF, JPEG, JPEG progresive, PNG și GIF. Puteți încărca aceste active la timpul de execuție și, opțional, puteți monitoriza progresul încărcării. Pentru a vedea cum se poate face acest lucru, verificați tutorialul meu pe componenta ProgressBar (conceptele sunt aceleași) și aplicați la UILoader așa cum am făcut cu Loader-ul din acel tutorial.
Bara UIScroll vă permite să adăugați o bară de derulare la un textField. Când aveți un bloc lung de text, componenta UIScrollbar vă permite să derulați fără să aveți un TextField foarte mare pentru a vă potrivi întregului text. Această componentă este foarte ușor de folosit prin faptul că puteți să-l aruncați într-un TextField și acesta va fi "conectat" automat la acel TextField. Aici vă voi arăta cum să faceți acest lucru în ActionScript.
Creați un nou fișier ActionScript și dați-i numele Main.as.
Vom declara componentele noastre în Main.as astfel încât trebuie să dezactivați "instanțele instanței de declarare automată"; avantajul de a face acest lucru este că obțineți cod de hinting pentru instanță atunci când se utilizează editorul de cod Flash. Pentru a face acest lucru du-te la Meniu> Fișier> Publicați setările și faceți clic pe Setări, de lângă Script [Actionscript 3.0].
Debifați "Declare automat instanțe de scenă".
Î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 // Vom extinde clasa importului MovieClip flash.display.MovieClip; // Importul componentelor pe care le vom folosi la import fl.containers.UILoader; import fl.controls.Button; import fl.controls.Label; import fl.controls.UIScrollbar; // Necesar pentru manipularea evenimentului nostru flash.events.MouseEvent; importul flash.events.Event; // Aveți nevoie de imagini încărcate și importați text flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField;
Adăugați clasa, extindeți videoclipul și configurați funcția Constructor.
Aici afirmăm variabilele noastre și numim funcțiile noastre în Principal() constructor. Adăugați următoarele la Main.as:
public class Main extinde MovieClip // Componentele noastre pe scena publice var loadImageButton: Button; public var loadTextButton: Buton; public var încărcatLabel: etichetă; public var loremText: TextField; public var imagineLoader: UILoader; public var textScroller: UIScrollbar; // Folosit pentru a încărca textul în TextField public var textLoader: URLLoader; funcția publică principală () setupButtonsAndLabels (); setupTextField (); setupScrollBar ();
Aici vom defini funcțiile utilizate în constructorul nostru. În setupButtonAndLabels () funcția pe care am stabilit-o eticheta de proprietate și de a adăuga ascultători de evenimente care să fie declanșați atunci când utilizatorul face clic pe buton.
În setupTextField () funcția setată este câmpul de text wordwrap proprietate la Adevărat astfel încât textul se va înfășura la linia următoare atunci când ajunge la marginea din dreapta a textului.
În setupScrollBar () am stabilit direcția bara UIScroll la "vertical" (aceasta poate fi "verticală" sau "orizontală") și, din moment ce nu vrem să fie vizibil când începe primul film, vizibil proprietate la fals.
Adăugați următoarele la Main.as:
funcția privată setupButtonsAndLabels (): void // Setează butoanele Label (Textul afișat pe buton) loadImageButton.label = "Încarcă imaginea"; loadImageButton.addEventListener (MouseEvent.CLICK, loadImage); // Setează butoanele Etichetă (Textul afișat pe Buton) loadTextButton.label = "Încărcare Text"; loadTextButton.addEventListener (MouseEvent.CLICK, loadText); // Setează textul etichetelor încărcateLabel.text = "Imaginea nu este încărcată"; funcția privată setupTextField (): void // Linile se vor înfășura când ajung la sfârșitul (partea dreaptă) a textului loremText.wordWrap = true; funcția privată setupScrollBar (): void // Setează direcția de defilare a barei; poate fi "vertical" sau "orizontal" textScroller.direction = "vertical"; textScroller.visible = false;
Aici vom codifica ascultătorii evenimentului pe care i-am adăugat la butoane și apoi vom închide clasa și pachetul.
În loadImage () funcția pe care am stabilit-o scaleContent din imageLoader la fals (dacă ar fi Adevărat imaginea se va diminua până la mărimea imaginii UILoader), așa cum dorim ca imaginea să fie dimensiunea normală. Apoi, încărcăm imaginea și adăugăm un ascultător de evenimente care să fie declanșat când imaginea a terminat încărcarea.
În loadText () ne-am înființat URLLoader și încărcați fișierul text. Aici, de asemenea, am creat un ascultător care să fie declanșat când textul sa terminat de încărcat.
În imageLoaded () am setat textul etichetei la "Image Loaded" - un exemplu simplu, dar ați putea face ceva mai puțin banal într-o aplicație "reală".
În textLoaded () funcția de setare a textului câmpului de text lae.target.data), care va fi textul din fișierul text. Apoi am setat UIScrollbar să fie vizibil și setat scrollTarget (câmpul de text pe care dorim să îl controleze).
Accentsconagua
funcția privată loadImage (e: MouseEvent): void // Dacă ar fi setat la true imaginea va fi redusă la dimensiunea UILoader // Aici setăm la false astfel încât UILoader respectă dimensiunea reală a imaginii imageLoader.scaleContent = false; // Încarcă imaginea și declanșează o funcție când încărcarea este completă imageLoader.load (noua adresă URLRequest ("theimage.jpg")); imageLoader.addEventListener (Event.COMPLETE, imageLoaded); funcția privată loadText (e: MouseEvent): void // Încarcă fișierul nostru text și declanșează o funcție când încărcarea este completă textLoader = new URLLoader (); textLoader.load (nou URLRequest ("lorem.txt")); textLoader.addEventListener (Event.COMPLETE, textLoaded); funcția privată imageLoaded (e: Event): void // Setează textul pe etichetă încărcatăLabel.text = "Imagine încărcată"; funcția privată textLoaded (e: Event): void // Setează TextField la datele despre încărcătoare (textul din fișierul text) loremText.text = e.target.data; textScroller.visible = true; textScroller.scrollTarget = loremText; // închideți clasa închideți pachetul Rețineți că, la final, închidem clasa și pachetul.
Veți observa în Componente Parametri panou al componentelor pe care le puteți verifica și selecta anumite proprietăți.
Imaginea de mai sus este pentru componenta UILoader.
Proprietățile componentei UILoader sunt următoarele:
Proprietățile pentru bara UIScroll sunt
Fișierele de ajutor sunt un loc minunat pentru a afla mai multe despre aceste proprietăți.
Pentru a afla mai multe despre proprietățile pentru etichete și butoane, asigurați-vă că verificați introducerea rapidă a componentelor butonului și etichetei.
Vă mulțumim pentru lectură!
