Bildergalerien in Flash


Grafisch anspruchsvolle Bildergalerien mit Bildbeschreibung
Erweitern Sie Ihre Webseite durch eine gut in Szene gesetzte Bildergalerie. Dabei lernen Sie, wie Sie externe Bilder ohne Probleme in Flash nachladen und trotzdem jedes Bild mit einer individuellen Beschriftung versehen können.
Damit Sie die nächsten Urlaubsfotos auf Ihrer Webseite in einem angemessenen Rahmen präsentieren können, wollen wir mit Ihnen eine Bildergalerie erstellen, die es in sich hat. Die Bilder sollen sich nicht direkt in der Flash-Datei befinden. Damit die Datei klein bleibt, laden wir die Bilder nach. Jedes Bild soll zudem eine individuelle Beschriftung besitzen und dem Betrachter so zusätzliche Informationen zum Bild liefern. Der jeweilige Text zu einem Bild wird dabei ebenso nachgeladen. Durch das Nachladen der Bilder und Texte erhalten wir einen netten Nebeneffekt. Sie können jederzeit die Bilder und Texte austauschen, ohne an der Flash-Datei arbeiten zu müssen. Für den Hintergrund unserer Bildgalerie wollen wir folgende Vorlage verwenden:


Das Grundkonstrukt unserer Bildergalerie

Innerhalb der schwarzen Bereiche sollen später die Bilder erscheinen. Unterhalb dieser Bereiche wollen wir den jeweiligen Text platzieren. Die Hintergrundvorlage in Originalgröße finden Sie in der Beispieldatei zum Artikel. Fügen Sie als allererstes die Vorlage in Ihr neues Flash-Dokument ein. Passen Sie gegebenenfalls die Bühne an die Ausmaße der Vorlage an. Sie können anschließend die Ebene mit dem Hintergrundbild sperren, um ein unabsichtliches Verschieben oder Bearbeiten zu vermeiden.

Erstellen Sie eine neue Ebene „text“. Fügen Sie zwei dynamische Textfelder im leeren Bereich unterhalb der schwarzen Kästchen ein. Damit das linke Textfeld optimal in den leeren Bereich passt, muss es noch leicht gedreht werden. Rufen Sie das Bedienfeld „Transformieren“ auf. Markieren Sie das linke Textfeld und wählen Sie daraufhin im Bedienfeld die Option drehen mit einem Winkel von zirka -3 Grad. Geben Sie im Bedienfeld „Eigenschaften“ dem linken Textfeld unter „Var“ den Variablennamen „text1“. Das rechte Textfeld soll den Variablennamen „text2“ erhalten.

Erstellen Sie eine neue Ebene „display“. Zeichnen Sie in dieser Ebene ein Rechteck mit einer Breite von 300 und einer Höhe von 250 Pixeln ein. Markieren Sie das Rechteck und konvertieren Sie dies in ein MovieClip-Symbol. Das Symbol erscheint daraufhin in der Bibliothek. Wenn Sie sich die Bibliothek derzeit nicht anzeigen lassen, rufen Sie diese über die Tastenkombination Strg + L auf. Ziehen Sie eine weitere Instanz des Symbols per Drag&Drop auf die Bühne. Positionieren Sie die erste Instanz über den rechten schwarzen Bereich der Hintergrundgrafik. Die zweite Instanz soll über den linken schwarzen Bereich platziert werden. Rufen Sie hierfür erneut das Bedienfeld „Transformieren“ auf. Drehen Sie die Instanz wie zuvor das Textfeld um -3 Grad. Geben Sie anschließend der gedrehten Instanz im Bedienfeld „Eigenschaften“ den Instanznamen „position1“. Die rechte Instanz erhält entsprechend den Instanznamen „position2“.

Wir benötigen eine weitere Ebene „action“. Wie der Name schon andeutet, soll die Ebene ein ActionScript aufnehmen. Rufen Sie daher das Aktionen-Fenster auf. Folgende Anweisungen sollen in das Fenster geschrieben werden:

