Diese drei Komponenten befassen sich alle mit Zahlen in Bereichen. In diesem Schnelltipp erfahren Sie, wie Sie diese verwenden.
Mit dem numerischen Stepper können Sie eine Zahl innerhalb eines bestimmten Bereichs mithilfe der Tastatur oder durch Klicken auf die Pfeiltasten festlegen. Mit dem Schieberegler können Sie einen Daumen ziehen, um eine Zahl grafischer aus einem Bereich auszuwählen. Die Fortschrittsleiste zeigt an, wie weit eine bestimmte Zahl durch einen Bereich verläuft.
In der Vorschau-SWF-Datei werden zwei Labels, zwei NumericSteppers, zwei Buttons, ein blauer Kreis und ein Slider angezeigt. Die NumericSteppers werden verwendet, um einen Zahlenbereich festzulegen, aus dem eine Zufallszahl generiert wird. Wenn Sie auf die Schaltfläche klicken, ändert sich das Label, um die erzeugte Zufallszahl anzuzeigen. Mit dem Schieberegler können Sie die Größe des Kreises ändern. Durch Ziehen des Schiebereglers nach rechts wird die Größe des Kreises erhöht, durch Ziehen nach links wird die Größe des Kreises verringert.
Mit der anderen Schaltfläche wird eine SWF-Datei geladen. Drücken Sie die Taste, um der Bühne eine Fortschrittsleiste hinzuzufügen, die den Ladevorgang anzeigt. Nachdem der Loader seinen Inhalt geladen hat, wird er der Bühne hinzugefügt und die Fortschrittsleiste entfernt.
Öffnen Sie ein neues Flash-Dokument und legen Sie die folgenden Eigenschaften fest
Öffnen Sie das Komponentenfenster, indem Sie Menü> Fenster> Komponenten wählen oder STRG + F7 drücken.
Ziehen Sie zwei Buttons, zwei Labels, zwei numerische Schritte und einen Slider auf die Bühne.
Geben Sie im Eigenschaftenfenster der ersten Beschriftung den Instanznamen "StepperLabel" an.
(Wenn das Eigenschaftenfenster nicht angezeigt wird, wählen Sie Menü> Fenster> Komponenten oder drücken Sie STRG + F3.)
Setzen Sie X des Labels auf 19 und Y auf 9.
Verwenden des Eigenschaftenbedienfelds:
Zeichnen Sie mit dem ovalen Werkzeug einen blauen Kreis (bei gedrückter Umschalttaste wird ein Kreis angezeigt), und konvertieren Sie ihn in einen MovieClip, indem Sie ihn auswählen, mit der rechten Maustaste klicken und dann "In Symbol konvertieren" wählen. Vergeben Sie einen Instanznamen "theCircle"..
Erstellen Sie eine neue ActionScript-Datei, und geben Sie ihr den Namen Main.as
Wir werden unsere Komponenten in Main.as deklarieren, so dass "Bühneninstanzen automatisch deklarieren" deaktiviert werden müssen. Der Vorteil dabei ist, dass Sie Code-Hinweise für die Instanz erhalten.
Gehe zu Menü> Datei> Veröffentlichungseinstellungen
Klicke auf die Einstellungen neben dem Skript [ActionScript 3]
Deaktivieren Sie "Bühneninstanzen automatisch deklarieren".
Öffnen Sie in Main die Paketdeklaration und importieren Sie die Klassen, die wir verwenden werden.
Fügen Sie dem Main.as Folgendes hinzu.
package // Unsere Onstage-Komponenten importieren fl.controls.NumericStepper; import fl.controls.Slider; import fl.controls.ProgressBar; import fl.controls.Label; import fl.controls.Button; // zur Erweiterung der Klasse erforderlich import flash.display.MovieClip; // Für die automatische Größenänderung des Texts unserer Beschriftung erforderlich. Import flash.text.TextFieldAutoSize; // Die Ereignisse, die wir in diesem Projekt benötigen werden import flash.events.MouseEvent; import flash.events.Event; import fl.events.SliderEvent; import flash.events.ProgressEvent; // Zum Laden der .swf-Datei erforderlich. Import flash.net.URLRequest; import flash.display.Loader;
Fügen Sie die Klasse hinzu, erweitern Sie den Movieclip und richten Sie unsere Konstruktorfunktion ein.
Fügen Sie der Main.as Folgendes hinzu:
public class Main erweitert MovieClip public var StepperLabel: Label; public var sliderLabel: Label; public var fromStepper: NumericStepper; public var toStepper: NumericStepper; public var randomNumButton: Schaltfläche; public var loaderButton: Schaltfläche; öffentlicher Var-Schieberegler: Schieberegler; public var progressBar: Fortschrittsleiste; public var theLoader: Lader; public var theCircle: Kreis; öffentliche Funktion Main () setupLabels (); setupSteppers (); setupButtons (); setupSlider ();
Hier definieren wir die Funktionen, die in unserem Konstruktor verwendet werden.
Im setupLabels ()
Funktion Wir nehmen einige grundlegende Einstellungen für unsere Labels vor automatische Größenanpassung
so dass jedes Label automatisch die Größe ändert, um den gesamten übergebenen Text zu speichern.
Im setupSteppers () Funktion setzen wir die "Minimum" - und "Maximum" -Eigenschaften unserer Stepper. Diese werden verwendet, um die im Stepper verfügbaren Zahlen einzuschränken. Wir verwenden hier keinen Ereignis-Listener mit den Schiebereglern (obwohl Sie dies verwenden können.) Event.CHANGE
für die Schieberegler, um festzustellen, wann sich ihr Wert ändert).
Im setupButtons ()
Wir fügen unseren Text über das Symbol den Schaltflächen hinzu Etikette
Eigenschaft und fügen Sie den Schaltflächen Ereignis-Listener hinzu.
Im setupSliders ()
wir setzen die Minimum
und maximal
für die Werte der Schieberegler. Das snapInterval
legt fest, wie stark sich der Wert des Schiebereglers beim Ziehen ändert; hier verwenden wir .1. Das liveDragging
ist eingestellt auf wahr
so dass der Wert des Schiebereglers beim Ziehen verfügbar ist - wenn dies auf festgelegt wurde falsch
Wir können den Wert erst abrufen, wenn der Benutzer das Ziehen beendet hat. Schließlich fügen wir dem Schieberegler einen Listener hinzu.
Fügen Sie Folgendes zu Main.as hinzu:
private Funktion setupLabels (): void StepperLabel.text = "Klicken Sie auf die Schaltfläche für eine Zufallszahl"; // Die Größe der Beschriftung wird automatisch geändert, um den gesamten Text zu enthalten. StepperLabel.autoSize = StepperLabel.autoSize = TextFieldAutoSize.LEFT; sliderLabel.text = "Schieberegler ziehen, um die Kreisgröße zu ändern"; // Die Größe der Beschriftung wird automatisch geändert, um den gesamten Text aufzunehmen sliderLabel.autoSize = sliderLabel.autoSize = TextFieldAutoSize.LEFT; private Funktion setupSteppers (): void // Mindestwerte der Stepper fromStepper.minimum = 0; toStepper.minimum = 1; // Maximalwerte der Stepper fromStepper.maximum = 99; toStepper.maximum = 100; // Setze hier den Stepper-Wert fromStepper.value = 0; toStepper.value = 45; private Funktion setupButtons (): void randomNumButton.label = "Click"; randomNumButton.addEventListener (MouseEvent.CLICK, getrandomNumer); loaderButton.label = "Load Swf"; loaderButton.addEventListener (MouseEvent.CLICK, loadSwf); private function setupSlider (): void // Minimale und maximale Werte für den Slider slider.minimum = 1; slider.maximum = 3; // Dies legt fest, um wie viel der Slider um slider.snapInterval = .1 "erhöht" wird. // liveDragging bedeutet, dass der Stepper-Wert beim Ziehen verfügbar ist // Wenn False auf false gesetzt ist, wird der Wert nicht abgerufen, bis wir nicht mehr mit dem Ziehen von slider.liveDragging = true; slider.addEventListener (SliderEvent.CHANGE, scaleCircle);
Hier fügen wir die restlichen Funktionen hinzu.
In dem getrandomNumber ()
Funktion nennen wir eine andere Funktion, generateRandomNumber ()
, Das ist aus einem Tutorial hier auf Activetuts + von Carlos Yanez. Sehen Sie sich dieses Tutorial an, um zu sehen, wie das funktioniert!
Das scaleCircle ()
Funktion ruft den Wert des Schiebereglers ab und legt den Wert fest scaleX
und scaleY
des Der Kreis
Filmausschnitt. Das scaleX
und scaleY
werden verwendet, um die Größe (Skala) des Movieclips zu ändern.
Das loadSwf ()
Mit der Funktion wird ein Loader eingerichtet, mit dem eine externe SWF-Datei geladen wird. Dann fügen wir dem Loader einen Ereignis-Listener hinzu contentLoaderInfo
; das contentLoaderInfo
enthält Informationen darüber, was der Lader lädt (hier eine SWF-Datei).
Wir richten dann ein Fortschrittsanzeige
und füge es der Bühne hinzu. Wir setzen die ProgressBar Quelle
zumcontentLoaderInfo
des Laders und seit dem contentInfoLoader
enthält Informationen darüber, was der Lader lädt (einschließlich der bytesLoaded
und bytesTotal
) So kann die ProgressBar sich selbst aktualisieren, um anzuzeigen, wie viel von der SWF geladen wurde.
Das beendetLaden ()
Funktion setzt die x- und y-Position des Loader-Inhalts (d. h. der SWF-Datei) und fügt sie der Bühne hinzu. An diesem Punkt sind wir mit der Fortschrittsleiste fertig, so dass wir sie von der Bühne entfernen.
Dann schließen wir die Klasse und das Paket ab.
private Funktion getrandomNumer (e: Event): void // Hier übergeben wir zwei Zahlen (die Werte der Stepper) generateRandomNumber (fromStepper.value, toStepper.value); private Funktion generateRandomNumber (minNum: Number, maxNum: Number): void // Enthält die generierte Nummer var randomNumber = (Math.floor (Math.random () * (maxNum - minNum + 1)) + minNum); // Hier wandeln wir eine Zufallszahl in eine Zeichenfolge, sodass wir sie im Beschriftungstext verwenden können. StepperLabel.text = "Ihre Zufallszahl ist" + String (randomNumber); private function scaleCircle (e: Event): void // scaleX und scaleY vergrößern oder verkleinern die Größe eines MovieClips // Hier verwenden wir den Wert des Schiebereglers von "1-3" theCircle.scaleX = e.target.value; theCircle.scaleY = e.target.value; private Funktion loadSwf (e: Event): void theLoader = new Loader (); theLoader.x = 319.00; theLoader.y = 31.00; theLoader.load (neue URLRequest ("dummy.swf")); // Hier bekommen wir die contentLoaderInfo des Laders, welche der Lader // lädt (hier ein swf) theLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, completLoading); progressBar = neue ProgressBar (); progressBar.x = 323; progressBar.y = 244; addChild (progressBar); // Die Quelle des Fortschrittsbalkens ist auf contentLoaderInfo des Laders gesetzt. // contentLoaderInfo enthält die Informationen zu bytesLoaded / bytesTotal der SWF. ProgressBar.source = theLoader.contentLoaderInfo; public function beendetLoading (e: Event): void // Hier setzen wir den Loader content.x und .y //I.E. die SWF-Werte .x und .y theLoader.content.x = 290; theLoader.content.y = 20; // Wir fügen den Inhalt des Laders hinzu. I.E. das swf addChild (theLoader.content); // Da der Loader fertig geladen ist, brauchen wir den Fortschrittsbalken nicht mehr. // Also entfernen wir ihn. RemoveChild (progressBar); // Die Klasse schließen // Das Paket schließen
Wieder ist die Verwendung von Komponenten eine großartige Möglichkeit, um Ihren Flash-Filmen Funktionen hinzuzufügen, ohne sie von Grund auf neu erstellen zu müssen
Sie werden im Bereich Komponentenparameter der Komponenten feststellen, dass Sie bestimmte Eigenschaften überprüfen und auswählen können.
Das obige Bild ist für die NumericStepper-Komponente
Die Eigenschaften für die NumericStepper-Komponente lauten wie folgt:
Die Eigenschaften für den Slider lauten wie folgt
SliderDirection.HORIZONTAL
und SliderDirection.VERTICAL.Die Eigenschaften für die ProgressBar lauten wie folgt
ProgressBarDirection.RIGHT
zeigt an, dass der Fortschrittsbalken von links nach rechts gefüllt ist. Ein Wert von ProgressBarDirection.LEFT
zeigt an, dass der Fortschrittsbalken von rechts nach links gefüllt ist.ProgressBarMode.EVENT
, ProgressBarMode.POLLED
, ProgressBarMode.MANUAL
Um sich die Eigenschaften der Beschriftungen und Schaltflächen anzeigen zu lassen, sollten Sie den Quick Tip zu Beschriftungen und Schaltflächen überprüfen.
In den Hilfedateien können Sie auch mehr über die Komponenteneigenschaften erfahren, die Sie im Parameterfenster festlegen können.
Vielen Dank für das Lesen und achten Sie auf weitere Komponenteneinführungen!