Version 1.6 | Datum 06/10/2009
  mediajournal
 
       
 


Michael Mehling

 

Server-Anbindung von Flash-Filmen mit Macromedia Flash MX

Die von Flash zur Verfügung gestellten Funktionen zur Server-Anbindung von Flash-Filmen



Zusammenfassung

Mit Flash MX hat der Entwickler erweiterte Möglichkeiten zur Server-Anbindung von Flash-Filmen. Diese gestalten die Kommunikation zwischen Client (Flash-Film im Browser) und Server (Serverscript) effizienter und mächtiger als es die bisherigen Versionen von Flash taten. Server-basierte Anwendungen wie dynamische Webseiten, Shops, Front-End auf Flash basierende Content-Management-Systeme, und sogar Real-Time-Multi-User-Games sind in Flash MX gegenüber den vorhergehenden Versionen leichter realisierbar, oder überhaupt erst möglich. Eine Reihe von Verfahren unterstützt die Anbindung von Flash-Filmen an einen Server; diese sollen im vorliegenden Artikel kurz beschrieben werden, wobei der Schwerpunkt auf der Entwicklung des Front-Ends in Flash liegt, auf die Server-seitige Entwicklung wird nicht näher eingegangen.

Allgemeines

Server-Anbindung

fig01: FlashMx-Logo

Möchte man eine Web-Seite anschauen, die einen Flash-Film beinhaltet, so läuft in etwa folgendes ab: Auf der aufgerufenen HTML-Seite befindet sich ein Verweis auf einen Flash-Film, der ebenso wie die HTML-Seite auf dem Server liegt. Nun fordert der Browser diesen Film vom Server an, der geladene Flash-Film kann alle Texte, Bilder, Sounds, MovieClips, etc., die in der swf-Datei enthalten sind, anzeigen. Um aber weitere Flash-Filme oder Daten aus einer Datenbank zu laden, oder um Inhalte aus Formularen an ein Server-Script zu schicken, muss der Flash-Film eine Verbindung zum Server herstellen. Dafür stellt ActionScript dem Entwickler eine Reihe von Funktionen und Objekten zur Verfügung, die im Folgenden beschrieben werden sollen.

fig02: Server-Anbindung

Einschränkung

Eine Einschränkung gilt aus Sicherheitsgründen für alle Verfahren. Es können nur Daten an Server übertragen werden, oder von einem Server empfangen werden, die innerhalb derselben Subdomain wie der Flash-Film liegen.

Die Verfahren GET und POST

Grundsätzlich gibt es zwei verschiedene Verfahren, um einen URL-kodierten String zwischen Client und Server zu übermitteln, dies sind die Methoden GET und POST.
Die Standardmethode für die Abfrage gängiger Webseiten ist die GET-Methode: es wird ein GET-Request mit der gewünschten Seite an den Server geschickt, worauf dieser die angeforderte Seite schickt. Die Daten werden hierbei in einem URL-kodierten String an die Serveradresse gehängt. Nachteil dieser Methode ist, dass die URL durch die verschiedenen Webserver längenbegrenzt ist, somit können keine unbegrenzt großen Daten übertragen werden. Des weiteren können GET- Anfragen vom Proxy-Server gecacht werden, der Browser verwendet dann eventuell alte Daten. Da die Daten an die URL gehängt werden, sind sie sowohl im Browser-Cache als auch in der Adresszeile sichtbar. Dies stellt ein Sicherheitsrisiko bei Übertragung geheimer Daten dar.
Daher ist das POST-Verfahren die bessere Alternative, um einen URL-String zu übermitteln. Der String wird im http-Header an den Server übertragen, und ist somit unsichtbar für Benutzer und Cache des Browsers. Vorteil des POST-Verfahrens ist, dass hier keine Längenbeschränkung für den URL-String besteht und die Daten für den Benutzer unsichtbar bleiben.
Für beide Verfahren gilt: Bei der Übertragung von Daten aus dem Flash-Film zum Server werden die Daten von Flash automatisch in einen String kodiert. Das Serverskript dividiert dann den String wieder in einzelne Variablen auseinander. In umgekehrter Richtung (Server -> Flash) muss das Serverskript die Variablen richtig kodieren, in Flash wird der String automatisch in Variablen umgewandelt.