001:
002:
003:
004:
005:
006:
007:
 var number = 1;
 var counter = 4;
 loadMovie("picture/picture" + number + ".jpg", "position1");
 loadMovie("picture/picture" + (number + 1) + ".jpg", "position2");
 // Textdateien dynamisch laden
 loadVariablesNum("text/text" + number + ".txt", 0);
 loadVariablesNum("text/text" + (number + 1) + ".txt", 0);

Zunächst belegen wir zwei Variablen mit einem Wert. Die Variable „number“ gibt die aktuelle Nummer für das zu ladende Bild und den dazugehörigen Text an. Die Bedeutung von „number“ wird erst beim späteren Blättern ersichtlich. Die zweite Variable „counter“ informiert uns über die Anzahl der Bilder innerhalb der Bildergalerie. Mit dem Befehl „loadMovie“ können wir nun ein Bild nachladen. Die Anweisung erwartet als ersten Parameter den Pfad zum Bild. In unserem Fall befinden sich die Bilder in einem Unterordner „picture“. Beim Betrachten des Pfades wird deutlich, dass wir die Bilder mit einer fortlaufenden Nummer benennen müssen. In unserem Fall setzt sich der Bildname aus der Zeichenkette „picture“, einer Nummer und der Endung „.jpg“ zusammen. Die Anweisung „loadMovie“ erwartet als zweiten Parameter ein Ziel, in das unser Bild geladen werden soll. Hier verwenden wir die MovieClip-Instanzen „position1“ und „position2“. Damit in der zweiten Instanz „position2“ nicht dasselbe Bild angezeigt wird wie in „position1“, erhöhen wir den Wert von „number“ um Eins. Es sollte Ihnen somit auch klar sein, wie Sie mehr als zwei Bilder gleichzeitig laden können, wenn Ihre Bildgalerie noch mehr Bilder gleichzeitig anzeigen soll.

Das Laden der Texte erfolgt sehr ähnlich. Hierfür verwenden wir den Befehl „loadVariablesNum“. Wiederum erwartet die Anweisung im ersten Parameter einen Pfad zum jeweiligen Text. Diese befinden sich in unserem Beispiel in einem Unterordner „text“. Die einzelnen Textdateien müssen erneut fortlaufend nummeriert werden. Der zweite Parameter ist für uns in diesem Fall uninteressant. Damit der Text im jeweiligen Textfeld angezeigt wird, muss die Textdatei jeweils mit den Zeichen „&text1=“ bzw. „&text2=“ beginnen. Eine Anzeige im linken Textfeld erreichen wir somit zum Beispiel durch folgenden Inhalt einer Textdatei:

001:
 &text1=Das ist schon einen kleinen Nachmittagsspaziergang wert.

Weitere Informationen erhalten Sie im Artikel „Externe Texte einlesen“. Die Bildgalerie ist fast fertig. Da wir aber nicht nur zwei Bilder haben, wollen wir über eine Blätter-Funktion zu den weiteren Bildern gelangen. Hierfür benötigen wir eine neue Ebene „button“. Erstellen Sie in der Ebene eine Schaltfläche. Positionieren Sie diese beispielsweise rechts unten. Markieren Sie anschließend die Schaltfläche und rufen Sie erneut das Aktionen-Fenster auf. Die Anweisungen zum Blättern ähneln dem bereits vorgestellten ActionScript:

001:
002:
003:
004:
005:
006:
007:
008:
009:
010:
011:
 on (release) {
     if (_root.number + 2 < _root.counter){
         _root.number += 2;
     } else {
         _root.number = 1;
     }
         loadMovie("picture/picture" + number + ".jpg", "position1");
         loadMovie("picture/picture" + (number + 1) + ".jpg", "position2");
         loadVariablesNum("text/text" + number + ".txt", 0);
         loadVariablesNum("text/text" + (number + 1) + ".txt", 0); 
 }

Wir interessieren uns zuerst einmal dafür, ob die Anzahl der Bilder größer ist als die derzeit angezeigte Bildnummer. Besitzt die Bildgalerie weitere Bilder, die noch nicht angezeigt wurden, so erhöhen wir den Wert von „number“ um 2. Andernfalls setzen wir „number“ auf den Wert 1 zurück. Das Anzeigen der Bilder und Texte erfolgt in dem bereits vorgestellten Verfahren.

Beispieldatei: Bildgalerie [Bildgalerien_in_Flash.zip]