##

Thumbnail, Foto und passender Text

zurück zum Hauptmodul

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.

zurück zum Hauptmodul