Javascript und ActionScript Converse Einführung in ExternalInterface

ActionScript und Javascript. Beide Sprachen sind für sich großartig, aber haben Sie sich jemals gefragt, was Sie tun könnten, wenn sie miteinander reden könnten? Nun, du hast Glück! An dieser Stelle kommt die ExternalInterface-Klasse ins Spiel. Folge mir, während ich dir die Grundlagen beibringe.

Foto von Dave Spellman.

Schritt 1: Die ExternalInterface-Klasse

Wo kann ich es benutzen??

Derzeit ist die ExternalInterface-Klasse in den folgenden Browsern verfügbar:

Internet Explorer 5.0+
Netscape 8.0+
Mozilla 1.7.5+
Firefox 1.0+
Safari 1.3+

Was kann ich damit machen??

Mit der ExternalInterface-Klasse können Sie:

Rufen Sie eine beliebige JavaScript-Funktion in ActionScript auf.
Rufen Sie eine beliebige ActionScript-Funktion über Javascript auf.
Übergeben Sie Argumente und Parameter zwischen den beiden.
Erhalten Sie einen Rückgabewert von einer Javascript-Funktion.
Einen Wert an eine Javascript-Funktion zurückgeben.

Schritt 2: Erstellen Sie unsere HTML-Seite

Wir werden gleich darauf einsteigen und mit einem wirklich grundlegenden Beispiel beginnen. Zuerst müssen wir unsere HTML-Seite erstellen. Starten Sie also Ihren bevorzugten HTML-Editor und lassen Sie uns beginnen. Erstellen Sie ein Formular in Ihrem HTML-Code.

     ExternalInterface-Test 1     Text aus Flash

Schritt 3: SWF-Referenzierungsfunktion

Um die SWF-Datei einfach in unserem HTML-Code zu referenzieren, erstellen wir eine Javascript-Funktion, damit wir die SWF-Datei in unserem Code referenzieren können. Um dies zu erreichen, platzieren Sie dieses Skript zwischen den "head" -Tags.

Diese Funktion gibt die SWF zurück, die als Parameter der flashMovie () - Funktion übergeben wird. Zum Beispiel "flashMovie ('testMovie');" würde den SWF mit einer ID von 'TestMovie' zurückgeben.

Schritt 4: Erstellen Sie eine Funktion zum Empfangen von Werten aus ActionScript

Jetzt erstellen wir eine Javascript-Funktion, die einen Wert aus ActionScript akzeptiert. Platziere dies in unserem bereits erstellten Skript
Stichworte.

 Funktion sendToJS (value) document.forms ["myForm"]. output.value = value;

Dies nimmt den Wert an, den wir aus dem ActionScript erhalten, und fügt ihn in unserem Textfeld mit der ID "output" ein..

Schritt 5: Öffnen Sie Flash

Lassen Sie uns Flash öffnen und mit dem ActionScript arbeiten. Erstellen Sie eine neue ActionScript 3.0-Datei und erstellen Sie eine neue Dokumentklasse mit dem Namen "EIFace1"..

Schritt 6: Richten Sie die Dokumentenklasse ein

Ich verwende FDT, um EIFace.as zu schreiben, aber Sie können gerne jeden ActionScript-Editor verwenden, mit dem Sie sich wohl fühlen. Wir beginnen mit der Erstellung einer Standard-Dokumentenklassen-Shell.

 package import flash.display.Sprite; / ** * @author kreativeKING * / public class EIFace1 erweitert Sprite öffentliche Funktion EIFace1 ()

Schritt 7: Erstellen Sie unser Textfeld

Erstellen Sie das Textfeld, das wir zum Senden unserer Werte verwenden werden.

 Feld1 = neues Textfeld (); field1.type = TextFieldType.INPUT; Feld1.Weite = 300; Feld1.Höhe = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (Feld1);

Schritt 8: Erstellen Sie eine Send-Schaltfläche

Erstellen Sie eine Schaltfläche zum Klicken. Ich bin kein Fan von Komponenten, daher werde ich mit Flash IDE eine Schaltfläche von Grund auf neu erstellen. Sie können auch einfach eine Box erstellen oder die SimpleButton-Komponente verwenden. Ich lasse Sie diese kreativen Säfte verwenden. Wenn Sie beim Erstellen einer Schaltfläche keine weitere Hilfe benötigen, können Sie mit Schritt 11 fortfahren.

Erstellen Sie zunächst ein Rechteck mit dem Rechteckgrundelement. Ich werde keine spezifischen Werte angeben, sondern nur das Gefühl haben, wie es Ihnen gefällt.

Schritt 9: Fahren Sie mit der Button-Erstellung fort

Konvertieren Sie das Rechteck in einen MovieClip.

Erstellen Sie eine neue Ebene im MovieClip und platzieren Sie den Text "Send To JS".

