Werte aus Flash an PHP und JavaScript, und umgekehrt senden

Dieses Tutorial soll euch zeigen, auf welche Weise ihr Werte aus Flash an PHP und JavaScript, und umgekehrt senden könnt. Dies ist z.B. sehr nützlich, wenn man ein Karten-System (ähnlich Map24) mittels PHP, MySQL und Flash realisieren möchte oder aber ein Bannerrotator, bei dem man Flashbanner einbinden und über den Flashbanner einen "Layer" (in Flash "Ebene") legen möchte, um z.B. immer zu gewährleisten, dass der Klick auf das Banner gezählt wird. Ich werde euch anhand eines Beispiels zeigen, wie ich das meine und wie das geht ;-)

Download zum Tutorial unter : Flash_PHP_tut45.zip

Tutorial-Übersicht

• Werte von HTML an Flash
• Werte von JavaScript an Flash
• Werte von Flash an JavaScript
• Werte von PHP an Flash
• Werte von Flash an PHP
• Beispiel Flashbanner

Werte von HTML an Flash

Werte von HTML an Flash senden ist kinderleicht. Beim Einbinden der Flashappi kann man einfach an den Dateinamen die Variablen und Werte "dranhängen".

Beispiel HTML-Code:

In Flash erstellt ihr jetzt mittels des Textwerkzeugs (T) zwei Textfelder. Wählt nun ein Textfeld aus, klickt unten auf Eigenschaften (ist in der Regel vorausgewählt) und wählt in der DropDownListe "Eingabetext" aus. Nun tragt weiter rechts bei "Var:" "test_1" ein. Das gleiche macht ihr auch mit dem anderen Textfeld, nur trag dort bei "Var:" "test_2" ein. Nun klickt in die Zeitleiste auf das erste Schlüsselbild mit der rechten Maustaste und klickt auf "Aktionen". Fügt in dem Fenster nun den Beispiel Code ein.

Beispiel ActionScript:

Wenn ihr nun alles richtig gemacht habt (das ihr die Flashdatei erstellt habt setze ich jetzt mal voraus...) dann steht beim Aufrufen eurer HTML-Seite, wo ihr den HTML-Code von oben drinnen stehen habt, in dem ersten Textfeld "mein_wert" und in dem zweiten Textfeld "12345".
Steht es da? Ja? Wirklich? Sehr gut, prima!

Werte von JavaScript an Flash