Die unterschiedlichen Verfahren

getURL

Die Methode getURL sendet Variablen in Form eines URL-kodierten Strings aus einem Flash-Film an ein Serverskript, und lädt anschließend Daten aus dem Serverskript in ein Browser-Fenster oder HTML-Frame. Es kann optional die Methode GET oder POST angegeben werden.

-> on(press){ getURL("http://www.hdm-stuttgart.de/am", "_blank"); }
    // öffnet die angegebene URL in einem neuem Browserfenster

loadMovie

loadMovie sendet Variablen aus dem Flash-Film an ein Serverskript (in Form eines URL-kodierten Strings), und lädt anschließend eine swf-Datei oder ein JPEG in den Flash-Film. Diese werden entweder in den Hauptfilm (_root), eine angegebene Filmsequenzinstanz oder ein Level (_level) geladen. So können verschiedene Filme abgespielt werden, ohne dass ein weiteres HTML-Dokument geladen werden muss. Außerdem können swf-Dateien, sowie JPEGs dynamisch geladen werden.

Beim Laden eines swfs in ein Level wird die Funktion loadMovieNum benutzt, wird eine swf-Datei in eine andere Filmsequenzinstanz geladen, so geschieht dies über MovieClip.loadMovie.

Mit der Funktion unloadMovie können Filme, die mit loadMovie geladen wurden und nicht mehr gebraucht werden, wieder entfernt werden.

-> einClip.loadMovie("andereFilme/derAndereFilm.swf");
    // in den MovieClip "einClip" wird der Flashfilm "derAndereFilm.swf" geladen

loadSound

Die Methode loadSound des Sound -Objektes lädt eine MP3-Datei in einen Flash-Film. Es kann festgelegt werden, ob diese gestreamt werden soll (zweites Argument gleich true).

-> EinSoundObjekt.loadSound("laerm.mp3", true); // laerm wird in EinSoundObjekt geladen, und gestreamt.

loadVariables/loadVariablesNum

loadVariables/loadVariablesNum sendet Variablen aus einem Flash-Film an ein Serverskript, und lädt anschließend Variablen aus dem Serverskript oder einer Datei (txt-Datei) in den Flash-Film, entweder in den Haupt-Film, eine Filmsequenzinstanz oder ein Level(loadVariablesNum).
In der Regel ist die Klasse loadVars ob ihres objektorientierten Ansatzes loadVariables vorzuziehen, möchte man abwärtskompatible Filme erstellen muss man auf das seit Flash 4 bestehende loadVariables zurückgreifen.
Es kann optional die Methode GET oder POST angegeben werden.

-> loadVariables("daten.txt", "eineInstanz"); // lädt Variablen aus der Textdatei "daten.txt" in die
    Filmsequenzinstanz "eineInstanz"

Die Klasse loadVars

Die Klasse loadVars stellt einige Methoden zum Laden und auch Senden von Daten zur Verfügung:

- load()
- getBytesloaded()
- getBytesTotal
- send()
- sendAndLoad()
- toString()

Ergänzt werden diese Methoden durch die Eigenschaft load (boolescher Wert; zeigt an, ob der Einlesevorgang abgeschlossen wure) und die Rückruf-Funktion onLoad; diese wird aufgerufen, wenn der Einlesevorgang abgeschlossen wurde, und sollte mit einer eigenen Routine überschrieben werden, die anweist, was nach dem Laden der Daten geschehen soll.

Um Daten aus einer Textdatei oder einem Serverskript einzulesen muss zuerst ein Objekt der Klasse loadVars erzeugt werden. Die Methode load(), der die URL des Serverskriptes oder der Namen der Textdatei übergeben wird, liest dann die Daten ein. Für jedes Name/Wert-Paar, das nun eingelesen wird, legt der ActionScript-Interpreter im jeweiligen loadVars-Objekt eine Eigenschaft an.

