Share
In meinem letzten Tut: Neue Funktionen für Flash mit JSFL erstellen, haben wir neue Befehle für Flash erstellt. Jetzt gehen wir weiter, indem wir völlig neue Panels in der Flash-Authoring-Umgebung erstellen.
Um das Buttonizer-Bedienfeld auszuprobieren, laden Sie die Quell-ZIP-Datei herunter, und extrahieren Sie die Datei Buttonizer.swf in den in Schritt 3 aufgelisteten Ordner. Starten Sie Flash neu, und Sie finden es in Fenster> Andere Bedienfelder.
Ein Flash-Bedienfeld ist nur eine normale SWF-Datei, die Sie anweisen, Flash in einem Bedienfeld und nicht in einem separaten Fenster auszuführen. Sie müssen lediglich eine neue FLA erstellen. Der Name der FLA wird als Titel des Panels angezeigt. Ich rufe meine Buttonizer.fla an. Wir verwenden AS3 für dieses Tutorial.
Ein einfaches weißes Panel ist natürlich ziemlich nutzlos, also füllen wir es aus. Ändern Sie die Größe der Bühne auf 250 Pixel Breite um 170 Pixel (nicht, dass es darauf ankommt). Ich habe diese Zahlen ausgewählt, weil ich weiß, dass sie groß genug sind, was ich später geplant habe. Ändern Sie die Hintergrundfarbe in #EDEDED (dies entspricht den Hintergründen von die Platten auf meinem System sowieso).
Öffnen Sie das Bedienfeld Komponenten (Fenster> Komponenten) und ziehen Sie einen Button aus dem User Interface-Ordner auf die Bühne.
Kompilieren Sie eine SWF-Datei aus dieser FLA. Um Flash als Panel zu verwenden, ziehen Sie die SWF-Datei in den richtigen Ordner und starten Sie Flash neu.
Der Ordner wird aufgerufen WindowSWF und sein Standort variiert je nach Betriebssystem:
Das Nutzername Der Ordner entspricht dem Namen, mit dem Sie sich angemeldet haben, Sprache hängt davon ab, was Sie bei der Installation von Flash ausgewählt haben (für Englischsprachige wird es wahrscheinlich sein) en-uns oder nur en), und wenn Sie eine neuere Version von Flash als CS3 verwenden, ändert sich auch dieser Ordner.
(Ehrlich gesagt ist es wahrscheinlich am einfachsten, Ihren Computer zu durchsuchen, um alle Ordner mit dem Namen WindowSWF zu finden. Einer wird richtig sein.)
Ziehen Sie Ihre SWF-Datei auf die WindowSWF Ordner und starten Sie Flash neu. Machen Sie sich keine Sorgen, Sie müssen Flash nicht jedes Mal neu starten, wenn Sie eine Änderung vornehmen. Sobald Sie es wieder geöffnet haben, überprüfen Sie die Fenster> Andere Bedienfelder Untermenü und Sie sollten sehen Buttonizer als eine Option. Klick es:
Genial.
Bewegen Sie bei geöffnetem Bedienfeld die Schaltfläche in der FLA und kompilieren Sie die SWF-Datei erneut. Das Panel ändert sich nicht.
Verschieben Sie die SWF-Datei in die WindowSWF Mappe. Das Panel ändert sich immer noch nicht.
Schließen Sie das Panel und öffnen Sie es erneut über das Menü. Es ändert.
Wir können dies beschleunigen, indem wir die SWF-Funktion des Panels direkt auf der Website veröffentlichen WindowSWF Mappe. Klicken Datei> Veröffentlichungseinstellungen, Klicken Sie dann auf das Ordnersymbol neben dem Feld mit der Meldung Buttonizer.swf, Browsen Sie zu Ihrem WindowSWF Ordner und klicken Sie auf Speichern.
Deaktivieren Sie das Kontrollkästchen HTML Kontrollkästchen auch; du brauchst es nicht.
Bewegen Sie nun die Schaltfläche erneut, kompilieren Sie die SWF-Datei erneut (Sie können Shift-F12 drücken, um Flash Player nicht anzuzeigen), schließen Sie das Bedienfeld, öffnen Sie es erneut, und es wird aktualisiert.
Da es sich bei dem Panel um eine funktionsfähige SWF-Datei handelt, sind wir nicht darauf beschränkt, das Aussehen zu ändern. Wir können auch Code hinzufügen.
Erstellen Sie eine neue AS-Datei mit dem Namen Buttonizer.as und richten Sie sie als Dokumentklasse Ihrer FLA ein. Hier ist der grundlegende Code:
package import flash.display.MovieClip; public class Buttonizer erweitert MovieClip public function Buttonizer ()
(Wenn Sie nicht mit der Verwendung einer Dokumentenklasse vertraut sind, lesen Sie diese kurze Einführung.)
Um zu beweisen, dass Code funktionieren kann, ändern wir den Text auf der Schaltfläche. Weisen Sie der Schaltfläche in der FLA einen Instanznamen zu die Taste (einfallsreich), fügen Sie dann in Ihrer Konstruktorfunktion diese Codezeile hinzu:
theButton.label = "Buttonize";
Drücken Sie die Tastenkombination Umschalt-F12, schließen Sie das Bedienfeld und öffnen Sie es erneut. Der Text hat sich geändert.
Wenn nicht, überprüfen Sie, ob Sie die FLA mit der Dokumentklasse verknüpft haben und die Schaltfläche benannt haben.
Lassen Sie uns dort eine Funktion bekommen, um mit der gedrückten Taste umzugehen:
Accentsconagua
package import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer erweitert MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); private Funktion onClickTheButton (a_event: MouseEvent): void trace ("Schaltfläche angeklickt"); Nichts kompliziert dort. Ich habe ein trace () verwendet, um sicherzustellen, dass alles korrekt angeschlossen ist. Laden Sie das Panel erneut und stellen Sie sicher, dass es funktioniert.
Oh, das tut es nicht?
Stimmt; Die Funktion AS3 trace () verfolgt die Ergebnisse nicht in das Bedienfeld Ausgabe, wenn sie in einem anderen Bedienfeld ausgeführt werden. Ich hasse es, ohne trace () zu arbeiten, also müssen wir das irgendwie umgehen.
In meinem JSFL-Tutorial habe ich Ihnen die JavaScript-Funktion fl.trace () gezeigt. Der Text wird im Bedienfeld „Ausgabe“ nachverfolgt, er wird jedoch in der Flash-Authoring-Umgebung selbst und nicht in einem Flash Player-Fenster ausgeführt. Das ist großartig - es bedeutet, dass wir es von unserem Panel aus ausführen können!
Aber wir können nicht einfach tippen fl.trace ("Schaltfläche angeklickt"); in unserem AS3-Code, weil es keine AS3-Funktion ist. Wir müssen Flash anweisen, dies als JSFL auszuführen, und dazu verwenden wir die Funktion adobe.utils.MMExecute (), die ist AS3:
package import adobe.utils.MMExecute; // vergiss das nicht! import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer erweitert MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); private Funktion onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.trace ('Button clicked');"); // Anführungszeichen in Anführungszeichen werden verwirrend MMExecute () nimmt einen String und führt ihn als JSFL-Aufruf aus. Es wird vom Flash Player-Fenster vollständig ignoriert.
Wenn Sie dies jetzt testen, wird das Klicken auf die Schaltfläche zum Bedienfeld Ausgabe zurückverfolgt. Ausgezeichnet.
Es wäre unpraktisch, ein längeres Skript zu brauchen und es durch einen MMExecute () - Aufruf zu pushen. Stattdessen können wir die JSFL-Datei in einer Skriptdatei speichern und Flash anweisen, diese auszuführen.
Wenn Sie meinem JSFL-Tutorial gefolgt sind, haben Sie bereits eine Buttonize.jsfl-Datei. Wenn nicht, kopieren Sie den folgenden Code in eine neue JSFL-Datei:
if (fl.getDocumentDOM (). selection.length == 1) if (fl.getDocumentDOM (). selection [0] .elementType == "text") var textLeft = fl.getDocumentDOM (). selection [0] .x; var textTop = fl.getDocumentDOM (). selection [0] .y; var textRight = fl.getDocumentDOM (). selection [0] .x + fl.getDocumentDOM (). selection [0] .width; var textBottom = fl.getDocumentDOM (). selection [0] .y + fl.getDocumentDOM (). selection [0] .height; var textText = fl.getDocumentDOM (). selection [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ('button', textText, 'oben links'); var lib = fl.getDocumentDOM (). Bibliothek; if (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); else lib.setItemProperty ('linkageExportForAS', false); lib.setItemProperty ('linkageExportForRS', false); lib.setItemProperty ('scalingGrid', false); fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, oben: textTop, rechts: textRight, unten: textBottom, 0); Speichern Sie es als Buttonize.jsfl irgendwo auf Ihrer Festplatte. Jetzt können Sie das Skript ausführen, indem Sie (in AS3) aufrufen:
MMExecute ("fl.runScript ('(Pfad zu Ihrem Skript)' + '/Buttonize.jsfl')"); Um es einfach zu halten, verschieben Sie Ihre JSFL-Datei in Ihr WindowSWF-Verzeichnis. Sie können jetzt ersetzen "(Pfad zu Ihrem Skript)" mit fl.configURI + 'WindowSWF /'. Lass es uns ausprobieren:
package import adobe.utils.MMExecute; import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer erweitert MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); private Funktion onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl')"); Starten Sie eine neue FLA, erstellen Sie Text, wählen Sie ihn aus und klicken Sie auf die Schaltfläche Buttonize. Es sollte sich in eine Schaltfläche verwandeln, wie es das Skript normalerweise tut.
Ziehen Sie in der Buttonizer-FLA einen ColorPicker und ein Label von den Komponenten der Benutzeroberfläche auf die Bühne. Wir verwenden die Farbauswahl, um die Farbe des Texts im Abwärtsstatus der Schaltfläche zu ändern. Ordnen Sie die Komponenten entsprechend an:
Geben Sie dem Farbwähler einen Instanznamen von downColorPicker.
Wir müssen die Farbe vom ColorPicker an das Buttonize-Skript übergeben, aber zuerst machen wir aus dem Skript eine Funktion, damit es Argumente akzeptieren kann.
Ändern Sie es wie folgt:
Funktion makeButtonFromText (downColor) if (fl.getDocumentDOM (). selection.length == 1) if (fl.getDocumentDOM (). selection [0] .elementType == "text") var textLeft = fl.getDocumentDOM ( ) .Auswahl [0] .x; var textTop = fl.getDocumentDOM (). selection [0] .y; var textRight = fl.getDocumentDOM (). selection [0] .x + fl.getDocumentDOM (). selection [0] .width; var textBottom = fl.getDocumentDOM (). selection [0] .y + fl.getDocumentDOM (). selection [0] .height; var textText = fl.getDocumentDOM (). selection [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ('button', textText, 'oben links'); var lib = fl.getDocumentDOM (). Bibliothek; if (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); else lib.setItemProperty ('linkageExportForAS', false); lib.setItemProperty ('linkageExportForRS', false); lib.setItemProperty ('scalingGrid', false); fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, oben: textTop, rechts: textRight, unten: textBottom, 0); Jetzt sollten wir den MMExecute () - Aufruf ändern, um auf diese bestimmte Funktion im Skript zu verweisen. Sie müssen lediglich den Funktionsnamen als zweiten Parameter übergeben:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); Für jedes Argument, das wir an die JSFL-Funktion übergeben möchten, fügen wir dem Aufruf MMExecute () einen weiteren Parameter hinzu. So übergeben Sie die ausgewählte Farbe:
MMExecute ("fl.runScript" (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'), "+ downColorPicker.selectedColor.toString () +") "); Wir müssen aus den Anführungszeichen ausbrechen, um dieses Argument einzubeziehen, da wir es über AS3 und nicht über JSFL erhalten. Es ist unordentlich und mehr als ein bisschen verwirrend, weiß ich.
Fügen Sie der JSFL-Funktion einen einfachen Trace hinzu, um sicherzustellen, dass dies funktioniert:
Funktion makeButtonFromText (downColor) fl.trace ("color:" + downColor); if (fl.getDocumentDOM (). selection.length == 1) (Da es sich oberhalb der Auswahlbedingung befindet, können Sie die Ablaufverfolgung sehen, ohne dass Sie etwas Text einfügen müssen.)
Ich habe es mit Schwarz und dann mit Weiß ausprobiert, und im Ausgabebereich wurde Folgendes angezeigt:
Farbe: 0
Farbe: 16777215
Sieht aus, als würde es für mich funktionieren.
Um herauszufinden, welche JSFL zum Ändern der Textfarbe verwendet werden soll, verwenden Sie den Trick aus dem JSFL-Tut. Klicken Sie auf "Alle auswählen", ändern Sie die Füllfarbe und sehen Sie sich den Code im Verlaufsfenster an:
fl.getDocumentDOM (). selectAll (); fl.getDocumentDOM (). setFillColor ('# 009999'); Oh, oh. Müssen wir die Uint-Farbe, die wir vom ColorPicker erhalten haben, in einen HTML-String konvertieren? Zum Glück nein; Die Hilfeseite document.setFillColor () sagt uns, dass wir beide Formate verwenden können.
Wir müssen also nur das neue Skript an der richtigen Stelle einfügen. Da der Rahmen "Down" der dritte ist, sollten Sie ihn nach dem zweiten einfügen convertToKeyframes () Anruf:
fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). selectAll (); // neue Zeile fl.getDocumentDOM (). setFillColor (downColor); // neue Zeile fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, oben: textTop, rechts: textRight, unten: textBottom, 0); Das funktioniert:
Einen neuen ColorPicker hinzufügen (overColorPicker) und Label, damit der Benutzer die Farbe des Textes "Über" ändern kann:
Ändern Sie die Signatur der JSFL-Funktion, um diese andere Farbe zu akzeptieren:
Funktion makeButtonFromText (overColor, downColor)
Während wir die JSFL-Funktion bearbeiten, können Sie auch das Skript hinzufügen, um die Farbe des Zustands "Über" zu ändern:
fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). selectAll (); fl.getDocumentDOM (). setFillColor (overColor); Nun ändern wir den Aufruf in MMExecute () in der AS3 so, dass er die "Over" -Farbe weitergibt:
MMExecute ("fl.runScript" (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'), "+ overColorPicker.selectedColor.toString () +", "+ downColorPicker.selectedColor.toString" ) "); … Ugh. Das ist zu unordentlich und es wird noch schlimmer. Wie können wir das beheben??
Steven Sacks und Steven Hargrove hatten eine nette kleine Funktion, um diesen Anruf zu erleichtern. Ich habe es hier angepasst:
private Funktion runButtonizeScript (… args): String if (args.length> 0) MMExecute zurückgeben ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + args ") .join (",") + ");"); else return MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); So können wir jetzt anrufen:
private Funktion onClickTheButton (a_event: MouseEvent): void runButtonizeScript (overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Viel ordentlicher!
Neue Komponenten hinzufügen:
Signatur der JSFL-Funktion ändern:
Funktion makeButtonFromText (upColor, overColor, downColor)
Ändern Sie die Farbe des Textes durch JSFL:
fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). selectAll (); fl.getDocumentDOM (). setFillColor (upColor); Übergeben Sie der AS3 die Farbe "Up" an JSFL:
private Funktion onClickTheButton (a_event: MouseEvent): void runButtonizeScript (upColorPicker.selectedColor.toString (), overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Probier es aus:
Brillant. Nur noch eines übrig.
Die Chancen stehen gut, dass der Benutzer für mindestens einen der drei Zustände bei der ausgewählten Farbe bleiben möchte. Wir starten jedoch alle drei ColorPicker mit Schwarz als der ausgewählten Farbe.
Jetzt müssen wir die vorhandene Füllfarbe aus dem Textobjekt abrufen und mithilfe von JSFL an das Bedienfeld übergeben. Anschließend können Sie mit AS3 die Farbe der ColorPicker ändern. Es ist wirklich das Gegenteil von dem, was wir getan haben.
Wo sollten wir in unserem AS3-Code jedoch die Farbe unserer Kommissionierer festlegen? Ich sehe drei Möglichkeiten:
Fügen Sie dem Buttonizer einen neuen Button mit der Bezeichnung "Set Defaults" hinzu. Geben Sie einen Instanznamen von setDefaults.
Zurück in Buttonizer.as:
öffentliche Funktion Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); setDefaults.addEventListener (MouseEvent.CLICK, onClickSetDefaults); private Funktion onClickSetDefaults (a_event: MouseEvent): void
Nur um sicherzustellen, dass dies funktioniert, wenn wir die richtigen Daten haben:
private Funktion onClickSetDefaults (a_event: MouseEvent): void var defaultColor: int = 0x000000; // black upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;
Stellen Sie sicher, dass dies funktioniert, indem Sie einige zufällige Farben festlegen und dann auf die Schaltfläche Set Defaults klicken. Es sollte sie alle auf schwarz zurücksetzen.
Die MMExecute () - Funktion gibt den Rückgabewert jeder durchgeführten Funktion zurück. (Wenn mehrere Funktionen ausgeführt werden, wird der Rückgabewert der letzten zurückgegeben.)
Um die Farbe des ausgewählten Textes zu erhalten, können Sie die JSFL-Funktion document.getCustomFill ('selection') verwenden. Dies gibt ein Fill-Objekt zurück, dessen Farbe Eigentum ist das, was wir brauchen. So können wir die Farbe so erhalten:
MMExecute ("document.getCustomFill ('selection') .color"); Das ist eigentlich nicht ganz das, was wir wollen, da es die Farbe im CSS-String-Format zurückgibt: "# AA43E2" zum Beispiel. Ich habe etwas zusätzlichen Code geschrieben, um das in das uint-Format umzuwandeln, das wir brauchen:
private Funktion onClickSetDefaults (a_event: MouseEvent): void var cssFormatDefaultColor: String = MMExecute ("document.getCustomFill ('selection') .color"); cssFormatDefaultColor = cssFormatDefaultColor.replace ("#", "0x"); var defaultColor = uint (cssFormatDefaultColor); upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor; Probieren Sie es aus:
Genial :)
Schau zurück, was du gelernt hast. Sie können jetzt in Flash eigene Panels erstellen, JSFL-Befehle und -Skripts ausführen, Daten von einem Panel an die Bühne übergeben und sogar Daten von der Bühne abrufen, die im Panel verwendet werden sollen. Glückwunsch!
