Dynamische Flashfilme mit XML

So sehr die Funktionalität von Flash sich auch verbessert hat, am Ende hat man immer eine schwer indizierbare und starre SWF-Datei. Um zu vermeiden, daß man selbst für inhaltliche Änderungen wieder die Projektdatei öffnen und einen neuen Film exportieren muss, gibt es die Möglichkeit XML-Dateien per Actionscript einzubinden. Das geht superschnell und erfordert nur geringe Programmierkenntnisse. Hier eine Schritt für Schritt-Anleitung (funktioniert und getestet für Actionscript 2).

Die einfache XML-Datei

Eure XML-Datei könnte z.B. fotos.xml heißen und so aussehen:

<?xml version="1.0" encoding="ISO-8859-1"?>
<gallery>
 <photo url="74410001.jpg" />
 <photo url="74410002.jpg" />
 <photo url="74410003.jpg" />
 <photo url="74410004.jpg" />
 <photo url="74410005.jpg" />
 <photo url="74410008.jpg" />
</gallery>

Ihr habt ein firstChild Element namens gallery und ihr habt die Fotos als childNodes innerhalb dieses gallery-Elementes eingefügt. die childNodes tragen den Namen photo und haben ein Attribut namens url, in dem der Pfad zum gewünschten Bild steht. In meinem Fall müssen die Bilder im gleichen Verzeichnis wie die Flash Animation sein. Habt ihr eine Ordnerstruktur, müsst ihr diese ebenfalls unter url angeben. Zum Beispiel: pics/gallery/74410001.jpg

In Actionscript geht ihr dann folgendermaßen vor:

var x:XML = new XML();
x.ignoreWhite = true;
x.load("fotos.xml");

Mit der ersten Zeile erstellt ihr eine Variable x und mit new XML() erstellt ihr eine Instanz der Flash-eigenen Klasse zum Verarbeiten von XML-Dateien in dieser Variable. Auf diese Weise könnt ihr auf die ganzen hervorragenden Funktionen dieser Klasse zurückgreifen, ohne alles selbst programmieren zu müssen. Das :XML nennt sich Strict Datatyping und bewirkt, daß in der Variable x nichts anderes als Instanzen der Klasse XML gespeichert werden können. Diese Programmierung sollte man sich angewöhnen, da sie das Risiko für Fehler im Skript reduziert und für nachvollziehbarere Fehlermeldungen sorgt, wenn man sich doch mal vertun sollte. ignoreWhite ist eine Funktion der Klasse XML und bewirkt, daß der ganze freie Platz in der XML Datei (also die Einrückungen und Zeilenumbrüche usw.) keine Rolle für die Daten spielen. Schließlich kommt noch die simple load-Funktion, mit der ihr die tatsächliche XML-Datei in die Instanz der XML-Klasse, also in eure Variable x, ladet. Diesen Anfang solltet ihr immer so übernehmen und schon ist die Voraussetzung für einen XML-Import geschaffen.

Als nächstes und letztes müsst ihr die Daten aus der XML-Datei auslesen und in einem Array speichern, damit ihr sie in eurem Skript weiterverwenden könnt um daraus Newseinträge, Fotogallerien, Video-Sequenzen oder was weiß ich alles bauen könnt. Hier ist der Befehl:

x.onLoad = function () {
  var photos:Array = this.firstChild.childNodes;
}

Was bedeutet das? Ihr erstellt eine Funktion, die zum Zeitpunkt x.onLoad in Kraft tritt. Das ist der Fall, sobald der Befehl x.load("fotos.xml") erfolgreich ausgeführt wurde. In dieser Funktion erstellt ihr eine neue Variable, macht daraus den strikten Datentyp Array und lest mit this.firstChild.childNodes alle photo-Tags aus der XML Datei inklusive ihrer Attribute ein. Das this steht eigentlich für x, aber da wir uns ja durch x.onLoad bereits auf unsere Instanz beziehen, ist innerhalb dieser Funktion ein this eindeutiger.

Wenn ihr jetzt mit

trace(photos);

euer Array ausgeben lasst, werdet ihr sehen, daß alle childNodes, also alle photo-Tags eingelesen wurden. Auf die Attribute der eingelesen Tags könnt ihr jetzt so zugreifen:

photos[0].attributes.url

Das besagt ganz einfach, daß ihr das url-Attribut des ersten Eintrags in eurem Array einlesen wollt (Arrays beginnen immer bei 0 und nicht bei 1). Wenn ihr das ganze mit

trace(photos[0].attributes.url)

ausgeben lasst, werdet ihr die Meldung

74410001.jpg

bekommen. Ihr könnt jetzt Arrays mit allen Attributen erstellen und weiterverwenden, z.B. in Listenkomponenten eintragen, oder nacheinander ausgeben. Auf diese Weise lassen sich dynamische Flashfilme erstellen, denn die XML-Datei könnt ihr jederzeit mit Sprachen wie z.B. PHP verändern und umschreiben. Der Flashfilm wird die XML-Datei mit jedem Aufruf neu einladen und die neuen Inhalte nutzen.

XML-Dateien mit tiefergehenden Strukturen

Ein zusätzlicher Punkt, der noch interessant sein könnte: Angenommen ihr habt eine größere XML-Datei mit mehr Verschachtelungen, wie z.B.

<?xml version="1.0" encoding="ISO-8859-1"?>
<slideshow>
 <gallery desc="Grand Canyon">
  <photo url="74410001.jpg" />
  <photo url="74410002.jpg" />
  <photo url="74410003.jpg" />
  <photo url="74410004.jpg" />
  <photo url="74410005.jpg" />
  <photo url="74410008.jpg" />
 </gallery>
 <gallery desc="China">
  <photo url="74410009.jpg" />
  <photo url="74410022.jpg" />
  <photo url="74410033.jpg" />
  <photo url="74410044.jpg" />
  <photo url="74410065.jpg" />
  <photo url="74410098.jpg" />
 </gallery>
</slideshow>

Mit x.firstChild.childNodes werdet ihr nur bis zum Level der gallery-Tags kommen. Das heisst ihr bekommt mit dem oben erstellten Skript ein Array photos, in dem pro Eintrag ein kompletter gallery-Tag inkl der Untertags steht. Mit photos[0].attributes.desc würdet ihr Grand Canyon ausgegeben bekommen und mit photos[1].attributes.desc dementsprechend China.

Um die photo-Tags anzusprechen müsst ihr nocheinmal die childNodes ansprechen, also z.B. photos[0].childNodes, und das ganze wieder in einem Array speichern. Das könnte so aussehen:

var subphotos:Array = photos[0].childNodes;

Jetzt habt ihr ein Array mit allen Grand-Canyon Bildern und den zugehörigen Attributen.