-> ladeDaten = new loadVars(); // Erzeugen eines neuen loadVars-Objektes mit dem Namen ladeDaten

    ladeDaten.load("textdatei.txt"); // Variablen werden aus einer Textdatei (textdatei.txt) eingelesen
    oder:
    ladeDaten.load("../cgi-bin/beispiel.exe?wert1=1&wert2=2");
    // Variablen werden über die cgi-Schnittstell aus einem cgi-Programm (beispiel.exe) geladen;
       dem cgi-Programm werden die Variablen wert1 und wert2 als URL-kodierter String übergeben.

-> Zugriff auf die Variablen:
    der Zugriff auf die Variablen erfogt dann über den Namen des Objektes + dem jeweiligen
    Variablennamen.
    Ist z.Bsp. eine Variable mit dem Namen variable1 eingelesen worden, würde dies wie folgt aussehen:
    var puffer = ladeDaten.variable1; // der im Flash-Film angelegten Variable puffer wird der Wert von
    variable1 zugewiesen

Die Methode loadVars.getBytesLoaded() gibt die Anzahl der Bytes zurrück, die bis zum Zeitpunkt der Abfrage mit der Methode loadVars.load() oder loadVars.sendAndLoad() geladen wurden. loadVars.getBytesTotal() gibt die Gesamtzahl von Bytes zurrück, die mit der Methode loadVars.load() oder loadVars.sendAndLoad() geladen werden. Mit diesen beiden Methoden kann sehr einfach ein Preloader eingerichtet werden.

Mit loadVars.send()werden Daten an ein URL gesendet (Dies kann beispielsweise ein Serverskript oder ein cgi-Programm sein). Wird ein cgi-Programm aufgerufen, so wird die Ausgabe des Programms nicht an Flash zurückgeschickt, sondern im Browserfenster angezeigt. Mit dem zweiten Argument wird festgelegt, ob die Ausgabe im aktuellen (_self) oder in einem neuen (_blank) Browserfenster angezeigt wird.

-> ladeDaten.send("../cgi-bin/beispiel2.exe", "_blank"); // Daten werden an cgi-Programm (beispiel2.exe)
    gesendet, dessen Ausgabe erfolgt in neuem Browserfenster (_blank)

Zusätzliche Daten können als URL-kodierter String an die URL angehängt werden. Hier muss allerdings als drittes Argument die Übertragungsmethode GET gewählt werden.

-> ladeDaten.send("../cgi-bin/beispiel2.exe?wert1=1", "_blank", "GET"); // Zusätzlich wird die Variable wert1     übergeben

Mit loadVars.sendAndLoad() werden wie mit loadVars.send() Daten an einen URL gesendet, nur geschieht die Rückgabe der Daten hier nicht an den Browser, sondern die Daten werden direkt an Flash zurückgeschickt. Dort werden sie als Eigenschaften des als zweites Argument angegebenen loadVars-Objektes gespeichert.

-> sendeDaten = new loadVars(); // neues loadVars-Objekt mit dem Namen sendeDaten
    sendeDaten.wert1 = 1;
    sendeDaten.wert2 = 2;
    sendeDaten.wert3 = 3;

    sendeDaten.sendAndLoad("../cgi-bin/beispiel3.exe", ladeDaten, "POST"); // Die Werte des Objektes
    sendeDaten werden an ein cgi-Programm (beispiel3.exe) gesendet, dann an Flash zurückgeschickt und als     Eigenschaften von ladeDaten gespeichert.

Die Methode loadVars.toString() gibt einen URL-codierten String zurück der alle aufzählbaren Variablen in loadVars enthält.

-> var ladeDaten = new loadVars;
    ladeDaten.vorname = "Michael";
    ladeDaten.nachname = "Mehling";
    ladeDaten.alter = 24;
    trace (ladeDaten.toString());
    würde folgendes ausgeben:
    vorname=Michael&nachname=Mehling&alter=24

