Introducere rapidă Componente Flash NumericStepper, Slider și ProgressBar

Aceste trei componente se ocupă cu numerele din intervale. În acest sfat rapid vom analiza cum să le folosim.

Pasul numeric vă permite să setați un număr într-un anumit interval folosind tastatura sau făcând clic pe tastele săgeată; glisorul vă permite să trageți degetul mare pentru a alege un număr dintr-un interval într-o manieră mai grafică, iar bara de progres arată cât de departe într-un interval este un anumit număr.


previzualizare

În SWF previzualizare veți vedea două etichete, două butoane numerice, două butoane, un cerc albastru și un cursor. NumericSteppers sunt folosite pentru a seta o serie de numere de la care vom genera un număr aleatoriu de la. Când butonul este apăsat, eticheta se va schimba pentru a afișa numărul aleatoriu care a fost generat. Sliderul este folosit pentru a schimba dimensiunea cercului; tragerea glisorului dreapta mărește dimensiunea Cercului, în timp ce trageți Stânga scade dimensiunea Cercului.

Celălalt buton este folosit pentru a încărca un SWF; apăsați butonul și se adaugă o treaptă progresivă în scenă pentru a afișa Progresul de încărcare. Odată ce încărcătorul își încarcă conținutul, acesta este adăugat în scenă, iar Progressbar-ul este eliminat.


Pasul 1: Configurarea documentului

Deschideți un nou document Flash și setați următoarele proprietăți

  • Dimensiune document: 550 * 360
  • Culoare fundal: #FFFFFF

Pasul 2: Adăugați componente la scenă

Deschideți fereastra componentelor accesând Meniu> Fereastră> Componente sau apăsând CTRL + F7.

Trageți două butoane, două etichete, două pastere numerice și un cursor pe scenă.

În panoul Proprietăți dați prima etichetă numele de instanță "StepperLabel"

