Share
Deze drie componenten hebben allemaal te maken met getallen in reeksen. In deze Snelle tip zullen we kijken hoe ze te gebruiken.
Met de numerieke stepper kunt u een nummer binnen een bepaald bereik instellen met behulp van het toetsenbord of door op de pijltoetsen te klikken; Met de schuifregelaar kun je een duim slepen om een nummer uit een bereik op een meer grafische manier te kiezen, en de voortgangsbalk laat zien hoe ver je door een bereik een bepaald getal bent.
In de preview-SWF ziet u twee labels, twee NumericSteppers, twee knoppen, een blauwe cirkel en een schuifregelaar. De NumeriekeSteppers worden gebruikt om een reeks nummers in te stellen waaruit we een willekeurig getal genereren. Wanneer op de knop wordt geklikt, verandert het label om het willekeurig gegenereerde nummer weer te geven. De schuifregelaar wordt gebruikt om de grootte van de cirkel te wijzigen; door de schuifregelaar naar rechts te slepen, wordt de cirkel groter, terwijl met Links slepen de cirkel kleiner wordt.
De andere knop wordt gebruikt om een SWF te laden; druk op de knop en een ProgressBar wordt aan het podium toegevoegd om de laadvoortgang te tonen. Nadat de Loader zijn inhoud heeft geladen, wordt deze aan het werkgebied toegevoegd en wordt de ProgressBar verwijderd.
Open een nieuw Flash-document en stel de volgende eigenschappen in
Open het componentenvenster door naar Menu> Venster> Componenten te gaan of op CTRL + F7 te drukken.
Sleep twee knoppen, twee labels, twee numerieke stappen en een schuifregelaar naar het werkgebied.
Geef in het paneel Properties het eerste label de instantienaam 'StepperLabel'
(Als het eigenschappenvenster niet wordt weergegeven, gaat u naar Menu> Venster> Onderdelen of drukt u op CTRL + F3)
Stel de X van het label in op 19 en de Y op 9.
Het paneel Eigenschappen gebruiken:
Teken een blauwe cirkel met het ovale gereedschap (houd shift ingedrukt om het in overeenstemming te brengen met een cirkel) en converteer het naar een MovieClip door het te selecteren, klik met de rechtermuisknop en kies vervolgens "Converteren naar symbool". Geef het een instantienaam van "theCircle".
Maak een nieuw ActionScript-bestand en geef het de naam Main.as
We zullen onze componenten in Main.as aangeven, dus we moeten "auto declare stage instances" uitschakelen. Het voordeel hiervan is dat u codehints voor de instantie krijgt.
Ga naar Menu> Bestand> Publicatie-instellingen
Klik op instellingen naast het Script [ActionScript 3]
Verwijder het vinkje bij "automatisch declareren van stage-instanties"
In Main.as open de pakketverklaring en importeer de klassen die we zullen gebruiken.
Voeg het volgende toe aan Main.as.
package // Onze Onstage-componenten importeren fl.controls.NumericStepper; import fl.controls.Slider; import fl.controls.ProgressBar; import fl.controls.Label; import fl.controls.Button; // Nodig om de Class-import flash.display.MovieClip uit te breiden; // Nodig om onze Label's Text import flash.text.TextFieldAutoSize autosize; // De evenementen die we in dit project nodig hebben, importeren flash.events.MouseEvent; import flash.events.Event; import fl.events.SliderEvent; import flash.events.ProgressEvent; // Nodig om het .swf-bestand te laden import flash.net.URLRequest; import flash.display.Loader;
Laten we de klasse toevoegen, de filmclip uitbreiden en onze constructorfunctie instellen.
Voeg het volgende toe aan Main.as:
public class Main breidt MovieClip uit public var StepperLabel: Label; public var sliderLabel: Label; public var fromStepper: NumericStepper; public var toStepper: NumericStepper; public var randomNumButton: Button; public var loaderButton: Button; public var slider: Slider; public var progressBar: ProgressBar; public var theLoader: Loader; public var theCircle: Circle; public function Main () setupLabels (); setupSteppers (); setupButtons (); setupSlider ();
Hier definiëren we de functies die worden gebruikt in onze constructor.
In setupLabels () functie doen we wat basisinstellingen op onze etiketten door te gebruiken automatische grootte zodat elk label automatisch de grootte aanpast om alle tekst die eraan is doorgegeven te bevatten.
In setupSteppers () functie stellen we de "minimum" en "maximum" eigenschappen van onze steppers in. Deze worden gebruikt om de beschikbare nummers in de stepper te beperken. We gebruiken hier geen eventlistener met de schuifregelaars (hoewel je die wel kunt gebruiken Event.CHANGE voor de schuifregelaars om te detecteren wanneer hun waarde is gewijzigd).
In setupButtons () we voegen onze tekst toe aan de knoppen via de label eigenschappen en voeg gebeurtenislisteners toe aan de knoppen.
In setupSliders () we hebben de minimum en maximum voor de waarden van de schuifregelaars. De snapInterval bepaalt hoeveel de waarde van de schuifregelaar verandert tijdens het slepen; hier gebruiken we .1. De liveDragging ingesteld op waar zodat de waarde van de schuifbalk tijdens het slepen beschikbaar is - als deze was ingesteld op vals we zouden de waarde pas kunnen krijgen als de gebruiker niet meer sleept. Ten slotte voegen we een luisteraar toe aan de schuifregelaar.
Voeg het volgende toe aan Main.as:
private function setupLabels (): void StepperLabel.text = "Click Button For A Random Number"; // Autosizes het label om alle tekst te behouden StepperLabel.autoSize = StepperLabel.autoSize = TextFieldAutoSize.LEFT; sliderLabel.text = "Sleep schuifregelaar om cirkelgrootte te wijzigen"; // Autosizes het label om alle tekst te behouden sliderLabel.autoSize = sliderLabel.autoSize = TextFieldAutoSize.LEFT; private function setupSteppers (): void // Minumum-waarden van de steppers fromStepper.minimum = 0; toStepper.minimum = 1; // Maximumwaarden van de steppers fromStepper.maximum = 99; toStepper.maximum = 100; // Stel de waarde van de stepper hier in vanaf Stepper.value = 0; toStepper.value = 45; private function setup Knoppen (): void randomNumButton.label = "Click"; randomNumButton.addEventListener (MouseEvent.CLICK, getrandomNumer); loaderButton.label = "Load Swf"; loaderButton.addEventListener (MouseEvent.CLICK, loadSwf); private function setupSlider (): void // Minimale en maximale waarden voor de schuifregelaar slider.minimum = 1; slider.maximum = 3; // Dit stelt in hoeveel de schuifregelaar "vergroot" door slider.snapInterval = .1; // LiveDragging betekent dat de waarde van de stepper beschikbaar is tijdens het slepen van // als deze is ingesteld op 'false' krijgen we de waarde niet totdat we niet meer slepen met slider.liveDragging = true; slider.addEventListener (SliderEvent.CHANGE, scaleCircle);
Hier voegen we de resterende functies toe.
In de getrandomNumber () functie noemen we een andere functie, generateRandomNumber (), dat is van een tutorial hier op Activetuts + door Carlos Yanez. Ga je gang en bekijk die tutorial om te zien hoe dit werkt!
De scaleCircle () functie krijgt de waarde van de schuifregelaar en stelt de scaleX en scaleY van de de cirkel filmclip. De scaleX en scaleY worden gebruikt om de grootte (schaal) van de filmclip te wijzigen.
De loadSwf () functie stelt een Loader in die we gebruiken om een externe SWF te laden. Vervolgens voegen we een gebeurtenislistener toe aan de Loader's contentLoaderInfo; de contentLoaderInfo bevat informatie over wat de loader laadt (hier een SWF).
Vervolgens hebben we een Voortgangsbalk en voeg het toe aan het podium. We hebben de ProgressBar's ingesteld bron naar decontentLoaderInfo van de lader, en sinds de contentInfoLoader bevat informatie over wat de loader laadt (inclusief de bytesLoaded en bytesTotal) Dit is hoe de ProgressBar zichzelf kan bijwerken om weer te geven hoeveel van de SWF is geladen.
De finishedLoading () functie stelt de x- en y-positie in van de inhoud van de Loader (dat wil zeggen de SWF) en voegt deze vervolgens aan de fase toe. Op dit punt zijn we klaar met de ProgressBar, dus we verwijderen het van het podium.
Dan sluiten we de klas en het pakket af.
Accentsconagua
private function getrandomNumer (e: Event): void // Hier geven we twee getallen door (de waarden van de steppers) genererenRandomNumber (fromStepper.value, toStepper.value); private function generateRandomNumber (minNum: Number, maxNum: Number): void // Houdt het gegenereerde getal var randomNumber = (Math.rand (Math.random () * (maxNum - minNum + 1)) + minNum); // Hier plaatsen we een willekeurig getal in een string, zodat we het in de labeltekst kunnen gebruiken. StepperLabel.text = "Je willekeurige nummer is" + String (randomNumber); private function scaleCircle (e: Event): void // scaleX and scaleY verhogen of verlagen de grootte van een MovieClip // hier gebruiken we de waarde van de schuifregelaar van "1-3" theCircle.scaleX = e.target.value; theCircle.scaleY = e.target.value; private function loadSwf (e: Event): void theLoader = new Loader (); theLoader.x = 319.00; theLoader.y = 31.00; theLoader.load (nieuwe URLRequest ("dummy.swf")); // Hier krijgen we de loaderLoaderInfo van de loader, wat de loader // is (hier een swf) theLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, finishedLoading); progressBar = nieuwe ProgressBar (); progressBar.x = 323; progressBar.y = 244; addChild (progressbar); // De bron van de voortgangsbalk is ingesteld op de inhoud van de loaderLoaderInfo // contentLoaderInfo bevat de informatie over de bytesLoaded / bytesTotal van the SWF progressBar.source = theLoader.contentLoaderInfo; public function finishedLoading (e: Event): void // Hier stellen we de loader content.x en .y //I.E in. de .x en .y theLoader.content.x = 290 van de swf's; theLoader.content.y = 20; // We voegen de inhoud van de laaders toe I.E. het swf-addChild (theLoader.content); // Aangezien het laadprogramma klaar is met laden hebben we de voortgangsbalk niet meer nodig // Dus we verwijderen het removeChild (progressBar); // sluit de klas af // sluit het pakket af Opnieuw gebruik van componenten is een geweldige manier om functionaliteit toe te voegen aan je Flash-films zonder ze helemaal opnieuw te hoeven bouwen
U zult opmerken in het paneel Componentenparameters van de componenten die u kunt controleren en bepaalde eigenschappen kunt selecteren.
De bovenstaande afbeelding is voor de component NumericStepper
De eigenschappen zijn als volgt voor de component NumericStepper:
De eigenschappen voor de schuifregelaar zijn als volgt
SliderDirection.HORIZONTAL en SliderDirection.VERTICAL.De eigenschappen voor de ProgressBar zijn als volgt
ProgressBarDirection.RIGHT geeft aan dat de voortgangsbalk van links naar rechts is gevuld. Een waarde van ProgressBarDirection.LEFT geeft aan dat de voortgangsbalk van rechts naar links is gevuld.ProgressBarMode.EVENT, ProgressBarMode.POLLED, ProgressBarMode.MANUAL Als u de eigenschappen van de labels en knoppen wilt bekijken, moet u de Quick Tip op labels en knoppen bekijken.
De helpbestanden zijn ook een geweldige plek om meer te weten te komen over de componenteigenschappen die u in het parameterpaneel kunt instellen.
Bedankt voor het lezen en kijk uit voor meer komende introducties van onderdelen!