Werte von JavaScript an Flash senden bringt mehrere Probleme mit sich. Zum einen ist da Opera, der das standardmäßig nicht unterstützt und zum anderen machen euch vermutlich die Sicherheitseinstellungen in Flash einen Strich durch die Rechnung. Denn wenn man mittels JavaScript Werte an Flash senden möchte, dann muss man (der User) im Einstellungsmanager von Flash (http://www.macromedia.com/support/documentation/de/flashplayer/help/settings_manager04.html) bei den Globalen Sicherheitseinstellungen entweder "Immer fragen", "Immer zulassen" auswählen oder bei "Diesen Dateien und Ordnern immer vertrauen" die Adresse eurer Website eintragen.
Gehen wir aber jetzt mal davon aus, dass alle nötigen Einstellungen gegeben sind und fahren mit folgendem HTML-Code fort.

Beispiel HTML-Code:

Kurze Erklärung:
var flashId - hier gebt ihr die Id des Objekts an. Ich habe das für euch mal im HTML-Code farblich hervorgehoben.
flashobj(flashId) - diese Funktion benötigen wir, damit die Kommunikation zwischen JavaScript und Flash in Firefox und InternetExplorer funktioniert.
setFlashVar(flash_variable, flash_value) - diese Funktion benutzen wir, um eine bestimmte Variable in Flash einen bestimmten Wert zu übergeben. Um jetzt z.B. unsere vorhin erstellten Textfelder über diese Funktion zu füllen, probiert mal folgenden HTML-Code aus.

Beispiel HTML-Code:

Wenn ihr alles richtig gemacht habt, dann müsste beim Anklicken der beiden Links der Inhalt der beiden Textfelder ausgetauscht bzw. gesetzt werden.

Werte von Flash an JavaScript

Mittels ActionScript ist es in Flash möglich, ein neues Fenster zu öffnen und eine Website zu laden. Die Funktion dafür lautet in ActionScript getURL();. Diese Funktion kann man aber auch dazu benutzen, eine JavaScript Funktion, die irgendwo im Quelltext steht, wo auch die Flashappi eingebunden ist, aufzurufen. In Flash erstellt ihr jetzt einfach mal mit dem Rechteckwerkzeug (R) ein kleines Rechteck, markiert es und drückt F8 (oder Menüleiste->Modifzieren->In Symbol konvertieren). Hier wählt ihr nun bei Typ "Schaltfläche" aus. Klickt nun mit dem Auswahlwerkzeug (V) auf eure Schaltfläche, dann rechte Maustaste "Aktionen". Es ist wichtig, dass ihr die Schaltfläche (also euer Rechteck) vorher ausgewählt habt und die "Aktionen" sich auf eure Schaltfläche beziehen und nicht auf das Schlüsselbild. Fügt in dem Fenster nun den Beispiel Code ein.

Beispiel ActionScript:

Beispiel HTML-Code:

Habt ihr alles richtig gemacht, dann erscheint nach dem Anklicken der Schaltfläche ein Dialogfenster mit dem Text "Dieser Wert kommt von Flash".

Werte von PHP an Flash

Um Werte von PHP nach Flash zu bekommen gibt es leider nur eine, meiner Meinung nach, umständliche Variante. Das Problem ist, dass Flash zwar Daten einlesen kann, diese jedoch in Form eines URL-Strings kommen müssen. Ob es in Flash 8 mittlerweile eine andere Variante gibt ist mir nicht bekannt und die Variante, die ich euch zeige ist die einzigste, die ich kenne und die ab Flash 6 funktioniert. Okay, fangen wir an. Erstellt jetzt wieder mittels dem Textwerkzeug (T) zwei Textfelder. Wählt nun ein Textfeld aus, klickt unten auf Eigenschaften und wählt in der DropDownListe "Eingabetext" aus. Nun tragt weiter rechts bei "Var:" "test_3" ein. Das gleiche macht ihr auch mit dem anderen Textfeld, nur trag dort bei "Var:" "test_4" ein. Klickt nun in die Zeitleiste auf das erste Schlüsselbild mit der rechten Maustaste und klickt auf "Aktionen". Fügt in dem Fenster nun den Beispiel Code ein.

Beispiel ActionScript:

Kurze Erklärung:
In der ersten Zeile erzeugen wir ein Objekt der LoadVars-Klasse. .onLoad wird aufgerufen, sobald ein .load Vorgang beendet ist. Bei LoadVarObject.load(); übergeben wir werte.php als Quelle, aus der die Variablen geladen werden sollen. Ist der Vorgang erfolgreich beendet, dann sind die Variablen _root.test_3 und _root.test_4 mit den Werten aus werte.php "gefüllt". Erstellt nun eine Datei namens werte.php und fügt dort den Beispiel Code ein.

Beispiel PHP-Code:

Habt ihr alles richtig gemacht, dann steht in euren beiden neuen Textfelder "9876" und "Von PHP nach Flash".

Werte von Flash an PHP

Diese Variante ist der "Werte von Flash an Javascript" Variante sehr sehr ähnlich. Der einzige Unterschied ist eigentlich nur der, was man bei getURL(); angibt. Klickt auf die Schaltfläche, die ihr vorhin erstellt habt, mit der rechten Maustaste und wählt "Aktionen" aus. Löscht dort den ActionScript und fügt den Beispiel Code ein.

Beispiel ActionScript:

Kurze Erklärung:
Als erstes übergeben wir getURL(); den Pfad zu "werte_2.php", vorhin war an dieser Stelle unser "javascript:". Als zweites übergeben wir das Ziel, nämlich "php_iframe", so wird unser IFrame heißen, den wir gleich erstellen werden. Statt "php_iframe" könntet ihr auch "_blank", "_top" oder dergleichen eintragen, doch in diesem Beispiel wollen wir, dass uns "werte_2.php" die Werte anzeigt, die wir mittels Flash an PHP senden, deshalb auch der IFrame. Wir benötigen nun den IFrame, benutzt dazu den Beispiel Code.

Beispiel HTML-Code:

Erstellt nun eine Datei namens werte_2.php und fügt dort den Beispiel Code ein.

Beispiel PHP-Code:

"Habt ihr alles richtig gemacht, dann"... :-) ...dann steht im IFrame "test_3=9876" und "test_4=Von PHP nach Flash".

Beispiel Flashbanner

Ich habe am Anfang des Tutorials ja davon erzählt, wie man mittels Layer in Flash gewährleisten kann, dass ein Klick auf einen Banner immer gezählt wird. Diese Technik, die ich jetzt beschreiben werde, verwende ich zur Zeit in meinem BannerAdManagement-System, welches sich noch im Beta-Stadium befindet (Stand: 08.12.2005).
Fangen wir einfach mal damit an und erstellen in Flash ein neues Flash-Dokument, die Größe sollte 468x60 Pixel sein. Nun klickt in die Zeitleiste auf das erste Schlüsselbild mit der rechten Maustaste und klickt auf "Aktionen". Fügt in dem Fenster nun den Beispiel Code ein.