Schritt 10: Für ActionScript exportieren

Gehen Sie in Ihre Bibliothek, klicken Sie mit der rechten Maustaste auf die Schaltfläche, und exportieren Sie für ActionScript.

Schritt 11: Code in der Schaltfläche

Wir werden unseren Button in unsere Document Class einbinden.

 button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = Feld1.y + 30; stage.addChild (button1);

Schritt 12: Wo sind wir jetzt?

So sollte Ihre HTML-Seite jetzt aussehen.

     ExternalInterface-Test 1      Text aus Flash

Die Dokumentenklasse sollte so aussehen.

 package import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @author kreativeKING * / public class EIFace1 erweitert Sprite private var field1: TextField; private var button1: MovieClip; öffentliche Funktion EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; Feld1.Weite = 300; Feld1.Höhe = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (Feld1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = Feld1.y + 30; stage.addChild (button1);

Schritt 13: Erstellen Sie ActionScript für die Javascript-Funktion

Nun müssen wir die Funktion erstellen, die die Daten von Flash an Javascript sendet. Dies wird eine einfache Funktion sein, die sendet
ein Faden.

 button1.addEventListener (MouseEvent.CLICK, sendToJS); private Funktion sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

Zuerst fügen wir unserem Button in unserem Document Classes-Konstruktor einen Event-Listener hinzu. Dann erstellen wir unseren Zuhörer. Das ExternalInterface.available Diese Eigenschaft prüft, ob unser Browser die ExternalInterface-Klasse verwenden kann. Dies ist nicht unbedingt erforderlich, da wir wissen, dass unser Browser dies unterstützen kann, es ist jedoch eine gute Vorgehensweise für die Entwicklung für das Web. Wir sind nie sicher, ob der Client-Browser kompatibel ist.

Das ExternalInterface.call () Funktion nennen wir unsere Javascript-Funktion. Der erste Parameter ist der Name der Javascript-Funktion, die wir aufrufen möchten. Es ist der Name unserer Funktion in Javascript als Zeichenfolge. Der zweite Parameter ist der Wert, den wir an die Javascript-Funktion übergeben möchten. In diesem Fall übergeben wir den Wert unseres Textfelds.

Hinweis: Sie können beliebig viele Parameter übergeben, der erste Parameter muss jedoch der Name der Javascript-Funktion sein.

Schritt 14: Testzeit

Bevor wir testen können, müssen wir zuerst unsere SWF-Datei in den HTML-Code einbetten. Ich muss betonen, dass es am besten ist, SWFObject zu verwenden und nicht die Standardmethode, die Flash zum Einbetten von SWF-Dateien verwendet. Lassen Sie uns unsere SWF-Datei veröffentlichen, SWFObject einrichten und unsere Datei einbetten.

Hier ist der SWFObject Embed-Code, der in den Kopf der HTML-Datei eingefügt wird:

Es ist auch wichtig, dass Sie der SWF eine ID geben. Dies ist wichtig, wenn Sie das ExternalInterface verwenden und es mit der zuvor erstellten Javascript-Funktion anvisieren. Erstellen wir unser Div, in dem die SWF-Datei gespeichert wird.

  Dies wird durch eine SWF-Datei ersetzt. Wenn nicht, müssen Sie Ihren Flash Player aktualisieren.

Hier sind die Dokumentenklasse und die HTML-Datei bis zu diesem Punkt:

 package import flash.external.ExternalInterface; import flash.events.MouseEvent; import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @author kreativeKING * / public class EIFace1 erweitert Sprite private var field1: TextField; private var button1: MovieClip; öffentliche Funktion EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; Feld1.Weite = 300; Feld1.Höhe = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (Feld1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = Feld1.y + 30; stage.addChild (button1); button1.addEventListener (MouseEvent.CLICK, sendToJS);  private Funktion sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

     ExternalInterface-Test 1       Dies wird durch eine SWF-Datei ersetzt. Wenn nicht, müssen Sie Ihren Flash Player aktualisieren.
 
   Text aus Flash

Öffnen Sie jetzt Ihren HTML-Wrapper und testen Sie ihn. Sie sehen, dass der Wert des Textfelds in Flash der Wert im Textfeld in unserem HTML-Code ist. Auf einen Blick ist der Code dahinter ziemlich einfach und unkompliziert. Versuchen wir nun, einige Informationen von Javascript an ActionScript zu senden.

Schritt 15: Zusätzliche Felder erstellen

Wir werden zusätzliche Felder erstellen, um Informationen von Javascript an ActionScript zu senden.

 Senden Sie Text an Flash

 Feld2 = neues Textfeld (); field2.type = TextFieldType.DYNAMIC; Feld2.Weite = 300; Feld2.Höhe = 20; field2.border = true; field2.borderColor = 0x565656; field2.background = true; field2.backgroundColor = 0xEFEFEF; field2.defaultTextFormat = new TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; Feld2.y = Feld1.y - 50; stage.addChild (Feld2);

Schritt 16: Erstellen Sie die JavaScript-to-ActionScript-Funktion

Wir müssen eine Funktion erstellen, die den Wert aus unserem HTML-Code an Flash sendet. Diese Funktion ähnelt der von uns erstellten Funktion zum Senden von Werten aus ActionScript an Javascript.

 Funktion sendToFlash (Wert) flashMovie ("EIFace"). sendToFlash (Wert);

Wir verwenden die zuvor erstellte Funktion, um auf die eingebettete SWF-Datei zu verweisen. Nun müssen wir in unsere Dokumentenklasse gehen und Flash so einrichten, dass Werte von Javascript empfangen und eine neue Funktion erstellt werden, die von Javascript aufgerufen wird.

Schritt 17: Rückrufe hinzufügen

Um Javascript-Funktionen zu registrieren, müssen wir Rückrufe hinzufügen, damit Flash weiß, was wir senden möchten, wenn wir eine ActionScript-Funktion aufrufen. Beginnen wir endlich mit dem Aufruf von ActionScript.

 private Funktion addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS);

Das ExternalInterface.addCallback () function registriert eine Funktion in ActionScript, die von Javascript aufgerufen werden soll. Der erste Parameter ist der Funktionsname, unter dem Javascript die Funktion kennt. Der zweite Parameter ist die eigentliche Funktion.

Einfach ausgedrückt bedeutet dies in unserem Javascript, wir würden sendToFlash () aufrufen, und das würde die fromJS () - Funktion in ActionScript aufrufen.

Schritt 18: fromJS () erstellen

Jetzt erstellen wir die fromJS () - Funktion. Dies ist eine sehr einfache Funktion, die den übergebenen Wert dem Textfeld zuweist.

 private Funktion fromJS (value: String): void field2.text = value;

Zeit für einen weiteren Test und sehen, was uns erwartet. So sehen die Dokumentenklasse und der HTML-Code jetzt aus:

 package import flash.external.ExternalInterface; import flash.events.MouseEvent; import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @author kreativeKING * / public class EIFace1 erweitert Sprite private var field1: TextField; private var button1: MovieClip; privates var Feld2: TextField; öffentliche Funktion EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; Feld1.Weite = 300; Feld1.Höhe = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (Feld1); Feld2 = neues Textfeld (); field2.type = TextFieldType.DYNAMIC; Feld2.Weite = 300; Feld2.Höhe = 20; field2.border = true; field2.borderColor = 0x565656; field2.background = true; field2.backgroundColor = 0xEFEFEF; field2.defaultTextFormat = new TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; Feld2.y = Feld1.y - 50; stage.addChild (Feld2); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = Feld1.y + 30; stage.addChild (button1); button1.addEventListener (MouseEvent.CLICK, sendToJS); addCallbacks ();  private Funktion addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS);  private Funktion fromJS (value: String): void field2.text = value;  private Funktion sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

     ExternalInterface-Test 1       Dies wird durch eine SWF-Datei ersetzt. Wenn nicht, müssen Sie Ihren Flash Player aktualisieren.
 
   Senden Sie Text an Flash   
 
 Text aus Flash

