|
NumericStepper-Komponenten können sowohl beim Authoring als auch zur Laufzeit horizontal und vertikal transformiert werden. Beim Authoring wählen Sie hierzu die Komponente auf der Bühne aus und verwenden anschließend das Werkzeug „Frei transformieren“ oder die Befehle unter „Modifizieren“ > „Transformieren“. Zur Laufzeit verwenden Sie die Methode
setSize()
oder die entsprechenden Eigenschaften und Methoden der NumericStepper-Klasse, zum Beispiel
width
,
height
,
scaleX
und
scaleY
.
Wenn Sie die Größe der NumericStepper-Komponente ändern, wird dadurch die Breite der Pfeilschaltflächen nach oben und unten nicht geändert. Wenn der Stepper so stark vergrößert wird, dass er die Standardhöhe überschreitet, werden die Pfeilschaltflächen standardmäßig oben und unten an der Komponente fixiert. Andernfalls wird durch die Skalierung im neunteiligen Segmentraster (Scale-9) festgelegt, wie die Schaltflächen gezeichnet werden. Die Pfeilschaltflächen werden immer rechts vom Textfeld angezeigt.
Stile und die NumericStepper-Komponente
Sie können die Stileigenschaften der NumericStepper-Komponente festlegen, um ihr Erscheinungsbild zu ändern. Die Stile legen die Werte für die Skins, Auffüllung und Textformatierung beim Zeichnen der Komponente fest. Mit dem Stil
textFormat
können Sie Größe und Darstellung des NumericStepper-Wertes ändern. Die unterschiedlichen Skin-Stile ermöglichen es Ihnen, verschiedene Klassen für die Skin anzugeben. Weitere Informationen zur Verwendung der Skin-Stile finden Sie unter
Überblick über Skins
.
In den folgenden Schritten wird der Stil
textFormat
verwendet, um das Aussehen des in der NumericStepper-Komponente angezeigten Werts zu ändern.
-
Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).
-
Ziehen Sie die NumericStepper-Komponente aus dem Bedienfeld „Komponenten“ auf die Bühne und nennen Sie die Instanz
myNs
.
-
Fügen Sie dem Bedienfeld „Aktionen“ von Bild 1 in der Hauptzeitleiste den folgenden Code hinzu:
var tf:TextFormat = new TextFormat();
myNs.setSize(100, 50);
tf.color = 0x0000CC;
tf.size = 24;
tf.font = "Arial";
tf.align = "center";
myNs.setStyle("textFormat", tf);
-
Wählen Sie „Steuerung“ > „Film testen“.
Skins und die NumericStepper-Komponente
Die NumericStepper-Komponente verfügt über Skins, die den Up- und Down-Status sowie den ausgewählten und deaktivierten Zustand ihrer Schaltflächen darstellen.
Wenn ein Stepper aktiviert ist, werden die Schaltflächen nach oben und unten im Over-Status angezeigt, wenn der Zeiger über sie hinweg bewegt wird. Beim Klicken auf die Schaltflächen werden sie im Down-Status angezeigt. Wenn die Maustaste losgelassen wird, kehren die Schaltflächen zum Over-Status zurück. Wenn der Zeiger von den Schaltflächen weg bewegt wird, während die Maustaste noch gedrückt ist, kehren die Schaltflächen zu ihrem ursprünglichen Zustand zurück.
Wenn ein Stepper deaktiviert ist, wird unabhängig von der Benutzerinteraktion der deaktivierte Zustand angezeigt.
Eine NumericStepper-Komponente verfügt über die folgenden Skins:
-
Erstellen Sie eine neue FLA-Datei.
-
Ziehen Sie die NumericStepper-Komponente auf die Bühne.
-
Stellen Sie die Vergrößerung auf 400 % ein, um das Bild besser bearbeiten zu können.
-
Doppelklicken Sie auf den Hintergrund der TextInput-Skin im Fenster „Skins“, bis Sie zur Gruppenebene gelangen und die Hintergrundfarbe in der Farbauswahl „Füllung“ im Eigenschafteninspektor angezeigt wird.
-
Wählen Sie in der Farbauswahl „Füllung“ im Eigenschafteninspektor die Farbe #9999FF aus, um sie als Hintergrundfarbe für die TextInput-Skin zu verwenden.
-
Klicken Sie links neben der Bearbeitungsleiste über der Bühne auf „Zurück“, um zum Dokumentbearbeitungsmodus zurückzukehren.
-
Doppelklicken Sie erneut auf die NumericStepper-Komponente, um das Bedienfeld mit den Skins zu öffnen.
-
Doppelklicken Sie auf den Hintergrund der Schaltfläche mit dem Pfeil nach oben in der Up-Gruppe, bis der Hintergrund ausgewählt ist und die entsprechende Farbe in der Farbauswahl „Füllung“ im Eigenschafteninspektor angezeigt wird.
-
Wählen Sie die Farbe #9966FF aus, um sie als Hintergrundfarbe für die Schaltfläche mit dem Pfeil nach oben zu verwenden.
-
Wiederholen Sie die Schritte 8 und 9 für den Pfeil nach unten in der Up-Gruppe.
-
Wählen Sie „Steuerung“ > „Film testen“.
Die NumericStepper-Instanz sollte jetzt wie in der folgenden Abbildung aussehen:
|
|
|
