Share
In dieser kurzen Einführung in die Flash Professional-Komponenten werden ScrollPane und ColorPicker beschrieben. Lass uns eintauchen?
Schauen Sie sich die Demo an. Auf der linken Seite sehen Sie zwei Farbwähler-Komponenten, zwei Beschriftungen mit der Bezeichnung "Benutzerdefinierter Farbwähler" und "Normaler Farbwähler" sowie ein blaues Rechteck.
Der Custom Color Picker verwendet Farben, die ausschließlich aus einer Auswahl unserer Wahl stammen. Der normale Farbwähler enthält alle Farben eines normalen Farbwählers. Wenn ein Benutzer eine Farbe auswählt, ändern wir das Rechteck in die Farbe, die er ausgewählt hat.
Auf der rechten Seite der SWF-Datei befindet sich ein ScrollPane, in das wir ein Bild laden, und eine Schaltfläche, mit der das Laden des Bildes eingeleitet wird.
Ö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 ColorPicker, zwei Labels, ein ScrollPane und eine Schaltfläche auf die Bühne.
Geben Sie im Eigenschaftenfenster dem ersten Label den Instanznamen an customLabel.
Wenn das Eigenschaftenfenster nicht angezeigt wird, wählen Sie Menü> Fenster> Eigenschaften oder drücken Sie STRG + F3.
Setzen Sie X des Labels auf 16 und Y auf 12.
Geben Sie dem zweiten Label den Instanznamen "normalLabel". Setzen Sie X auf 16 und Y auf 176.
Geben Sie dem ersten ColorPicker den Instanznamen "customColorPicker". Setzen Sie X auf 16 und Y auf 41.
Geben Sie dem zweiten ColorPicker den Instanznamen "normalColorPicker". Setzen Sie X auf 16 und Y auf 206.
Geben Sie dem zweiten ScrollPane den Instanznamen "imageScrollPane". setze X auf 277 und Y auf 29.
Geben Sie dem Button den Instanznamen "loadImageButton". Setzen Sie X auf 354 und Y auf 332.
Zeichnen Sie mit dem Rechteckwerkzeug ein Rechteck auf der Bühne. Ich zeichnete meine mit einer blauen Farbe. Wählen Sie das Rechteck aus und gehen Sie zu Menü> Ändern> In Symbol konvertieren (oder drücken Sie F8); Setzen Sie den Namen auf "Quadrat" und stellen Sie sicher, dass "Typ" auf MovieClip eingestellt ist.
Als nächstes geben Sie einen Instanznamen von Quadrat wie wir es mit den oben genannten Komponenten gemacht haben. Stellen Sie die Größe auf 143x97px ein, setzen Sie X auf 90 und Y auf 47.
Der ColorPicker ist eine großartige Komponente, mit der Benutzer eine Farbe auswählen können. Sie können auch festlegen, welche Farben im ColorPicker verfügbar sein sollen.
Die ScrollPane-Komponente zeigt DisplayObjects-, JPEG-, GIF- und PNG-Dateien sowie SWF-Dateien in einem scrollbaren Bereich an. Wenn der Inhalt, den Sie laden, zu groß für den Film ist, ist dies eine ideale Komponente.
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.
Gehe zu Menü> Datei> Veröffentlichungseinstellungen und klicken Sie neben Einstellungen auf Skript [Actionscript 3.0]
Deaktivieren Sie "Bühneninstanzen automatisch deklarieren"..
Als Nächstes öffnen wir in Main.as die Paketdeklaration und importieren die Klassen, die wir verwenden werden.
Fügen Sie Folgendes zu Main.as hinzu:
package // Wir erweitern MovieClip import flash.display.MovieClip; // Müssen die von uns verwendeten Komponenten importieren importieren fl.controls.ColorPicker; import fl.controls.Label; Import fl.containers.ScrollPane; import fl.controls.Button; // Die Ereignisse, die wir benötigen importieren flash.events.MouseEvent; import flash.events.Event; // Zum Ändern der MovieClip-Farbe erforderlich. Import flash.geom.ColorTransform; // zum Laden des Image-Imports erforderlich flash.net.URLRequest;
Fügen Sie die Klassendeklaration hinzu, erweitern Sie Movie Clip und richten Sie unsere Konstruktorfunktion ein. Hier deklarieren wir unsere Variablen und rufen unsere Funktionen im Main Constructor auf.
Fügen Sie Folgendes zu Main.as hinzu
public class Main erweitert MovieClip // Unsere Komponenten auf der Bühne public var customLabel: Label; public var normalLabel: Label; public var customColorPicker: ColorPicker; public var normalColorPicker: ColorPicker; public var square: DisplayObject; public var imageScrollPane: ScrollPane; public var loadImageButton: Schaltfläche; öffentliche Funktion Main () setupLabels (); setupColorPickers (); setupButton ();
Hier definieren wir die Funktionen, die in unserem Konstruktor verwendet werden.
In dem setupLabels Funktion setzen wir den Text auf den Labels. Im setupColorPicker wir setzen die farben für unsere customColorpicker; Bei diesen Farben handelt es sich um eine Reihe von Farben, die die Flash-Syntax für Hexadezimalfarben verwenden. Wir fügen unseren Farbwählern auch einen Ereignis-Listener hinzu, sodass, wenn ein Benutzer eine Farbe auswählt, die entsprechende Funktion ausgelöst wird.
In dem setupButton Funktion setzen wir die Label-Eigenschaft der Schaltfläche und fügen einen Ereignis-Listener hinzu, wenn der Benutzer auf die Schaltfläche klickt.
Fügen Sie Folgendes zu Main.as hinzu:
private function setupLabels (): void // Setzt den Text der Labels customLabel.text = "Custom Color Picker"; normalLabel.text = "Normal Color Picker" private Funktion setupColorPickers (): void // Hier legen wir die Farben für den Farbwähler customColorPicker.colors = [0x000FF, 0xFF0000,0x00FF00, 0xFFFF00,0xFF33FF]; // Wenn der Benutzer eine Farbe auswählt, rufen wir die changeColor-Funktion auf. CustomColorPicker.addEventListener (Event.CHANGE, changeColor); normalColorPicker.addEventListener (Event.CHANGE, changeColor); private function setupButton (): void // Setzt die Beschriftung der Schaltflächen (Der Text auf der Schaltfläche) loadImageButton.label = "Load Image"; // Wenn der Benutzer auf die Schaltfläche klickt, rufen wir loadImage auf. Function loadImageButton.addEventListener (MouseEvent.CLICK, loadImage);
Hier codieren wir die Funktionen für die Ereignis-Listener, die wir oben hinzugefügt haben.
Das Farbe ändern Funktion verwendet a ColorTransform Objekt, damit wir die Farbe des Rechtecks auf der Bühne ändern können. Wir setzen die Farbe der ColorTransform auf die Farbe, die der Benutzer mit ausgewählt hat e.target.selectedColor. Das Ziel ist der ColorPicker, dessen Farbe gerade geändert wurde. Dann benutzen wir die verwandeln Eigentum der Quadrat movieClip und setze das colorTransform auf die ausgewählte Farbe.
Accentsconagua
private function changeColor (e: Event): void // Sie müssen ein ColorTransform-Objekt einrichten, um die Farbe der MovieClip-Farbe zu ändern: ColorTransform = new ColorTransform (); // setze die colorTransform-Farbe auf die Farbe, die der Benutzer in colorPicker ausgewählt hat color.color = e.target.selectedColor; // Ändern Sie die Farbe des MovieClips mit ColorTransform square.transform.colorTransform = color; private function loadImage (e: Event): void // Lädt das Bild in das scrollPane imageScrollPane.load (neue URLRequest ("image.jpg")); // Die Klasse schließen // Das Paket schließen Das merkt man im Komponentenparameter Fenster (das über das Menü Fenster geöffnet werden kann), in dem Sie bestimmte Eigenschaften überprüfen und auswählen können.
Das obige Bild ist für die ColorPicker-Komponente.
Die Eigenschaften für die ColorPicker-Komponente lauten wie folgt:
Die Eigenschaften für das ScrollPane sind
ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO.ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO. In den Hilfedateien können Sie mehr über diese Eigenschaften erfahren.
Um mehr über die Eigenschaften für Beschriftungen und Schaltflächen zu erfahren, lesen Sie den Quick Tip zu den Komponenten Button und Beschriftung
