Share
Disse tre komponentene omhandler alle tall i rekkevidde. I denne Quick Tip ser vi på hvordan du bruker dem.
Den numeriske stepper lar deg sette et nummer innenfor et bestemt område ved hjelp av tastaturet eller ved å klikke på piltastene; skyvekontrollen lar deg dra en tommel for å velge et nummer fra en rekkevidde på en mer grafisk måte, og fremdriftslinjen viser hvor langt et område er et bestemt tall.
I forhåndsvisnings-SWF ser du to etiketter, to numeriske stappers, to knapper, en blå sirkel og en skyveknapp. NumericSteppers brukes til å angi en rekke tall som vi vil generere et tilfeldig tall fra. Når knappen klikkes, endres etiketten for å vise tilfeldig tall som ble generert. Slider brukes til å endre størrelsen på sirkelen; ved å dra skyveknappen til høyre øker sirkelens størrelse, mens du drar til venstre, reduseres sirkelens størrelse.
Den andre knappen brukes til å laste inn en SWF; trykk på knappen og en ProgressBar legges til scenen for å vise fremdriftsfremdriften. Når Loader laster innholdet, blir det lagt til scenen og ProgressBar er fjernet.
Åpne et nytt Flash-dokument og sett inn følgende egenskaper
Åpne komponentvinduet ved å gå til Meny> Vindu> Komponenter eller trykke CTRL + F7.
Dra to knapper, to etiketter, to numeriske steppere og en skyveknapp til scenen.
I Egenskaper-panelet gir den første etiketten forekomstnavnet "StepperLabel"
(Hvis Egenskaper-panelet ikke vises, gå til Meny> Vindu> Komponenter eller trykk CTRL + F3)
Sett etiketten X til 19 og dens Y til 9.
Bruke Egenskaper panelet:
Tegn en blå sirkel med det ovale verktøyet (hold skiftet vil dra for å gjøre det til en sirkel) og konvertere den til en MovieClip ved å velge den, høyreklikke og deretter velge "Konverter til symbol". Gi det et forekomstnavn på "theCircle".
Opprett en ny ActionScript-fil og gi den navnet Main.as
Vi vil deklarere komponentene våre i Main.as, så vi må slå av "auto deklarere scenevaner". Fordelen ved å gjøre dette er at du får koden hinting for forekomsten.
Gå til Meny> Fil> Publiser innstillinger
Klikk på innstillinger ved siden av Skript [ActionScript 3]
Fjern merket for "automatisk deklarere scenevaner"
I Main.as åpner pakkeerklæringen og importerer klassene vi skal bruke.
Legg til følgende på Main.as.
pakke // Våre Onstage-komponenter importerer fl.controls.NumericStepper; importere fl.controls.Slider; importere fl.controls.ProgressBar; importere fl.controls.Label; importere fl.controls.Button; // Trengs for å utvide klassen import flash.display.MovieClip; // Trenger du å autosize vår etiketts tekst import flash.text.TextFieldAutoSize; // Hendelsene vi trenger i dette prosjektet importerer flash.events.MouseEvent; importere flash.events.Event; importere fl.events.SliderEvent; importer flash.events.ProgressEvent; // Trengs for å laste .swf filen import flash.net.URLRequest; importer flash.display.Loader;
La oss legge til klassen, få den til å utvide filmklippet og sette opp konstruktørfunksjonen.
Legg til følgende på Main.as:
offentlig klasse Main utvider MovieClip public var StepperLabel: Etikett; offentlig var sliderLabel: Etikett; offentlig var fromStepper: NumericStepper; offentlig var toStepper: NumericStepper; offentlig var randomNumButton: Button; offentlig var loaderButton: Button; offentlig var skyvekontroll: Slider; offentlig var progressBar: ProgressBar; offentlig var theLoader: Loader; offentlig var theCircle: Circle; offentlig funksjon Main () setupLabels (); setupSteppers (); setupButtons (); setupSlider ();
Her definerer vi funksjonene som brukes i vår konstruktør.
I setupLabels () funksjon vi gjør noen grunnleggende oppsett på våre etiketter ved hjelp av Auto størrelse slik at hver etikett automatisk endres for å holde all tekst sendt til den.
I setupSteppers () funksjon vi setter opp våre steppers "minimum" og "maksimale" egenskaper. Disse brukes til å begrense tallene som er tilgjengelige i stepper. Vi bruker ikke en eventlytter med glidebryterne her (selv om du kan bruke Event.CHANGE for skyvekontrollene å oppdage når deres verdi er endret).
I setupButtons () Vi legger til vår tekst på knappene via merkelapp eiendom og legg til hendelseslyttere på knappene.
I setupSliders () vi satte minimum og maksimum for glidebryterens verdier. De snapInterval Angir hvor mye glidebryterens verdi endres når du drar her bruker vi .1. De liveDragging er satt til ekte slik at verdien av glidebryteren er tilgjengelig mens du drar - hvis dette ble satt til falsk vi ville ikke kunne få verdien til brukeren sluttet å dra. Til slutt legger vi til en lytter til glidebryteren.
Legg til følgende til Main.as:
private funksjon setupLabels (): void StepperLabel.text = "Klikk på knappen for et tilfeldig nummer"; // Autosizes etiketten for å holde hele teksten StepperLabel.autoSize = StepperLabel.autoSize = TextFieldAutoSize.LEFT; sliderLabel.text = "Dra skyveknappen for å endre sirkelstørrelse"; // Autosizes etiketten for å holde hele teksten sliderLabel.autoSize = sliderLabel.autoSize = TextFieldAutoSize.LEFT; privat funksjon setupSteppers (): void // Minumum verdier av steppers fromStepper.minimum = 0; toStepper.minimum = 1; // Maksimale verdier av steppers fromStepper.maximum = 99; toStepper.maximum = 100; // Sett steppersverdien her fraStepper.value = 0; toStepper.value = 45; privatfunksjon setupButtons (): void randomNumButton.label = "Click"; randomNumButton.addEventListener (MouseEvent.CLICK, getrandomNumer); loaderButton.label = "Last inn swf"; loaderButton.addEventListener (MouseEvent.CLICK, loadSwf); privat funksjon setupSlider (): void // Minimum og maksimumsverdier for skyvekontrollen slider.minimum = 1; slider.maximum = 3; // Dette angir hvor mye skyvekontrollen "øker" av slider.snapInterval = .1; // liveDragging betyr at steppersverdien er tilgjengelig mens du drar // hvis den er satt til feil, får vi ikke verdien til vi sluttet å dra slider.liveDragging = true; slider.addEventListener (SliderEvent.CHANGE, scaleCircle);
Her legger vi til de gjenværende funksjonene.
I getrandomNumber () funksjon vi kaller en annen funksjon, generateRandomNumber (), som er fra en opplæring her på Activetuts + av Carlos Yanez. Gå videre og sjekk ut den veiledningen for å se hvordan dette fungerer!
De scaleCircle () funksjonen får verdien av skyveknappen og setter scaleX og Scaley av sirkelen filmklipp. De scaleX og Scaley brukes til å endre størrelsen (skalaen) av filmklippet.
De loadSwf () funksjonen setter opp en Loader som vi bruker til å laste inn en ekstern SWF. Vi legger da til en hendelselytter til Loaderens contentLoaderInfo; de contentLoaderInfo holder informasjon om hva lasteren laster inn (her en SWF).
Vi setter opp en ProgressBar og legg det til scenen. Vi setter ProgressBar's kilde tilcontentLoaderInfo av lasteren, og siden contentInfoLoader inneholder informasjon om hva lasteren laster inn (inkludert bytesLoaded og bytesTotal) Dette er hvordan ProgressBar kan oppdatere seg selv for å gjenspeile hvor mye av SWF har lastet.
De finishedLoading () funksjonen setter x- og y-posisjonen til Loader-innholdet (dvs. SWF) og legger den deretter til scenen. På dette tidspunktet er vi ferdige med ProgressBar, så vi fjerner den fra scenen.
Så lukker vi ut klassen og pakken.
Accentsconagua
privat funksjon getrandomNumer (e: Event): void // Her passerer vi i to tall (steppers 'verdier) generateRandomNumber (fromStepper.value, toStepper.value); privat funksjon generateRandomNumber (minNum: Nummer, maxNum: Nummer): void // Holder det genererte nummeret var randomNumber = (Math.floor (Math.random () * (maxNum - minNum + 1)) + minNum); // Her slår vi tilfeldig nummer til en streng slik at vi kan bruke den i etikettteksten StepperLabel.text = "Ditt tilfeldige nummer er" + String (randomNumber); privatfunksjon skalaCircle (e: Event): void // scaleX og scaleY øke eller redusere en MovieClip størrelse // her bruker vi glidebryterens verdi fra "1-3" theCircle.scaleX = e.target.value; theCircle.scaleY = e.target.value; privat funksjon loadSwf (e: Event): void theLoader = new Loader (); theLoader.x = 319.00; theLoader.y = 31.00; theLoader.load (ny URLRequest ("dummy.swf")); // Her får vi lasterens contentLoaderInfo som er hva lasteren // laster inn (her en swf) theLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, finishedLoading); progressBar = ny ProgressBar (); progressBar.x = 323; progressBar.y = 244; addChild (progressbar); // Fremdriftslinjens kilde er satt til lasterens contentLoaderInfo // contentLoaderInfo holder informasjonen om SWFs bytesLoaded / bytesTotal progressBar.source = theLoader.contentLoaderInfo; Offentlig funksjon completedLoading (e: Event): void // Her setter vi loader content.x og .y //I.E. swf s .x og .y theLoader.content.x = 290; theLoader.content.y = 20; // Vi legger til lasterens innhold I.E. swf addChild (theLoader.content); // Siden det laster er ferdig laster vi ikke trenger fremdriftslinjen lenger // Så vi fjerner det fjerneChild (progressBar); // lukk ut klassen // lukk pakken Igjen ved hjelp av komponenter er det en fin måte å legge til funksjonalitet i dine Flash-filmer uten å måtte bygge dem fra bunnen av
Du vil legge merke til i komponentparameterepanelet på komponentene som du kan kontrollere og velge bestemte egenskaper.
Bildet ovenfor er for NumericStepper-komponenten
Egenskapene er som følger for NumericStepper-komponenten:
Egenskapene til Slider er som følger
SliderDirection.HORIZONTAL og SliderDirection.VERTICAL.Egenskapene til ProgressBar er som følger
ProgressBarDirection.RIGHT Indikerer at fremdriftslinjen er fylt fra venstre til høyre. En verdi på ProgressBarDirection.LEFT Indikerer at fremdriftslinjen er fylt fra høyre til venstre.ProgressBarMode.EVENT, ProgressBarMode.POLLED, ProgressBarMode.MANUAL For å se egenskapene for etikettene og knappene, må du sjekke Hurtigspissen på etiketter og knapper.
Hjelpefilene er også et flott sted å lære mer om komponentegenskapene du kan angi i parameterpanelet.
Takk for at du leser og se opp for mer kommende komponent introduksjoner!
