Vor dem Start

Wir öffnen die im gesammelten Paket mitgellieferte "as_fotogalerie_02.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.

Änderungen an der Flash Datei

Die Datei wurde um eine weitere Ebene ergänzt, in der sich eine grüne Fläche als Platzhalter für die Fotos befindet. Mit rot markiert sind die Bereiche wo das Thumbnail Bild und das Foto zu sehen sein sollen.

Die Keyframes

Zwei Keyframes. Im ersten Frame wird die XML Datei geladen, im zweiten Frame werden dann die Bilder nachgeladen und der Text aus der XML Datei den Textfeldern zugewiesen.

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 im ersten Keyframe bleibt fast unverändert. Änderungen sind rot markiert :
(Kommentare sind hier in Grau geschrieben)

// XML als Variable laden:  
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) {         
        // springe zu Bild 2         
        gotoAndPlay(2);          
    } 
} 

Anstatt gleich den Text und die Bilder anzuzeigen, wird im ersten Keyframe erstmal die XML Datei geladen. Wenn der Ladevorgang abgeschlossen ist und auch die ganze Flash Datei geladen wurde (wird mit this.loaded überprüft), springe zum zweiten Keyframe.

Der Code im zweiten Keyframe ist zum Teil bekannt; hinzukommt das Laden der Bilder:
(Kommentare sind hier in Grau geschrieben)

// Vorschaubild, Text und Foto:  
stop(); 
// ---------------------------------------- | Fotos (pics) ||  
// Größe der Thumbnails in X-Richtung 
p_x = 70; 
// Größe der Thumbnails in Y-Richtung 
p_y = 80; 
// offset - Versatz der Thumbnail-Scrollbar in X-Richtung 
p_off_x = 285; 
// offset - Versatz der Thumbnail-Scrollbar in Y-Richtung 
p_off_y = 53; 
// offset - Versatz des Fotos in X-Richtung 
f_off_x = 250; 
// offset - Versatz des Fotos in Y-Richtung 
f_off_y = 180;  
// Aufrufen der Funktion draw_thumbs_simple draw_thumbs_simple("images/");   
// ---------------------------------------- | draw_thumbs_simple function || 
function draw_thumbs_simple(path) {  
    // ID des ersten Fotos (0)     
    id_txt.text = 0;  
    // Name des ersten Fotos     
    name_txt.text = foto_xml.childNodes[0].childNodes[0].firstChild;  
    // Beschreibung des ersten Fotos     
    besch_txt.text = foto_xml.childNodes[0].childNodes[1].firstChild;   
    // movieclip "thumb" für das erste Thumbnail     
    this.createEmptyMovieClip("thumb", 0);  
    // "image" = leerer movieclip für das Foto     
    this.thumb.createEmptyMovieClip("image", 1);  
    // Foto wird in "image" movieclip geladen     
    loadMovie(path+0+"_thumb.jpg", thumb.image);   
    // Verschieben des "thumb" movieclips     
    setProperty(thumb, _x, p_off_x);     
    setProperty(thumb, _y, p_off_y);   
    // movieclip "foto" für das große Bild     
    _root.createEmptyMovieClip("foto", 2);  
    // Foto laden      
    loadMovie(path+0+".jpg", foto);   
    // Verschieben des foto movieclips     
    setProperty(foto, _x, 250);     
    setProperty(foto, _y, 180); 
} 

Zu Beginn steht ein Teil mit Konfigurationen für die Größe der Thumbnailbilder und den Versatz in X- und Y- Richtung für die Bilderleiste. Danach wird die Funktion draw_thumbs_simple("images/") aufgerufen. Dabei wird images/ als Pfad für die Bilder angegeben. D.h. alle Bilder zu diesem Beispiel befinden sich im Ordner "images".

Der folgende Codeblock bildet den Hauptbestandteil und ist die Funktion "draw_thumbs_simple". Der erste Teil ist schon aus "as_fotogalerie_01.fla" bekannt. Hier wird der Text zum ersten Bild in die dynamischen Textfelder geladen.

this.createEmptyMovieClip("thumb", 0); erzeugt einen neuen leeren Moviclip mit dem Namen thumb auf der Tiefe "0". Neu erzeugte Movieclips haben immer eine Tiefe, die angibt wie sich die Clips übereinander stapeln. Man kann sich das ganze wie Ebenen in Photoshop vorstellen, 0 ganz unten, dann 1, 2, 3 ...
this. oder weiter unten _root. verweisen auf den Basismovieclip mit der Zeitleiste, die man auch sehen kann. Das heist nicht anderes als gehe auf den Basismovieclip und erzeuge dort den neuen leeren Movieclip.

this.thumb.createEmptyMovieClip("image", 1); erzeugt einen weiteren leeren Movieclip im vorhandenen Movieclip "thumb". Die Punktschreibweise gibt Aufschluss darüber wie die Movieclips ineinander verschachtelt sind. In diesem Fall wurde der neue Movieclip in die Ebene 1 gelegt. Es hätte auch die Ebene 0 sein können.

loadMovie(path+0+"_thumb.jpg", thumb.image); In den Movieclip "image" wir nun ein Bild geladen. path wird laut Aufruf der Funktion mit "images/" also dem richtigen Pfad zu den Bildern ersetzt. "0" ist die Nummer des ersten Thumbnails im Ordner. "_thumb.jpg" ergänzt das ganze, so dass der vollständige Pfad nun "images/0_thumb.jpg" lautet.

Mit "setProperty" wird nun noch das erste Thumbnailbild an die richtige Position verschoben.

Das große Bild wird analog zum Thumbnail geladen. Leeren Movieclip auf Ebene 2 erzeugen, Bild "images/0.jpg" laden, Movieclip verschieben.

Testen des Beispiels

Als letzten Schritt müssen wir nur noch testen, ob das laden der Bilder und 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.