ExternalInterface: Kommunikation zwischen ActionScript und JavaScript mit SWFObject

Die ExternalInterface Klasse von Flash ist eine Programmier-Schnittstelle, die die Kommunikation zwischen ActionScript und der „Außenwelt“ (z.B. einer HTML-Seite mit JavaScript) ermöglicht.

Ein kurzes Beispiel zeigt, wie die Kommunikation in beide Richtungen mithilfe des populären SWFObjects funktioniert.

ExternalInterface Klasse

Damit man von „extern“ (also aus dem JavaScript-Code) Funktionen in Flash ausführen kann, muss man die entsprechenden Funktion explizit in ActionScript definieren. Erst dann sind diese von außen erreichbar. Dazu dient die Funktion addCallback der ExternalInterface-Klasse.

Die addCallback-Methode erwartet zwei Parameter: Der erste ist der Name der Funktion, wie sie für den Zugriff aus JavaScript heißen soll. Der zweite Parameter ist die tatsächliche ActionScript-Funktion, die beim Aufruf ausgeführt werden soll.

Ein Beispiel: Mit ExternalInterface.addCallback("setTextField", setTF); wird eine Funktion mit dem Namen setTextField definiert, die durch JS erreichbar ist. Intern wird dann die AS-Funktion setTF ausgeführt.

[as]
function setTF(name:Object):void {
myText.text = name.inputValue;
}
ExternalInterface.addCallback(„setTextField“, setTF);
[/as]

Möchte man übrigens Werte an JavaScript zurückliefern, geschieht dies wie gewohnt über den return-Befehl am Ende der Funktion.

SWFObject und JavaScript

Nun gilt es, die Funktion innerhalb der HTML Seite auszuführen. Dazu kommt JavaScript in Verbindung mit SWFObject zum Einsatz.

Der relevante JS-Codeschnippsel lautet:

[as]
var obj = swfobject.getObjectById(„myFlash“);
if (obj && typeof obj.setTextField != „undefined“) {
var customObj = {
inputValue: document.getElementById(„myInput“).value,
sonstiges: „Weitere parameter“
};
obj.setTextField(customObj);
document.getElementById(„myInput“).value =““;
[/as]

Zuerst stellt mein eine Referenz zu dem div her, der den Flashcontent enthält: var obj = swfobject.getObjectById("myFlash"). Dies ist der gleiche div wie im eigentlichen SWFObject-Aufuruf swfobject.embedSWF("externalinterface.swf", "myFlash", ….

Die if-Abfrage prüft, ob die Referenz erfolgreich war und ob es die Methode setTextField gibt.

Danach wird ein Objekt customObj erstellt, das mit mehreren Instanzeigenschaften gefüllt wird. In diesem Beispiel hätte es auch ein einfacher String statt eines Objekts getan. Ich wollte jedoch gleich die Verwendung eines Objekts zeigen, da dies eine praktische Methode ist, eine Vielzahl ein Informationen auf einmal zu übergeben.

obj.setTextField(customObj) startet nun die Funktion in ActionScript und übergibt als Parameter des gerade erstellte Objekt.

Beispiel: JS <>AS

Das folgende Beispiel hat zwei Textfeldern, eines in Flash und eines in HTML. Über die zwei Buttons lassen sich die Werte des Textfeld hin- und herkopieren.

Link: Beispiel anschauen
Link: Download (Quellcode)

[ad]

16 Gedanken zu „ExternalInterface: Kommunikation zwischen ActionScript und JavaScript mit SWFObject“

  1. Noch ein hilfreicher Tipp:
    Führt man Flashdateien mit ExternalInterface lokal aus, kann es zu Sicherheitsmeldungen kommen (Security-Sandbox).

    Dies kann man so abfangen:
    if (Security.sandboxType != Security.LOCAL_WITH_FILE) { … ExternalInterface.addCallback …

    Das ExternalInterface wird dann nicht aktiviert, weshalb keine Fehlermeldung entsteht.

  2. Hallo,

    sollte es damit nicht auch möglich sein, aus einer Flashanwendung einen VLC Player zu bedienen, die beide in einer HTML Seite eingebettet sind?

  3. Hi,

    ja schon, auch auch innerhalb einer HTML Seite. Gibt es da keine Probleme mit der Security Sandbox ?

    Ich stelle mit vor, oben in der HTML eine VLC embedded, und unten drunter ein Flash Aktions SWF, der obiges VLC steuert.

    .. mhhh.

    Aufjedenfall hilfreiche Anleitung von Dir. Danke-

    Gruß cHrIsZ

  4. Hallo,
    vielleicht kannst du mir helfen… habe einen Flashfilm gebaut über den man eine Thickbox aufrufen kann. (Testfilm: http://www.alice-dsl.net/testlion)
    Der Film ist allerdings so groß, dass die Thickbox einfach zu langsam reagiert. Deshalb wäre es sinnvoll den Film anzuhalten, sobald sich die Thickbox öffnet, und erst beim Schließen der Thickbox weiterläuft.
    Jetzt habe ich mir zwar sämtliche Themen über External.Interface etc. durchgelesen, muss aber gestehen, dass ich es troztdem noch nicht geschafft habe, dass alles zum Laufen zu bringen….
    Vielleicht kannst Du mir ja helfen.
    Vielen Dank im Vorraus

  5. Ich versuche nun seit geraumer Zeit ExternalInterface zum Laufen zu bringen. ExternalInterface.available und ExternalInterface.addCallback() geben mir auf der Website auf ein true zurück. Leider komme ich nicht in die if-Abfrage, da er mir typeof obj.setTextField immer als undefined ausgibt. ich kann leider nicht nachvollziehen, warum er das tut. die funktion ist in frame 1 gesetzt, ebenso wie der aufruf. hast du eventuell einen Tipp? (ich bin verweifelt)

  6. Vielleicht ein Timining-Problem? Führst du den JS-Code erst aus, wenn alles geladen ist? Also z.B. window.onload = function() { …….

  7. hab das selbe problem wie soophie.. bei mir ist das "typeof obj." auch immer leer, ka was ich falsch mache..

  8. @brian:
    Und das Beispiel hier funktioniert bei dir? Welchen Browser verwendet du? Vielleicht funktioniert es nur lokal nicht, aber online?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert