Programmieren der Thumbnailleiste II

Vor dem Start

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

Im Grunde genommen sind wir nun ja schon fast fertig. Was noch feht sind Buttons, mit denen wir durch die Scrollleiste navigieren. Den Code dafür geben wir ein, sobald wir den Button erzeugt und ihn auf der Bühne ausgewählt haben. (Codefenster F9)

Für den Vorwärts-Button:
(Kommentare sind hier in Grau geschrieben)

on (release) {
//trace("Forward");
   if (p_start_thumb<p_anz-p_thumbs) {
      remove_clips(p_anz, "foto");
      p_start_thumb += p_thumbs;
      draw_thumbs(p_anz, p_thumbs, p_start_thumb, "foto", "images/"
   );
}

Wir nutzen die onRelease-Funktionalität des Buttons. Solange es noch weitere Bilder gibt, soll das Scrollen möglich sein, d.h. wir vergleichen, ob die Nummer des momentan ersten Vorschaubilds noch kleiner ist als die Gesamtanzahl der Bilder minus der Bilder in der Scrollleiste. Bevor wir jedoch die Vorschaubilder zeichnen müssen wir zuerst die alten löschen. Dies geschieht durch den Aufruf der Funktion remove_clips.

Für den Rückwärts-Button:
(Kommentare sind hier in Grau geschrieben)

on (release) {
//trace("Back");
   if (p_start_thumb>=p_thumbs) {
      remove_clips(p_anz, "foto");
      p_start_thumb -= p_thumbs;
      draw_thumbs(p_anz, p_thumbs, p_start_thumb, "foto", "images/");
   }
}

Analog zum Vorwärtsscrollen funktioniert das mit dem Rückkwärtsblättern.

Der Code im zweiten Keyframe wir durch die "remove-clips" Funktion ergänzt:
(Kommentare sind hier in Grau geschrieben)

// Thumbnailleiste II
...
// ---------------------------------------- | clear up draw function |
function remove_clips(anz_ges, part) {
   for (i=0; i<anz_ges; i++) {
      removeMovieClip(this[part+i]);
   }
}

Wir fügen unter dem ganzen bisherigen Code noch die remove_clip- Funktion ein. Dabei werden einfach alle Movieclips mit den Namen "fotoX" von 0 bis der Gesamtanzahl an Fotos gelöscht.

Somit ist diese Beispiel fertig und man muss es nur noch ein letztes mal Testen.

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.