Beispiel ActionScript:

Kurze Erklärung:
Mit der Funktion loadMovie(); können wir in Flash dynamisch eine andere Flashdatei nachladen. Der Pfad zu dieser Flashdatei kommt aus der Variable "_root.f_MoviePath", diese Variable werden wir später im HTML-Code an Flash übergeben.
Erstellt nun in Flash eine Weitere Ebene. Klickt dazu entweder auf das "Ebenen einfügen"-Symbol bei der Zeitleiste oder erstellt sie über "Menüleiste->Einfügen->Zeitleiste->Ebene". Die neu erstellte Ebene muss über der alten Ebene in der Zeitleiste stehen. Wählt die neue Ebene nun aus klickt dann auf das Rechteckwerkzeug (R). Zeichnet nun ein Rechteck, dass so groß wie das Flashmovie ist (also 468x60 Pixel). Markiert das neue Rechteck und drückt F8 (oder Menüleiste->Modifzieren->In Symbol konvertieren). Hier wählt ihr nun bei Typ "Schaltfläche" aus. Klickt nun mit dem Auswahlwerkzeug (V) auf eure Schaltfläche, dann rechte Maustaste "Aktionen". Fügt in dem Fenster nun den Beispiel Code ein.

Beispiel ActionScript:

Kurze Erklärung:
_root.f_gotoURL - hier soll unser Pfad zur PHP-Datei, die den "Klick" des Banners zählen soll eingetragen.
_root.f_banner_url - hier kommt die URL rein, auf die weitergeleitet werden soll, wenn der "Klick" gezählt wurde.
_root.f_banner_id - Die ID des Banners, um den "Klick" einem Banner zuteilen zu können.
Diese Variablen müssen wir nun der Flashdatei übermitteln. Dazu verwenden wir die "Werte von HTML an Flash"-Methode. Benutzt nun folgenden Beispiel Code.

Beispiel HTML/PHP-Code:

Kurze Erklärung:
Wir nutzen die "Werte von HTML an Flash"-Methode und übermitteln die Werte an die Flashdatei. Zusätzlich müssen wir den Wert für "f_banner_url" mittels der PHP-Funktion urlencode codieren, damit Flash die URL an die count_click.php Datei übermitteln kann. Dann übergeben wir noch die f_banner_id, damit die count_click.php Datei auch den Klick einen Banner zuteilen kann.
Geht nun zurück in eure Flashdatei und wählt die oberste Ebene aus (die, wo ihr zuletzt ein Rechteck gezeichnet habt) und klickt unten auf Eigenschaften, dann wählt in der DropDownListe bei Farbe: "Alpha" aus und setzt den Wert auf 0%. Speichern, SWF-Datei erstellen und fertig.
Diese Methode hat jedoch einen Nachteil. Dadurch, dass wir einen Layer (Ebene) komplett über die geladene Flashdatei legen und daraus eine Schaltfläche machen, können eventuell in der geladenen Flashdatei vorhandene Schaltflächen nicht mehr über die Maus ausgewählt werden. Falls ihr aber nur normal Flashbanner in Form einer Animation habt, dann ist das eine Prima Methode, den Klick zu zählen.

In meinem BannerAdManagement-System werden noch weitere Werte meiner Flashdatei übergeben und meine Flashdatei passt sich der Größe der geladenen Flashdatei an. Wenn euch das weiter interessieren sollte, dann besucht doch www.4webmaster.net und ladet euch das BannerAdManagement-System (B5) herunter. Dort könnt ihr euch meine Flashdatei ansehen und auch verwenden, falls ihr das wollt (beachtet die Lizenzbestimmungen). Wenn jetzt noch Fragen offen sind, dann stellt sie im PHP-Resource Forum. Ein entsprechender Thread sollte dort existieren, in dem ihr eure Fragen posten könnt. Also bitte tut den Mods was gutes und erstellt nicht für jede Frage zu diesem Tutorial einen neuen Thread.

Ich hoffe das Tutorial hat euch gefallen und geholfen. Falls ja und ihr weitere Tutorial-Vorschläge habt, dann schreibt mir eine E-Mail. Wenn ich dann mal wieder Zeit haben sollte, schreibe ich vielleicht eins ;-)
Gruß
Benny(-one)