XML

Mit dem XML-Objekt können Daten aus XML-Dokumenten eingelesen werden, XML-Dokumete erstellt und bearbeitet werden, und XML-Daten an einen Server gesendet werden.

Flash verwendet hierarchisch strukturierte XML-Dokumente; dies drückt sich auch in den Methoden der Klasse aus, deren Großteil für die Bearbeitung und Veränderung der Knotenhierarchie designt sind. Im folgenden werden die Methoden des XML-Objektes aufgelistet und kurz beschrieben. (Die für das Versenden und Laden von Daten wichtigen Methoden (load(), send(), sendAndLoad()) wurden schon bei der Beschreibung der Klasse loadVars(), zu denen sie analog funktionieren, genauer erläutert, und werden hier nicht weiter vertieft. Der Vollständigkeit halber werden auch die übrigen für das Senden und Laden nicht relevanten Methoden und Eigenschaften aufgelistet.)


Die XML-Methoden:

XML.appendChild() Hängt einen Knoten am Ende der Child-Liste des angegebenen Objekts an

XML.cloneNode() Klont den angegebenen Knoten und klont alle Child-Elemente rekursiv (optional)

XML.createElement() erstellt ein neues XML-Element

XML.createTextNode() erstellt einen neuen XML-Textknoten

XML.getBytesLoaded() gibt die Anzahl der der geladenen Bytes des angegebenen XML-Dokuments zurück

XML.getBytesTotal() gibt die Gesamtzahl der Bytes des angegebenen XML-Dokuments zurück

XML.hasChildNodes() gibt "true" zurück, wenn der angegebene Knoten über Child-Knoten verfügt; andernfalls wird "false" zurückgegeben

XML.insertBefore() Fügt in der Child-Liste des angegebenen Knotens einen Knoten vor einem vorhandenen Knoten ein

XML.load() Lädt ein durch das XML-Objekt angegebenes Objekt von einem URL aus

XML.parseXML() Liest ein XML-Dokument in den angegebenen XML-Objektbaum ein

XML.removeNode() Entfernt den angegebenen Knoten aus dem Parent-Knoten

XML.send() Sendet das angegebene XML-Objekt an einen URL

XML.sendAndLoad() Sendet das angegebene XML-Objekt an einen URL und lädt die Antwort des Servers in ein anderes XML-Objekt

XML.toString() Wandelt den angegebenen Knoten und alle Child-Knoten in Text um


Die Eigenschaften der Klasse helfen hauptsächlich, sich durch die Knotenhierarchie zu bewegen und auf einzelne Knoten zuzugreifen.


Die Eigenschaften des XML-Objektes:

XML.attributes Gibt ein assoziazives Array zurück, das alle Attribute des angegebenen Knotens enthält

XML.childNodes Gibt ein Array mit Bezüge auf die Child-Knoten des angegeben Knotens zurück

XML.contentType Gibt den an den Server übertragenen MIME-Typ an

XML.docTypeDecl Legt Informationen über die DOCTYPE-Deklaration eines XML-Dokuments fest und gibt diese zurück

XML.firstChild Verweist in der Liste für den angegebenen Knoten auf das erste Child

XML.ignoreWhite Ist diese Eigenschaft auf "true" gesetzt, werden Textknoten, die nur Leerzeichen enthalten, beim Parsen gelöscht

XML.lastChild Verweist in der Liste für den angegebenen Knoten auf das letzte Child

XML.loaded Überprüft, ob das angegebene XML-Objekt geladen wurde

XML.nextSibling Verweist auf den nächsten Sibling in der Child-Liste des Parent-Knotens

nodeName Gibt den Tag-Namen eines XML-Elements zurüc

nodeType Gibt den Typ des angegebenen Knotens zurück, wenn es sich um einen Textknoten handelt

nodeValue Gibt den Text des angegebenen Knotens zurück, wen es sich um einen Textknoten handelt

XML.parentNode Verweist auf den Parent-Knoten des angegebenen Knotens

