Share
In dieser Kurzanleitung zu den Flash Professional-Komponenten werden der UILoader und die UIScrollbar beschrieben.
Schauen Sie sich die Vorschau an. In der SWF befindet sich auf der linken Seite eine UILoader-Komponente, die auf den ersten Blick unsichtbar ist (da sich darin nichts befindet). Wir werden ein Bild in dieses laden.
Unter dem UILoader befindet sich ein Etikett mit dem Text "Image Not Loaded". Nach erfolgreichem Laden des Bildes ändern wir den Text dieses Labels in "Image Loaded"..
Mit der Schaltfläche unter dem Etikett wird das Laden des Bildes gestartet. Auf der rechten Seite befinden sich ein Textfeld und eine UIScrollbar, die anfangs unsichtbar sind (das Textfeld ist unsichtbar, da sich darin nichts befindet). Wenn Sie auf die Schaltfläche mit der Beschriftung "Text laden" klicken, wird der Text aus einer Beispieltextdatei geladen und die UIScrollbar wird sichtbar.
Öffnen Sie ein neues Flash-Dokument und legen Sie die folgenden Eigenschaften fest:
Öffnen Sie das Komponentenfenster, indem Sie auf gehen Menü> Fenster> Komponenten oder drücken Sie STRG + F7.
Ziehen Sie einen UILoader, ein Label, zwei Buttons und eine UIScrollbar auf die Bühne.
Geben Sie im Eigenschaftenbereich dem UILoader den Instanznamen "imageLoader" an. Wenn das Eigenschaftenfenster nicht angezeigt wird, gehen Sie zu Menü> Fenster> Eigenschaften oder drücken Sie STRG + F3.
Setzen Sie die X-Position des UILoader auf 37 und Y auf 20
Geben Sie dem Label den Instanznamen "loadedLabel". Setzen Sie X des Labels auf 37 und Y auf 182.
Geben Sie der ersten Schaltfläche den Instanznamen "loadImageButton" und setzen Sie das X der Beschriftung auf 37, das Y auf 213.
Wählen Sie im Bedienfeld Werkzeuge das Textwerkzeug aus, und ziehen Sie ein Textfeld auf der Bühne heraus. Wenn das Werkzeugfenster nicht angezeigt wird, gehen Sie zu Menü> Fenster> Extras oder drücken Sie STRG + F2.
Geben Sie dem TextField den Instanznamen "LoremText". Setzen Sie das X des TextFields auf 272 und das Y auf 15 und dann die Breite auf 243, die Höhe auf 101.
Geben Sie der UIScrollbar den Instanznamen "textScroller". Setzen Sie X der UIScrollbar auf 525.00 und Y auf 15
Geben Sie dem zweiten Button den Instanznamen "loadTextButton" und setzen Sie sein X auf 272, sein Y auf 213.
Die UILoader-Komponente ist ein Container, der SWF-, JPEG-, progressive JPEG-, PNG- und GIF-Dateien anzeigen kann. Sie können diese Assets zur Laufzeit laden und optional den Ladevorgang überwachen. Um herauszufinden, wie dies getan werden kann, lesen Sie mein Tutorial über die ProgressBar-Komponente (die Konzepte sind dieselben), und wenden Sie sich auf den UILoader an, wie ich es mit dem Loader in diesem Tutorial getan habe.
Mit der UIScrollbar können Sie einem Textfeld eine Bildlaufleiste hinzufügen. Wenn Sie über einen langen Textblock verfügen, können Sie mit der UIScrollbar-Komponente durchblättern, ohne ein sehr großes Textfeld zu haben, um den gesamten Text aufzunehmen. Diese Komponente ist sehr einfach zu verwenden, da Sie sie einfach auf ein TextField ablegen können und sie automatisch mit diesem TextField "verbindet". Hier zeige ich Ihnen in ActionScript, wie es geht.
Erstellen Sie eine neue ActionScript-Datei, und geben Sie ihr den Namen Main.as.
Wir werden unsere Komponenten in Main.as deklarieren, so dass wir "Stage-Instanzen automatisch deklarieren" deaktivieren müssen. Der Vorteil dabei ist, dass Sie Code-Hinweise für die Instanz erhalten, wenn Sie den Code-Editor von Flash verwenden. Um dies zu tun, gehen Sie zu Menü> Datei> Veröffentlichungseinstellungen und klicken Sie auf Einstellungen neben Skript [Actionscript 3.0].
Deaktivieren Sie "Bühneninstanzen automatisch deklarieren"..
Öffnen Sie in Main.as die Paketdeklaration und importieren Sie die Klassen, die wir verwenden werden. Fügen Sie Folgendes zu Main.as hinzu:
package // Wir erweitern die Klasse von MovieClip. import flash.display.MovieClip; // Importiere die Komponenten, die wir importieren werden fl.containers.UILoader; import fl.controls.Button; import fl.controls.Label; import fl.controls.UIScrollbar; // Wird für unsere Event-Handler benötigt import flash.events.MouseEvent; import flash.events.Event; // für geladene Bilder und Text erforderlich import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField;
Fügen Sie die Klasse hinzu, erweitern Sie den Movieclip und richten Sie unsere Konstruktorfunktion ein.
Hier deklarieren wir unsere Variablen und rufen unsere Funktionen im auf Main() Konstrukteur. Fügen Sie Folgendes zu Main.as hinzu:
public class Main erweitert MovieClip // Unsere Komponenten auf der Bühne public var loadImageButton: Button; public var loadTextButton: Schaltfläche; public var loadedLabel: Label; public var loremText: TextField; public var imageLoader: UILoader; public var textScroller: UIScrollbar; // Wird verwendet, um den Text in das TextField zu laden. Public var textLoader: URLLoader; public function Main () setupButtonsAndLabels (); setupTextField (); setupScrollBar ();
Hier definieren wir die Funktionen, die in unserem Konstruktor verwendet werden. In dem setupButtonAndLabels () Funktion setzen wir unsere Tasten Etikette Eigenschaft und fügen Sie Ereignis-Listener hinzu, die ausgelöst werden, wenn der Benutzer auf die Schaltfläche klickt.
In dem setupTextField () Funktion setzen wir das Textfeld Zeilenumbruch Eigentum an wahr Der Text wird also in die nächste Zeile umgebrochen, wenn er die rechte Kante des Textfelds erreicht.
Im setupScrollBar () Wir setzen die Richtung der UIScrollbar auf "vertikal" (dies kann "vertikal" oder "horizontal" sein). Da wir sie beim Start des Films nicht sichtbar machen wollen, setzen wir deren sichtbar Eigentum an falsch.
Fügen Sie Folgendes zu Main.as hinzu:
private function setupButtonsAndLabels (): void // Setzt die Schaltflächen Beschriftung (Text wird auf der Schaltfläche angezeigt) loadImageButton.label = "Load Image"; loadImageButton.addEventListener (MouseEvent.CLICK, loadImage); // Legt die Schaltflächen fest (Text wird auf der Schaltfläche angezeigt) loadTextButton.label = "Text laden"; loadTextButton.addEventListener (MouseEvent.CLICK, loadText); // Setzt den Beschriftungstext loaded loaded - "Image Not Loaded"; private function setupTextField (): void // Zeilen werden umgebrochen, wenn sie das Ende (rechte Seite) des Textfelds erreichen. loremText.wordWrap = true; private function setupScrollBar (): void // Legt unsere scrollBars-Richtung fest. kann "vertikal" oder "horizontal" sein textScroller.direction = "vertical"; textScroller.visible = false;
Hier werden wir die Ereignis-Listener codieren, die wir zu den Schaltflächen hinzugefügt haben, und dann die Klasse und das Paket schließen.
In dem Bild laden() Funktion setzen wir die scaleContent des imageLoader zu falsch (wenn es wäre wahr Das Bild wird auf die Größe des Bildes verkleinert UILoader), da das Bild seine normale Größe haben soll. Wir laden dann das Bild und fügen einen Ereignis-Listener hinzu, der ausgelöst wird, wenn das Bild vollständig geladen wurde.
In dem loadText () Funktion, die wir einrichten URLLoader und laden Sie die Textdatei. Hier haben wir auch einen Listener eingerichtet, der ausgelöst wird, wenn der Text vollständig geladen ist.
In dem imageLoaded () Funktion setzen wir den Text des Labels auf "Image Loaded" - ein einfaches Beispiel, aber Sie könnten in einer "echten" Anwendung etwas weniger Triviales tun.
In dem textLoaded () Funktion setzen wir den Text des Textfelds auf das Ereignis (e.zieldaten) ist der Text aus der Textdatei. Dann setzen wir die UIScrollbar sichtbar sein und sein setzen scrollTarget (das Textfeld, das wir kontrollieren möchten).
Accentsconagua
private function loadImage (e: MouseEvent): void // Wenn true gesetzt wäre, würde das Bild auf die Größe des UILoader verkleinert. // Hier setzen wir den Wert false, damit der UILoader die tatsächliche Bildgröße berücksichtigt imageLoader.scaleContent = false; // Lädt das Bild und löst eine Funktion aus, wenn das Laden abgeschlossen ist imageLoader.load (new URLRequest ("theimage.jpg")); imageLoader.addEventListener (Event.COMPLETE, imageLoaded); private function loadText (e: MouseEvent): void // Lädt unsere Textdatei und löst eine Funktion aus, wenn das Laden abgeschlossen ist. textLoader = new URLLoader (); textLoader.load (neue URLRequest ("lorem.txt")); textLoader.addEventListener (Event.COMPLETE, textLoaded); private Funktion imageLoaded (e: Event): void // Setzt den Text auf dem Etikett loadedLabel.text = "Image Loaded"; private Funktion textLoaded (e: Event): void // Setzt das TextField auf die Daten des Laders (den Text in der Textdatei). loremText.text = e.target.data; textScroller.visible = true; textScroller.scrollTarget = loremText; // Klasse schließen Paket schließen Beachten Sie, dass wir am Ende die Klasse und das Paket schließen.
Das merkt man im Komponentenparameter Panel der Komponenten, die Sie überprüfen und bestimmte Eigenschaften auswählen können.
Das obige Bild ist für die UILoader-Komponente.
Die Eigenschaften für die UILoader-Komponente lauten wie folgt:
Die Eigenschaften für die UIScrollbar sind
In den Hilfedateien können Sie mehr über diese Eigenschaften erfahren.
Weitere Informationen zu den Eigenschaften für Beschriftungen und Schaltflächen finden Sie in der Kurzanleitung zu den Komponenten "Schaltfläche" und "Beschriftung".
Danke fürs Lesen!
