Share
In diesem Lernprogramm erfahren Sie, wie Sie ziehbare Fenster mit Flash und AS3 erstellen. Ich werde die Grundlagen von Drag & Drop, Fenstergrenzen, Hinzufügen von Inhalten und Minimieren des Fensters behandeln.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Okey, lass uns gehen! Erstellen Sie ein neues Dokument, indem Sie STRG + N drücken und auswählen Flash-Datei (ActionScript 3). Stellen Sie die Bühnengröße auf 600x400 px und die Hintergrundfarbe auf #EEE ein. Legen Sie im Eigenschaftenfenster die Klasse auf fest Fenster und speichern Sie Ihre Datei als windows.fla.
Wähle das Rechteckwerkzeug (R) und zeichne ein Rechteck mit 280x90 px. Wählen Sie Ihre Form aus, gehen Sie zur Farbpalette (Fenster> Farbe) und erstellen Sie einen Farbverlauf von #FFF nach #CCC.
Drücken Sie F für das Verlaufswerkzeug, wählen Sie den Verlauf aus, drehen Sie ihn um 90 Grad (indem Sie die Umschalttaste gedrückt halten, während Sie drehen), und kürzen Sie ihn so, dass das Rechteck angepasst wird.
Wählen Sie die gesamte Form aus und drücken Sie die Taste F8, um das Symbol in ein Symbol umzuwandeln windowArea und setzen Sie den Registrierungspunkt oben links.
Wählen Sie das Symbol aus und setzen Sie im Eigenschaftenfenster den Instanznamen auf windowArea.
Verwenden Sie für den Rand den Glühen-Filter mit einer 2px-Unschärfe, Stärke 500%, Farbe # 666666. Ich habe ein Glühen verwendet, weil wenn Sie einen Strich verwenden, wenn Sie die Größe des Fensters ändern, der Strich auch die Größe ändert.
Wählen Sie erneut das Rechteckwerkzeug (R) und zeichnen Sie ein Rechteck mit 280 x 22 px und einen 1px-Strich mit der Farbe # 666. Erstellen Sie ein weiteres Rechteck darüber, setzen Sie jedoch in den Rechteckoptionen den Eckenradius für Rechteck auf 5.
Beseitigen Sie nun die notwendigen Ecken wie im Bild unten.
Dann malen Sie Ihre Form, wählen Sie sie aus, gehen Sie zur Farbpalette (Fenster> Farbe) und erstellen Sie einen Verlauf von # 999 bis # 333. Drehen Sie den Farbverlauf wie bei dem vorherigen Schritt um 90 Grad.
Wählen Sie die gesamte Form aus und drücken Sie F8. Name: Fensterleiste; Typ: Schaltfläche; Anmeldung: oben links.
Wählen Sie das Symbol aus und setzen Sie im Eigenschaftenfenster den Instanznamen auf Fensterleiste.
Doppelklicken Sie auf die Form, und erstellen Sie sie Keyframes für die Über und Nieder Zustände. Ändern Sie nun die Farben für jeden.
Ich habe gewählt:
Erstellen Sie ein rundes Rechteck mit einem Radius von 14x11 px und einem Radius von 5px, und ändern Sie es so, dass es ungefähr wie folgt aussieht.
Das Minuszeichen machen Sie, indem Sie ein Rechteck mit der Farbe # 999 (5 x 2 px) erstellen. Setzen Sie den Instanznamen auf minimierenBtn.
Ich habe die gleichen Farben aus der Fensterleiste verwendet, aber den UP-Status mit 40% Alpha für den Verlauf.
Ordnen Sie alle Formen in Form eines Fensters an, drücken Sie F8 und erstellen Sie einen MovieClip mit dem Namen Fenster und Registrierung: oben links.
Klicken Sie in der Bibliothek mit der rechten Maustaste auf das Fenster und gehen Sie zu Eigenschaften. Stellen Sie die Klasse auf Fenster. Auf diese Weise wird das Fenster der Klasse zugewiesen, die wir später erstellen werden.
Wählen Sie das Symbol und in der Eigenschaftenfenster Legen Sie den Instanznamen auf fest Fenster. Klicken Sie in den Filtern auf Filter hinzufügen (die eingekreiste Schaltfläche in der Abbildung unten) und fügen Sie einen Schlagschatten mit der Farbe # 333 wie folgt hinzu:
Doppelklicken Sie auf das Symbol, um es zu bearbeiten. Alles markieren (STRG + A), Rechtsklick> Auf Ebenen verteilen.
Schreiben Sie in einer neuen Ebene den Text für den Fenstertitel mit Arial, 11pt, Farbe #CCC und Buchstabenabstand: 1. Setzen Sie den Wert auf Dynamischer Text und nennen Sie es windowTitle.
Nun, da das Design abgeschlossen ist, beginnen wir damit, unsere Szene zu kodieren. Als erstes erstellen wir unsere ActionScript-Datei.
Drücken Sie Strg + N oder gehen Sie zu Datei> Neu und wählen Sie ActionScript-Datei. Speichern Sie es in demselben Verzeichnis und mit demselben Namen (windows.as) Ihrer FLA-Datei.
Jetzt erstellen wir unser Paket und importieren die erforderlichen Klassen:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.KeyboardEvent; import flash.events.ContextMenuEvent; import flash.geom.Rectangle; import flash.filters.DropShadowFilter; import flash.text.TextFormat; import fl.transitions.Tween; import fl.transitions.easing. *; import fl.transitions.TweenEvent; öffentliches Klassenfenster erweitert MovieClip
Jetzt müssen Sie unseren Tasten Funktionen zuweisen. Sie benötigen eine Funktion, wenn Sie mit dem Ziehen beginnen Fensterleiste, eine andere, um das Ziehen anzuhalten, eine, um das Fenster beim Klicken nach oben zu bringen, und eine andere, um es zu minimieren.
Fügen Sie diese Ereignislistener der hinzu öffentliche Funktion Window () in unserem code:
öffentliches Klassenfenster erweitert MovieClip // Variablen public var title: String; öffentliche Funktion Window () // set windowTitle title = windowTitle.text; windowTitle.mouseEnabled = false; // Windows-Funktionen this.addEventListener (MouseEvent.MOUSE_UP, onWindowClick); this.windowBar.addEventListener (MouseEvent.MOUSE_DOWN, onWindowStartDrag); this.windowBar.addEventListener (MouseEvent.MOUSE_UP, onWindowStopDrag); this.minimizeBtn.addEventListener (MouseEvent.MOUSE_UP, minimumWindow);
Die öffentlichen var Titel wird für den Fenstertitel verwendet. Wir werden das später verwenden.
Seit der windowTitle Dies ist ein dynamischer Text, dessen Mausfunktionen deaktiviert sind, damit sie den Ziehbereich der Maus nicht beeinflussen Fensterleiste.
Hier fangen wir an, Spaß zu haben! Kopieren Sie den folgenden Code nach dem öffentliche Funktion Window ():
/ * START DRAG ************************************************ ************ / private Funktion onWindowStartDrag (e: MouseEvent): void var windowWidth = this.width; var windowHeight = this.height; var windowBarWidth = e.target.width; var windowBarHeight = e.target.height; var boundsRect: Rechteck; // Ziehbare Begrenzungen der Fenster // if (windowArea.visible) boundsRect = new Rectangle (0, 0, stage.stageWidth-windowWidth, stage.stageHeight-windowHeight); else boundsRect = new Rechteck (0, 0, stage.stageWidth-windowBarWidth, stage.stageHeight-windowBarHeight); // trace (boundsRect); this.startDrag (false, boundsRect); // Fenster nach vorne bringen stage.addChild (this);
Als erstes erstellen wir hier Variablen für die Breite und Höhe des Fensters und des Fensters Fensterleiste.
Als nächstes die Grenzen des Fensters. Wir erstellen zwei Grenzen: eine, wenn das Fenster normal ist (wenn windowArea sichtbar ist) und eine andere, wenn es minimiert wird. Dazu erstellen Sie ein Rechteck mit der Bühnengröße. Das Rechteck unterstützt vier Attribute (x, y, Breite, Höhe). Es beginnt in der Ecke des Bildschirms (x: 0; y: 0) und reicht bis zur anderen Ecke des Bildschirms. Weil die Grenzen sich auf die beziehen Registrierungspunkt des Fensters müssen wir die Breite und Höhe des Fensters (oder die Fensterleistefalls das Fenster minimiert ist).
Nachdem die Grenzen festgelegt wurden, legen wir das Fenster zum Ziehen fest. Wir werden ziehen diese, die Window-Klasse. Mit anderen Worten, das ganze Fenster.
this.startDrag (false, boundsRect);
Das startDrag Die Funktion unterstützt zwei Attribute: LockCenter und Grenzen. Wenn Sie keine Grenzen wollen, schreiben Sie einfach folgendes:
this.startDrag (false);
Wenn wir mehrere Fenster haben, müssen wir das aktuelle Fenster an den oberen Rand der Anzeige bringen. Wir machen das mit dem addChild indem Sie es erneut zur Bühne hinzufügen:
// Fenster nach vorne bringen stage.addChild (this);
Dieser ist sehr einfach. Wir werden die verwenden stopDrag Funktion hier. Kopieren Sie einfach den folgenden Code in den Code nach dem vorherigen onWindowStartDrag Funktion:
/ * STOP DRAG *********************************************** ************ / private Funktion onWindowStopDrag (e: MouseEvent): void this.stopDrag ();
Wieder ganz einfach. Wenn wir auf das Fenster klicken, bringen wir es mit nach vorne addChild.
/ * WINDOW CLICK ************************************************ ************ / private Funktion onWindowClick (e: MouseEvent): void // Fenster nach vorne bringen stage.addChild (this);
Um das Fenster zu minimieren / anzuzeigen, schalten wir die Sichtbarkeit des Fensters um windowArea so was:
/ * MINIMIZE WINDOW *********************************************** ************ / private Funktion minimumWindow (e: MouseEvent): void windowArea.visible =! windowArea.visible;
Sie können dies verbessern, indem Sie das Fenster ausblenden und ausblenden, und umgekehrt:
/ * MINIMIZE WINDOW *********************************************** ************ / private Funktion minimumWindow (e: MouseEvent): void var fade: Tween; if (windowArea.visible) fade = new Tween (windowArea, "alpha", Strong.easeOut, 1, 0, 0.5, true); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); else fade = new Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; fade.start (); Funktion fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
Der Tween unterstützt die folgenden Werte:
Tween (Objekt, "Eigenschaft", EasingType, Anfang, Ende, Dauer, UseSeconds);
Für weiterführende Informationen verwenden Sie die LiveDocs.
In unserem Fall machen wir, wenn die windowArea sichtbar ist (Bedeutung: nicht minimiert), blendet sie aus windowArea und wenn das Tween beendet ist (TweenEvent.MOTION_FINISH), wird das verbergen windowArea. Umgekehrt, wenn es minimiert ist.
Wir werden die Variable verwenden t um es zu ändern windowTitle. Die anderen beiden Zeilen dienen lediglich der Lösung eines Buchstabenabstandsproblems. Wenn Sie sie nicht schreiben, setzt Flash den Buchstabenabstand auf Null zurück.
/ * SET WINDOWS TITEL ********************************************** ************* / public function Titel (t: String): void var fmt: TextFormat = windowTitle.getTextFormat (); windowTitle.text = t; windowTitle.setTextFormat (fmt); // Buchstabenabstand Ausgabe title = t;
Diese Funktion wird später so verwendet:
Accentsconagua
YourWindowName.Title ("Name Ihres Fensters"); Diese Funktion erhält zwei Attribute: die Breite und Höhe des Fensters. Wenn keiner gefüllt ist, wird die Standardgröße festgelegt (280 x 112 px)
Was wir hier tun, ist die Breite der zu ändern Fensterleiste, das windowArea und das windowTitle. Für die Höhe ändern wir einfach die windowArea's, belassen die Standardhöhe des Fensters wie bei einem normalen Fenster.
Bei der Größenänderung müssen wir die Position der Minimieren-Schaltfläche neu einstellen. Dies ist gleich der Breite des Fensters abzüglich der Breite und 6px der Schaltfläche.
/ * SET WINDOWS GRÖSSE ********************************************** ************* / public function Size (Width: int = 280, Height: int = 112): void // Breite ändern windowBar.width = Width; windowArea.width = Breite; windowTitle.width = Width - 45; // Inhalt ändern height windowArea.height = Height; // reset minimBtn skalieren / position minimierenBtn.x = Breite - minimierenBtn.breite - 6;
Diese Funktion wird später so verwendet:
YourWindowName.Size (350.200);
Erinnern Sie sich noch daran, als wir einen Schlagschatten unter dem Fenster platziert haben? Wenn Sie das Fenster nach Code platzieren, müssen Sie den Schlagschatten auch nach Code hinzufügen.
Alle oben genannten Attribute können per Code gesetzt werden. Kopieren Sie die Funktion und ändern Sie die Werte nach Ihrem eigenen Geschmack:
/ * SET FILTER: DROP SHADOW ********************************************* ************** / public function DropShadow (Farbe: String = "333333"): void var dropShadow: DropShadowFilter = new DropShadowFilter (); dropShadow.blurX = 5; dropShadow.blurY = 5; dropShadow.strength = 1; dropShadow.quality = 1; // 1- niedrig; 2- medium; 3- hoch (max: 15) dropShadow.angle = 45; dropShadow.distance = 1; dropShadow.alpha = 1; dropShadow.knockout = false; dropShadow.inner = false; dropShadow.hideObject = false; dropShadow.color = int ("0x" + color); this.filters = new Array (dropShadow); // Filter zum Fenster hinzufügen Diese Funktion erhält einen String mit dem Hexadezimalcode der Farbe. Wenn dies nicht gefüllt ist, wird der Standardfarbwert # 333333 sein.
Das Qualität kann von 1 bis 15 gehen, 1 2 3 - niedrig, mittel und hoch. Wir haben hier niedrig gearbeitet.
Das Farbe muss aus einem konvertiert werden String zu einem int.
Nach der Definition der Attribute müssen wir den Filter wie in der letzten Zeile zum Fenster hinzufügen. Dadurch wird ein erstellt Array von Filtern. Das bedeutet, dass Sie dem Fenster auch andere Filter hinzufügen können.
this.filters = new Array (dropShadow);
Diese Funktion wird später so verwendet:
YourWindowName.DropShadow ("FF0000"); // fügt einen roten Schatten hinzu Wechseln Sie nun zu Ihrer Flash-Datei, erstellen Sie eine neue Ebene und benennen Sie sie as3 und drücke F9 für den ActionScript-Code (oder gehe zu Fenster> Aktionen).
Das Hinzufügen eines Fensters ist sehr einfach. Sie müssen lediglich eine Variable erstellen (nennen wir sie) mein Fenster) und weist es dem zu Fenster Klasse und das Fenster zur Bühne hinzufügen:
var myWindow: window = neues Fenster; addChild (meinWindow);
Dadurch wird ein Fenster mit seinen Standardwerten erzeugt.
Sie können mehrere Attribute des Fensters ändern:
Als Erstes müssen Sie die von der Window-Klasse zugewiesene Variable erstellen:
var myWindow: window = neues Fenster;
Dann können Sie die Attribute ändern:
myWindow.Title ("Cabo Verde"); myWindow.DropShadow ("66CC00"); // fügt einen schönen Kalkschatten hinzu myWindow.Size (350.200);
myWindow.x = 20; myWindow.y = 20;
addChild (meinWindow);
Der gesamte Code wird wie folgt aussehen:
var myWindow: window = neues Fenster; myWindow.Title ("Cabo Verde"); myWindow.DropShadow ("66CC00"); myWindow.Size (350.200); myWindow.x = 20; myWindow.y = 20; addChild (meinWindow); 
Hier ist ein weiteres Beispiel mit zwei Fenstern, die per Code hinzugefügt wurden, und einem Standardfenster in der Phase:
var janela: window = neues Fenster; var janela02: window = neues Fenster; Janela. Titel ("Cabo Verde"); janela.DropShadow ("66CC00"); Janela.Size (350.200); Janela.x = 20; janela.y = 20; janela02.Title ("Ninjas!"); janela02.DropShadow ("FF0000"); janela02.Size (250.200); janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); 
Wenn Sie den Titel des Fensters kennen müssen, können Sie Folgendes verwenden:
trace (janela.title);
Gut gemacht bis jetzt! Sie hätten jetzt ein ähnliches Ergebnis erzielen sollen, wie wir es anfangs gesehen haben:
Wenn Sie inzwischen feststellen, können Sie alle Attribute des Fensters ändern, der Inhalt bleibt jedoch gleich. Lassen Sie uns also den Inhalt erstellen.
Öffnen Sie den MovieClip des Fensters, erstellen Sie eine neue Ebene für den Inhalt und wählen Sie Einfügen> Neues Symbol (STRG + F8). Wählen Sie MovieClip, nennen Sie es Inhalt und klicken Sie auf OK. Platziere es jetzt bei X: 0, Y: 22.
Wählen Sie das neue Inhaltssymbol aus, das Sie gerade erstellt haben, und legen Sie den Instanznamen auf fest INHALT.
Doppelklicken Sie auf den Inhalt und benennen Sie die vorhandene Ebene Inhalt und erstellen Sie einen weiteren Namen as3. In letzterem drücken Sie F9 und schreiben:
halt();
Dies wird unser Standardinhalt sein. Also nichts!
Erstellen Sie jetzt eine weitere Keyframe und platzieren Sie beispielsweise ein Bild. Beachten Sie die Größe des Fensters, das Sie verwenden. Fügen Sie einen weiteren Keyframe hinzu und schreiben Sie etwas Text hinein. Jetzt haben wir 3 Keyframes: 1. Kein Inhalt, 2. Bild, 3. Text.
Für den Code fügen Sie dies Ihrer Klassendatei hinzu:
/ * CHANGE INHALT *********************************************** ************ / public function Inhalt (c: int): void CONTENT.gotoAndStop (c);
Wirklich einfach. Wir werden nur sagen, zu welchem Keyframe wir gehen möchten.
Sie müssen auch das ändern Fenster minimieren Funktion dazu:
/ * MINIMIZE WINDOW *********************************************** ************ / private Funktion minimumWindow (e: MouseEvent): void var fade: Tween; if (windowArea.visible) CONTENT.visible =! CONTENT.visible; fade = new Tween (windowArea, "alpha", Strong.easeOut, 1, 0, 0.5, true); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); else fade = new Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; CONTENT.visible =! CONTENT.visible; fade.start (); Funktion fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
Fügen Sie im vorherigen Beispiel Folgendes zum Code hinzu:
Janela. Inhalt (2); // wechselt zum Bild-Keyframe
Hier ist der vollständige Code:
var janela: window = neues Fenster; var janela02: window = neues Fenster; Janela. Titel ("Cabo Verde"); janela.DropShadow ("66CC00"); janela.Size (350,240); Janela. Inhalt (2); // geht zum Bild-Keyframe janela.x = 20; janela.y = 20; janela02.Title ("Ninjas!"); janela02.DropShadow ("FF0000"); janela02.Size (250.200); janela02.Inhalt (3); // geht zum Text-Keyframe janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); Es gibt also eine einfache Möglichkeit, ein ziehbares Fenster zu erstellen (ähnlich wie bei Windows). Wenn Sie weiter gehen möchten, können Sie den MovieClip-Inhalt ändern, Text, Schaltflächen, Bilder usw. hinzufügen. Sie können Bildlaufleisten hinzufügen, den Inhalt über XML aufrufen oder was Sie sich vorstellen können. Die Möglichkeiten sind endlos!
Hier ist ein weiteres fantastisches Beispiel:
Dies ist eXOTRik, und ich hoffe, Sie fanden das nützlich. Es ist mein erstes Tutorial, ich hoffe, ich werde Ihnen weitere Ninja-Tricks bringen. Ayaaaa!