Schritt 19: Ergebnisse

Wenn Sie Text in unser neuestes Feld einfügen und "Senden" drücken, wird der Wert in das Flash-Textfeld gesendet. Die Verwendung der ExternalInterface-Klasse ist sehr einfach und kann beim Erstellen von APIs und Anwendungen nützlich sein, die außerhalb des Flash-Films bearbeitet werden können. Dies kann zum Beispiel in Video Player-APIs zum Erstellen und Steuern des Videos mit Javascript implementiert werden.

Schritt 20: Wer verwendet klassisch Javascript mehr??

Für die meisten Leute draußen verwendet eigentlich niemand klassisches Javascript. jQuery ist die Welle der Zukunft. Hier ist ein Beispiel für die Verwendung von jQuery anstelle von klassischem Javascript.

Hier ist der neue und aktualisierte HTML-Code für die Verwendung mit jQuery:

     ExternalInterface-Test 1        Dies wird durch eine SWF-Datei ersetzt. Wenn nicht, müssen Sie Ihren Flash Player aktualisieren.
 
   Senden Sie Text an Flash   
 
 Text aus Flash

Fazit

Hoffentlich haben Sie jetzt ein besseres Verständnis für die ExternalInterface-Klasse. Wenn Sie Fragen oder Ideen haben, was Sie sonst noch lernen möchten, schreiben Sie mir einfach einen Kommentar oder tweeten Sie mich und ich werde sehen, was ich tun kann. Ich hoffe, dass Sie die Konzepte gelernt haben und in Ihren eigenen Projekten einsetzen. Danke fürs Lesen!

kreativeKING

Code