Schnelle Einführung Flash NumericStepper, Slider und ProgressBar-Komponenten

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.


Vorschau

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.


Schritt 1: Einrichten des Dokuments

Öffnen Sie ein neues Flash-Dokument und legen Sie die folgenden Eigenschaften fest

  • Dokumentengröße: 550 * 360
  • Hintergrundfarbe: #FFFFFF

Schritt 2: Fügen Sie der Bühne Komponenten hinzu

Ö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:

  • Geben Sie dem zweiten Label den Instanznamen "sliderLabel" X: 19, Y: 140
  • Geben Sie dem ersten NumericStepper den Instanznamen "fromStepper" X: 19, Y: 144
  • Geben Sie dem zweiten NumericStepper den Instanznamen "toStepper" x: 130, Y: 44
  • Geben Sie dem Slider den Instanznamen "Slider" X: 19, Y: 223
  • Geben Sie dem ersten Button den Instanznamen "randomNumButton" X: 60, Y: 82
  • Geben Sie dem zweiten Button den Instanznamen "loaderButton"

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"..


Schritt 3: Vorbereiten der AS-Datei und Importieren der Klassen

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;

Schritt 4: Einrichten der Hauptklasse

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 (); 

Schritt 5: Hauptfunktionen des Konstruktors

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); 

Schritt 6 Fügen Sie die Zufallsfunktionen hinzu

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 zum
contentLoaderInfo 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

Fazit

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:

  • aktiviert: Ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kann
  • maximal: der Maximalwert in der Reihenfolge der numerischen Werte.
  • Minimum: der Mindestwert in der Folge der numerischen Werte.
  • Schrittlänge: eine Zahl ungleich Null, die die Änderungseinheit zwischen Werten beschreibt.
  • Wert: Der aktuelle Wert der NumericStepper-Komponente.
  • sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar ist

Die Eigenschaften für den Slider lauten wie folgt

  • Richtung: Richtung des Schiebereglers. Zulässige Werte sind SliderDirection.HORIZONTAL und SliderDirection.VERTICAL.
  • aktiviert: Ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kann
  • maximal: Der maximal zulässige Wert für die Instanz der Slider-Komponente.
  • Minimum: Der minimal zulässige Wert für die Instanz der Slider-Komponente.
  • snapInterval: das Inkrement, um das der Wert erhöht oder verringert wird, wenn der Benutzer den Schieberegler bewegt.
  • tickInterval: Abstand der Teilstriche relativ zum Maximalwert der Komponente.
  • Wert: Der aktuelle Wert der Slider-Komponente.
  • sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar ist

Die Eigenschaften für die ProgressBar lauten wie folgt

  • Richtung: Gibt die Füllrichtung für die Fortschrittsleiste an. Ein Wert von 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.
  • aktiviert: Ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kann
  • ModusRuft die Methode ab, mit der die Fortschrittsleiste aktualisiert wird, oder legt diese fest. Die folgenden Werte gelten für diese Eigenschaft: ProgressBarMode.EVENT, ProgressBarMode.POLLED, ProgressBarMode.MANUAL
  • Quelle: Ein Verweis auf den Inhalt, der geladen wird und für den die ProgressBar den Fortschritt des Ladevorgangs misst.
  • sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar ist

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!