(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 19 și Y la 9.

Utilizând panoul Proprietăți:

  • Dați celei de-a doua etichete denumirea de instanță "sliderLabel" X: 19, Y: 140
  • Dă primul numericStepper numele de instanță "fromStepper" X: 19, Y: 144
  • Dați celui de-al doilea NumericStepper numele de instanță "toStepper" x: 130, Y: 44
  • Dați cursorului denumirea de instanță "glisor" X: 19, Y: 223
  • Dă primul buton numele de instanță "randomNumButton" X: 60, Y: 82
  • Dați celui de-al doilea buton numele de instanță "loaderButton

Desenați un cerc albastru cu instrumentul oval (deplasarea pentru deplasare se va trage pentru al face să fie conform cercului) și o convertiți la un clip video selectând-o, făcând clic dreapta și apoi selectând "Convert to Symbol". Dați-i un nume de instanță a "Cercului ".


Pasul 3: Pregătirea fișierului AS și importarea claselor

Creați un nou fișier ActionScript și dați-i numele Main.as

Vom declara produsele noastre in Main.as asa ca trebuie sa dezactivati ​​"instantele de declarare automata a stadiului". Beneficiul de a face acest lucru este că primiți cod de hinting pentru instanță.

Mergi la Meniu> Fișier> Publicați setările

Click pe Setări Alături de 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 // Componentele noastre Onstage import fl.controls.NumericStepper; import fl.controls.Slider; import fl.controls.ProgressBar; import fl.controls.Label; import fl.controls.Button; // Necesită extinderea clasei de import flash.display.MovieClip; // Necesar pentru a autosiza eticheta noastră Text import flash.text.TextFieldAutoSize; // Evenimentele de care avem nevoie în acest proiect import flash.events.MouseEvent; importul flash.events.Event; import fl.events.SliderEvent; import flash.events.ProgressEvent; // Trebuie să încărcați fișierul .swf import flash.net.URLRequest; import flash.display.Loader;

Pasul 4: Configurați clasa principală

Să adăugăm clasa, să extindem videoclipul și să setăm funcția constructorului nostru.

Adăugați următoarele la Main.as:

 public class Main Extinde MovieClip public var StepperLabel: Label; public var sliderLabel: Etichetă; public var fromStepper: NumericStepper; public var toStepper: NumericStepper; public var randomNumButton: Buton; public var loaderButton: buton; public var slider: Slider; public var progressBar: ProgressBar; public var theLoader: Loader; public var theCircle: Circle; funcția publică Main () setupLabels (); setupSteppers (); setupButtons (); setupSlider (); 

Pasul 5: Funcțiile principale ale constructorului

Aici definim funcțiile utilizate în constructorul nostru.

În setupLabels () funcția de bază facem niște setări de bază pe etichetele noastre prin utilizarea autosize astfel încât fiecare etichetă să fie redimensionată automat pentru a ține tot textul transmis acesteia.

În setupSteppers () funcția noastră stabilește proprietățile "minimale" și "maxime" ale stepperilor. Acestea sunt folosite pentru a restricționa numerele disponibile în pas cu pas. Nu folosim un ascultător de evenimente cu glisierele aici (deși poți folosi Event.CHANGE pentru ca glisoarele să detecteze când valoarea lor este modificată).

În setupButtons () adăugăm textul nostru în butoane prin intermediul eticheta proprietăți și să adăugați ascultători de evenimente la butoane.

În setupSliders () am setat minim și maxim pentru valorile glisantelor. snapInterval stabilește cât de mult se modifică valoarea glisorului când se trage; aici folosim .1. liveDragging este setat sa Adevărat astfel încât valoarea cursorului să fie disponibilă în timpul tragerii - dacă aceasta a fost setată la fals nu am fi putut să obținem valoarea până când utilizatorul nu a mai tras. În cele din urmă, adăugăm un ascultător la cursor.

Adăugați următoarele la Main.as:

 funcția privată setupLabels (): void StepperLabel.text = "Butonul de clic pentru un număr aleatoriu"; // Autosizează eticheta pentru a ține tot textul StepperLabel.autoSize = StepperLabel.autoSize = TextFieldAutoSize.LEFT; sliderLabel.text = "Glisați cursorul pentru a schimba dimensiunea cercului"; // Autosizează eticheta pentru a ține toate textul sliderLabel.autoSize = sliderLabel.autoSize = TextFieldAutoSize.LEFT;  funcția privată setupSteppers (): void // Valorile minime ale stepperilor dinStepper.minimum = 0; toStepper.minimum = 1; // Valori maxime ale stepperilor de la Stepspermaximum = 99; toStepper.maximum = 100; // Stabiliți valoarea de stepper aici dinStepper.value = 0; toStepper.value = 45;  funcția privată setupButtons (): void randomNumButton.label = "Faceți clic pe"; randomNumButton.addEventListener (MouseEvent.CLICK, getrandomNumer); loaderButton.label = "Încărcare Swf"; loaderButton.addEventListener (MouseEvent.CLICK, loadSwf);  funcția privată setupSlider (): void // Valori minime și maxime pentru cursorul slider.minimum = 1; slider.maximum = 3; // Setați cât de mult glisorul "crește" prin slider.snapInterval = .1; // liveDragging înseamnă că valoarea pascalilor este disponibilă în timp ce glisați // dacă este setată la false nu vom obține valoarea până când nu ne-am oprit trasând slider.liveDragging = true; slider.addEventListener (SliderEvent.CHANGE, scaleCircle); 

Pasul 6 Adăugați funcțiile aleatoare

Aici adăugăm funcțiile rămase.

În getrandomNumber () funcția numită o altă funcție, generateRandomNumber (), care este de la un tutorial aici pe Activetuts + de Carlos Yanez. Continuați și verificați acest tutorial pentru a vedea cum funcționează acest lucru!

scaleCircle () funcția primește valoarea cursorului și stabilește valoarea scaleX și scaleY din cercul MovieClip. scaleX și scaleY sunt folosite pentru a schimba dimensiunea (scara) clipului video.

loadSwf () funcția instalează un încărcător pe care îl folosim pentru a încărca un SWF extern. Apoi adăugăm un ascultător al evenimentului în Loader contentLoaderInfo; contentLoaderInfo deține informații despre încărcarea încărcătorului (aici, un SWF).

Apoi am creat o Bara de progres și adăugați-o pe scenă. Am setat Progressbar-ul sursă la
contentLoaderInfo a încărcătorului, și din moment ce contentInfoLoader deține informații despre încărcarea încărcătorului (inclusiv bytesLoaded și BYTESTOTAL) acesta este modul în care ProgressBar se poate actualiza pentru a reflecta cât de mult din SWF-ul a fost încărcat.

finishedLoading () funcția stabilește pozițiile x și y ale conținutului încărcătorului (adică SWF) și apoi îl adaugă în stadiu. În acest moment, am terminat cu ProgressBar, așa că îl scoatem din scenă.

Apoi închidem clasa și pachetul.

 funcția privată getrandomNumer (e: Event): void // Aici trecem în două numere (valorile stepperilor) generateRandomNumber (fromStepper.value, toStepper.value);  funcția privată generateRandomNumber (minNum: Număr, maxNum: Număr): void // Menține numărul generat var randomNumber = (Math.floor (Math.random () * (maxNum - minNum + 1)) + minNum); // Aici vom arunca numărul aleatoriu într-un șir, astfel încât să îl putem folosi în textul etichetelor StepperLabel.text = "Numărul dvs. aleatoriu este" + String (randomNumber);  private scale scaleCircle (e: Event): void // scaleX și scaleY crește sau diminuează dimensiunea MovieClip // aici folosim valoarea cursorului din "1-3" theCircle.scaleX = e.target.value; theCircle.scaleY = e.target.value;  funcția privată loadSwf (e: Event): void theLoader = new Loader (); theLoader.x = 319.00; theLoader.y = 31.00; theLoader.load (noua adresă URLRequest ("dummy.swf")); // Aici primim conținutul loaderuluiLoaderInfo care este ceea ce încărcătorul // se încarcă (aici a SWF) theLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, finishedLoading); progressBar = ProgressBar nou (); progressBar.x = 323; progressBar.y = 244; addChild (ProgressBar); // sursa barei de progres este setată la conținutul încărcătoruluiLoaderInfo // contentLoaderInfo conține informațiile despre octeții SWFLoaded / bytesTotal progressBar.source = theLoader.contentLoaderInfo;  funcția publică finalizatăLoading (e: Event): void // Aici setăm încărcătorul content.x și .y //I.E. swap-ul .x și .y theLoader.content.x = 290; theLoader.content.y = 20; // Adăugăm conținutul încărcătorilor I.E. swf addChild (Loader.content); // Deoarece încărcătorul este încărcat, nu mai avem nevoie de bara de progres // Deci îl eliminăm removeChild (progressBar);  // închideți clasa // închideți pachetul

Concluzie

Folosirea din nou a componentelor este o modalitate excelentă de a adăuga funcționalitatea filmelor dvs. Flash fără a trebui să le construiți de la zero

Veți observa în panoul Components Parameters al componentelor pe care le puteți verifica și selecta anumite proprietăți.

Imaginea de mai sus este pentru componenta NumericStepper

Proprietățile sunt după cum urmează pentru componenta NumericStepper:

  • activat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatorului
  • maxim: valoarea maximă în secvența valorilor numerice.
  • minim: valoarea minimă în secvența valorilor numerice.
  • mărimea pasului: număr nenul, care descrie unitatea de schimbare între valori.
  • valoare: valoarea curentă a componentei NumericStepper.
  • vizibil: o valoare booleană care indică dacă instanța componentei este vizibilă

Proprietățile pentru Slider sunt următoarele

  • direcţie: direcția cursorului. Valorile acceptabile sunt SliderDirection.HORIZONTAL și SliderDirection.VERTICAL.
  • activat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatorului
  • maxim: Valoarea maximă permisă pentru instanța componentei Slider.
  • minim: Valoarea minimă permisă pentru instanța componentei Slider.
  • snapInterval: creșterea cu care valoarea este mărită sau scăzută pe măsură ce utilizatorul mișcă degetul mare al glisorului.
  • tickInterval: distanța marcajelor față de valoarea maximă a componentei.
  • valoare: valoarea curentă a componentei Slider.
  • vizibil: o valoare booleană care indică dacă instanța componentei este vizibilă

Proprietățile ProgressBar sunt după cum urmează

  • direcţie: Indică direcția de umplere a barei de progres. O valoare de ProgressBarDirection.RIGHT indică faptul că bara de progres este umplută de la stânga la dreapta. O valoare de ProgressBarDirection.LEFT indică faptul că bara de progres este umplută de la dreapta la stânga.
  • activat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatorului
  • mod: Obține sau stabilește metoda care trebuie utilizată pentru a actualiza bara de progres. Următoarele valori sunt valabile pentru această proprietate: ProgressBarMode.EVENT, ProgressBarMode.POLLED, ProgressBarMode.MANUAL
  • sursă: o referință la conținutul încărcat și pentru care ProgressBar măsoară progresul operației de încărcare.
  • vizibil: o valoare booleană care indică dacă instanța componentei este vizibilă

Pentru a vedea proprietățile pentru etichete și butoane, asigurați-vă că verificați Sfat rapid pe etichete și butoane.

Fișierele de ajutor sunt, de asemenea, un loc excelent pentru a afla mai multe despre proprietățile componentelor pe care le puteți seta în panoul de parametri.

Vă mulțumim că ați citit și că aveți grijă să introduceți mai multe componente viitoare!

Cod