Vor dem Start

Wir öffnen die im gesammelten Paket mitgellieferte "as_fotogalerie_01.fla" mit Flash und die "fotos_text.xml" mit Dreamweaver. Anhand der Dateien müssen die einzelnen Schritte nur noch mitgelesen werden. Das Beispiel ist an und für sich schon fertig.

Die XML-Datei

Die fertige XML-Datei sieht wie folgt aus:

<?xml version='1.0' encoding='utf-8'?>

<Foto id ="0">
<Bezeichnung>Foto 00</Bezeichnung>
<Beschreibung>Beschreibung Foto 00, ganz wichtig, ganz toll! Das ganze natürlich über meherer Zeilen hinweg.</Beschreibung>
</Foto>

<Foto id ="1">
<Bezeichnung>Foto 01</Bezeichnung>
<Beschreibung>Beschreibung Foto 01, ganz wichtig, ganz toll! Das ganze natürlich über meherer Zeilen hinweg.</Beschreibung>
</Foto>

...

Wir haben eine Header, der das Dokument als XML-Datei kennzeichnet und die Codierung auf UTF-8 festsetzt. Auch hier ist, genau wie bei der Textdatei, darauf zu achten, dass die Datei unicode kodiert ist. Das geschieht hier durch das Encoding.

Der eigentliche Inhalt beginnt jeweils mit <Foto id ="0"> und endet mit </Foto>. Somit hat jedes der Fotos eine ID, die es eindeutig kennzeichnet. Weiters gibt es eine <Bezeichnung> und eine <Beschreibung> für jedes Foto.

Die Struktur ist:

<Knoten>
<Unterknoten> </Unterknoten>
<Unterknoten> </Unterknoten>
</Knoten>

Dies ist entscheidend, wenn wir den eigentlichen Text mit Flash laden wollen.

Aufbau der Flash Datei

Ich habe wie auch schon im Beispiel mit der Textdatei mehrere Ebenen festgelegt. Die Ebene "action" für den Actionscript Code, "txt" für die Textfelder, "bg" ist der Hintergrund und bildet nur den Rahmen für die Galerie. Der Hintergrund ist auswechselbar und kann nach belieben gestaltet werden.

Die Textebene

Entscheidend ist, dass wir die Textfelder, die den Inhalt der XML-Datei ausgeben sollen auf "Dynamisches Textfeld" umstellen und Instanzennamen für die Felder vergeben. In diesem Beispiel sind es "id_txt","name_txt" und "besch_txt". Es ist gut, bereits beim Instanzennamen die Art der Instanz anzufügen - für Textfelder "_txt", Buttons "_btn" - damit lassen sich die Instanzen leichter zuordnen und man kommt in keinen Namenskonflikt.

Die restlichen Textfelder sind nur die Beschriftungen und ganz normale statische Textfelder.

Der Actionscript Code

Wir klicken auf den ersten Keyframe in der Ebene "action". (Mit F9, kann man das Code Fenster öffnen, wenn es noch nicht sichtbar ist.)

Der Code ist ganz ähnlich zum Beispiel mit der externen Textdatei aufgebaut, deshalb werde ich nur die entscheidenden Unterschiede erläutern:
(Kommentare sind hier in Grau geschrieben)

// XML als Variable laden und dynamischen Textfeldern zuweisen
stop();
// erstellen der XML Variable (Behälter)
foto_xml = new XML();
// Einstellung in der ActionScript Referenz nachzulesen
foto_xml.ignoreWhite = true;
// laden der XML Datei
foto_xml.load("fotos_text.xml");
// Funktion, die während Ladevorgang läuft
foto_xml.onLoad = function(sucess) {
    // überprüfen Erfolg des Ladevorgangs und mc vollständig geladen
    if (sucess && this.loaded) {
       // Text zuweisen über Knoten, Nodes
       id_txt.text = foto_xml.firstChild.attributes.id;
       // hier 1stNode - 1stNode - TextNode
       name_txt.text = foto_xml.firstChild.childNodes[0].firstChild;
       // hier 1stNode - 2ndNode - TextNode
       besch_txt.text = foto_xml.firstChild.childNodes[1].firstChild;
    }
}

foto_xml = new XML(); Wir deklarieren eine Variable, die den Inhalt der XML aufnehmen soll.
Die Funktion foto_xml.onLoad wird während des Ladevorgangs ausgeführt. Die Variable success gibt an, ob der Ladevorgang erfolgreich war. Dies fragen wir ab und überprüfen auch, ob der sonstige Inhalt bereits geladen wurde und weisen anschließend mit id_txt.text = foto_xml.firstChild.attributes.id; die ID und mit name_txt.text = foto_xml.firstChild.childNodes[0].firstChild; den Namen aus der XML Datei dem jeweiligen Textfeld zu.

foto_xml.firstChild.attributes.id verweist auf den ersten Knoten (firstChild)-> <Foto id ="0"> und dessen "id"-Attribut. Somit wird "0" an das Textfeld id_txt übergeben.

foto_xml.firstChild.childNodes[0].firstChild verweist auf den ersten Knoten (firstChild) -> <Foto id ="0"> und dessen ersten Unterknoten ( childNodes[0]) und wiederum auf dessen Inhalt (firstChild).

Vergleicht die Syntaxt mit der Struktur der XML-Datei, wie oben angegeben. Aus eben dieser Struktur ergibt sich der Aufruf der Inhalte aus der XML Datei.

Testen des Beispiels

Als letzten Schritt müssen wir nur noch testen, ob das laden des Inhalts aus der XML Datei tatsächlich geklappt hat. Dazu einfach Steuerung > Film test (Strg + Enter) auswählen. Nun sollten die Texte zum ersten Foto in den dynamschen Textfeldern angezeigt werden.