Vor dem Start

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

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 wird ergänzt. Die Änderungen sind rot markiert.
(Kommentare sind hier in Grau geschrieben)

// XML als Variable laden  
stop();  
// Anzahl der Fotos 
p_anz = 0;  
foto_xml = new XML(); 
foto_xml.ignoreWhite = true; 
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) {         
        for (var aNode:XMLNode = foto_xml.firstChild; aNode != null; aNode = aNode.nextSibling) {         
            // zählt die Anzahl an Fotos (übergeordnete Knoten, Nodes) in der XML Datei
            p_anz ++;
        }
        // springe zu Bild 2
        gotoAndPlay(2);
    }
} 

Wir führen die Variable p_anz = 0; ein. Sie dient als Zählvariable und enthält nach Abarbeitung der for-Schleife die Anzahl der Fotos, die in der XML-Datei eingepflegt sind. Die for-Schleife erledigt das Zählen der Fotos. Beginnend vom foto_xml.firstChild wird bei jedem Schleifendurchgang zum nächsten Knotenpunkt gesprungen bis das Ende des XML-Dokuments erreicht wird. Diese Variable ist wichtig, damit wir später in der Scrollleiste die richtige Anzahl an Thumbnails erzeugen können.

Der Code im zweiten Keyframe ist zum Teil bekannt. Die draw function wird allerdings erweitert:
(Kommentare sind hier in Grau geschrieben)

// Thumbnailleiste I
stop();
// ---------------------------------------- | Fotos (pics) ||
// Größe der Thumbnails in X
p_x = 70;
// Größe der Thumbnails in Y
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;
// Anzahl an Thumbnails die dargestellt werden sollen
p_thumbs = 6;
// Start Thumbnail = Nummer 0
p_start_thumb = 0;
// Funktionsaufruf zum Zeichnen der Thumbnailleiste
draw_thumbs(p_anz, p_thumbs, p_start_thumb, "foto", "images/");
// ---------------------------------------- | draw_thumbs function |
function draw_thumbs(anz_ges, anz_thumbs, start_thumb, part, path) {
   // Zeichne 6 Thumbs laut Angabe, denn anz_thumbs = p_thumbs
   for (i=0; i<anz_thumbs; i++) {
      // pic_num bestimmt Bild das gezeichnet werden soll, erhöht durch i bei jedem Durchlauf
      pic_num = i+start_thumb;
      // Movieclip auf mit Namen foto + der Nummer und Tiefe laut pic_num
      this.createEmptyMovieClip(part+pic_num, pic_num);
      this[part+pic_num].createEmptyMovieClip("image", this.getNextHighestDepth());
         // wenn die Anzahl noch in der Range von p_anz, Menge der Bilder
         if (pic_num<anz_ges) {
            //lade das Bild
            loadMovie(path+pic_num+"_thumb.jpg", this[part+pic_num].image);
         }
      // Thumbnails verschieben um off_x + p_x*Zahl d. Fotos
      setProperty(part+pic_num, _x, p_off_x+p_x*(i));
      // Thumbnails verschieben um off_y + wenn man modifiziert z.B. eine 2te Thumb Reihe
      setProperty(part+pic_num, _y, p_off_y);
      // RollOver Funktion
      this[part+pic_num].onRollOver = function() {
         // Zeichne den grünen Rahmen, von Punkt zu Punkt
         this.image.createEmptyMovieClip("rect", this.getNextHighestDepth());
         with (this.image.rect) {
            lineStyle(6, 0x66CC00, 70);
            moveTo(3, 3);
            lineTo(67, 3);
            lineTo(67, 77);
            lineTo(3, 77);
            lineTo(3, 3);
            endFill();
         }
         // Finde die Bildnummer (ID) anhand der Tiefe
         ID = this.getDepth();
         // onPress Funktion, lade das große Bild laut Bildnummer (ID)
         // Gib den richtigen Text und das Bild aus
         this.onPress = function() {
            id_txt.text = ID;
            name_txt.text = foto_xml.childNodes[ID].childNodes[0].firstChild;
            besch_txt.text = foto_xml.childNodes[ID].childNodes[1].firstChild;
            // leerer Movieclip + lade Bild hinein + Verschieben
            _root.createEmptyMovieClip(part, 1000);
            loadMovie(path+ID+".jpg", part);
            setProperty(part, _x, f_off_x);
            setProperty(part, _y, f_off_y);
         };
      };
      // RollOut Funktion, lösche Movieclip vom grünen Rahmen
      this[part+pic_num].onRollOut = function() {
         this.image.rect.removeMovieClip();
      };
   }
}

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 und das Foto. Angegeben wird auch das Bild mit dem die Scrolleiste gestartet werden soll.

Danach wird die Funktion draw_thumbs aufgerufen. Dabei werden einige Variablen, Name und der Pfad zu den Bildern der Galerie übergeben.

Der folgende Codeblock bildet den Hauptbestandteil und ist die Funktion "draw_thumbs". Wir verändern den Code aus "as_fotogalerie_01.fla".

Der Start ist eine for-Schleife, die für das Zeichnen der richtigen Anzahl an Bildern (in unserem Fall 6) zuständig ist. Weiter geht es mit der Variable pic_num, die die Nummer des Bildes angibt, das gerade gezeichnet werden soll. Diese Nummer setzt sich aus i (Zahlen von 0 - 5) und dem Bild mit dem die Scrollbar gestartet werden soll zusammen. Das ergibt in unserem Fall zu beginn die Zahlen von 0 - 5, das heißt die ersten 6 Bilder aus unserer XML Datei.

Auf bekannte Weise erzeugen wir eine Movieclip mit dem Namen (beim ersten Durchlauf) "foto0", dann "foto1" usw. Die Movieclips bekommen auch eine Tiefe zugewiesen, jeweils passend zu "pic_num". In Movieclip "fotoX'" wir ein Movieclip "image" erzeugt und abhängig ob es noch Fotos mit der passenden Nummer in der XML Datei gibt wird das Foto mit der pic_num geladen. Anschließend wird die Position des "fotoX"-Clips verschoben. Somit reihen sich die sechs Voschaubilder nebeneinander.

Damit man nun sieht, dass auch etwas passiert, sobald man mit der Maus über eines der Vorschaubilder fährt erzeugen wir einen Rahmen über das jeweils aktive Bild. Dies geschieht innerhalb der RollOver Funktion. In einen Movieclip "rect", wird der grüne Rahmen gezeichnet.

Wir stellen mit Hilfe der Tiefe die ID des momentan zu verarbeitenden Bilds fest und laden sobald der User auf ein Vorschaubild mit der Maus geklickt hat den richtigen Text und das große Bild nach. Dies geschieht auf bereits gekannte weise.

Zu guter letzt müssen wir nur noch für den Fall, dass der User mit der Maus wieder außerhalb des gerade aktiven Bilds fährt, den Movieclip des grünen Rahmens wieder löschen. Somit kann immer nur ein Bild (Movieclip) aktiv sein und es hebt sich deutlich hervor.

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 dynamischen Textfeldern angezeigt werden.