XML.previousSibling Verweist auf den vorherigen Sibling in der Child-Liste des Parent-Knotens

XML.status Gibt einen numerischen Statuscode zurück, der angibt, ob ein Parsingvorgang für ein XML-Dokument erfolgreich beendet wurde oder fehlgeschlagen ist

XML.xmlDecl Legt Informationen über die Dokumentdeklaration eines XML-Dokuments fest und gibt diese zurück

Die Methoden und Eigenschaften werden durch die Ereignisse onData und onLoad ergänzt. onLoad() wird ausgelöst, wenn XML-Daten mit einer der Methoden load() oder sendAndLoad() abgeschlossen wurden.

XML-Socket

Die Kommunikation zwischen Server und Client baut auf Sockets (beständige Verbindung) auf. Mit dem XMLSocket-Objekt kann ein Client-Socket implementiert werden. So kann der Flash-Player des Clients mit einem Server-Computer kommunizieren, der durch eine IP-Adresse oder einen Domainnamen identifiziert ist. Der Flashfilm auf dem Client kann nun in Echtzeit mit einem serverseitigen Socket kommunizieren. Der Socket-Server muss dabei die XML-Dokumente, die der Flash-Client sendet, in Empfang nehmen, verarbeiten, und eine Antwort senden. Da durch den Socket eine beständige Verbindung zum Server besteht, kann der Server auch Daten senden, ohne dass diese der Client (Flash-Film) angefordert hat, was bei den anderen Methoden nicht der Fall ist, wo Daten immer nur auf Anfrage des Clients gesendet werden. So können über einen Server zum Beispiel auch zwei Clients miteinander kommunizieren, wie es beispielsweise bei Multi-User-Games der Fall ist. Empfängt der Server Daten des einen Clients, sendet er sie direkt an den zweiten Client, ohne erst eine Anfrage der Daten durch diesen abwarten zu müssen.

Die Methoden des XMLSocket-Objektes:

XMLSocket.close() schließt eine offene Socket-Verbindung

XMLSocket.conect8) stellt eine Verbindung zum angegebenen Server her

XMLSocket.send() sendet ein XML-Objekt (oder XML-Dokumentenbaum) an den angegebenen Server



Die Event-Handler des XMLSocket-Objektes:

XMLSocket.onClose() Rückruffunktion; wird aufgerufen, sobald eine XMLSocket-Verbindung geschlossen wird

XMLSocket.onConnect() Rückruffunktion; wird aufgerufen, sobald eine Socket-Verbindung hergestellt wird

XMLSocket.onData() Rückruffunktion; wird aufgerufen, sobald Daten vom Server eintreffen

XMLSocket.onXML() Rückruffunktion; wird aufgerufen, sobald die vom Server übermittelten Daten geparst wurden

Es muss noch angemerkt werden, dass es bei der Verwendung des XMLSocket-Objektes zu Problemen bei Firewalls kommen kann. Firewalls sind meistens so eingestellt, dass sie Verbindungen zu anderen Netzen nur auf bestimmten, ihnen bekannten Netzwerkteiladressen (Ports) zulassen, also beispielsweise Port 80 für HTTP (Web-Server). Für das XMLSocket-Objekt werden die Ports oberhalb 1024 benötigt, die jedoch häufig durch Firewalls gesperrt sind.





fig03: FLashMX-Header


Literaturliste

[Elzen 01]: Elzen van den, Gerard; Flash ActionScript; Adison-Wesley, München, 2001

[Lou/Niss]: Louis, Dirk / Nissen, Svend; Flash MX und ActionScript; Markt+Technik, München, 2002

[Koke]: Kokemüller, Stefan; Untersuchung über die Eignung von Macromedia Flash MX zur Programmierung von Online-Shop-Systemen;
Diplomarbeit, Stuttgart, 2002

[friends]: Bhangal et al.; Flash Games Studio;
friends of ED; Birmingham, 2001

Liste externer Links

http://www.flashkit.com
http://www.shockwaveforum.de
http://www.actionscript.com
http://www.macromedia.com