Bildergalerie mit Flash MX 2004
Fotoshow

Bilder dynamisch laden

Bildergalerie mit Flash MX 2004

Flash gilt als äußerst vielseitiges Werkzeug. In der aktuellsten Version MX 2004 hat sich das Tool zu einer wirklich leistungsfähigen Entwicklungsumgebung gemausert. Software-Entwickler rümpfen zwar die Nase, weil die Bedienung in Teilen nicht intuitiv gelingt und die Möglichkeiten des Debuggings begrenzt sind. Auch gelten die letzten Flash-Versionen als zu früh auf den Markt geworfen. Das sieht wohl auch Macromedia so, denn im August 2004 ist ein Gratis-Update auf Flash 7.2 erschienen.

Die Aufgabenstellung dieses Workshops: Eine komplette Bildergalerie wird mit Flash realisiert. Normalerweise erfordert das die Erstellung vieler einzelner HTML-Seiten oder die Verwendung einer Software, die diese Aufgabe erledigt. Alternativ gibt es mächtige serverseitige Produkte, die das Erstellen einer Online-Galerie vereinfachen, beispielsweise das PHP-basierte Gallery (gallery.sourceforge.net).

Für den Workshop wird ein anderer Ansatz gewählt, der es erlaubt, die einmal erstellte Galerie flexibel einzusetzen. Mit Flash wird das Rahmenwerk geschaffen, ein Film, der in der Lage ist, Fotos dynamisch zu laden und anzuzeigen. Welche Fotos das sein sollen, wird in einer externen XML-Datei gespeichert.

Soll also eine neue Bildergalerie erstellt werden, ist nur eine neue XML-Datei vonnöten. Alles andere ? der Flash-Film und die zugehörige Anwendungslogik ? ist so universell gehalten, dass hier keine weitere Anpassung erforderlich ist.

Vorbereitungen

Bildergalerie mit Flash MX 2004

Zwar ist Flash auch gut dazu geeignet, Vektorgrafiken zu erzeugen, doch für aufwendigere Layouts ist ein reines Vektor-Tool oftmals die bessere Wahl. Deswegen entsteht das Design der Flash-Bildergalerie auch direkt in Freehand. Dabei werden verschiedene Ebenen eingesetzt, was später im Flash-Film die Übersichtlichkeit erhöht.

Erstellen Sie einen neuen Film und ändern Sie zunächst die Größe der Bühne auf 440×395 Pixel. Das Freehand-Dokument von der Heft-CD importieren Sie über das Menü Datei, Importieren, In Bühne importieren (unter Mac über das Programm-Menü). Allerdings ist noch ein wenig manuelles Nachjustieren notwendig, denn beispielsweise haben sich die Textfelder verschoben, was Sie korrigieren müssen. Außerdem ist jetzt eine gute Gelegenheit, Überflüssiges wie etwa Hilfslinien und leere Ebenen loszuwerden. Aus Gründen der Übersicht sollten Sie aber auch eine neue Ebene anlegen, in der Sie später den Actionscript-Code platzieren.

Die einzelnen Elemente

Bildergalerie mit Flash MX 2004

Werfen Sie einen Blick auf die relevanten Elemente im Flash-Film: Der Movieclip, in dem die einzelnen Bilder angezeigt werden, heißt bild_mc. Flash MX 2004 erlaubt es, dort beispielsweise JPEG-Dateien zu laden, sofern diese nicht im Progressive-JPEG-Format vorliegen. Mit beschriftung_mc ist der Movieclip bezeichnet, in dem die Beschriftung der Bilder eingeblendet werden kann. Der eigentliche Text steht dort in einem dynamischen Textfeld mit dem Instanznamen text_txt.

Ebenfalls ein dynamisches Textfeld ist dateiname_txt, in dem später der Dateiname der gerade geladenen Grafik angezeigt wird. Zur Navigation innerhalb des Bildbestands gibt es noch die Schaltflächen vor_btn und zurueck_btn mit nahe liegenden Funktionen. Die Schaltfläche an_aus ? eine Gruppierung aus einem Textfeld und einem Balken, umgewandelt in ein Symbol ? erlaubt das Ein- und Ausblenden der Bildbeschreibung.

Die Bibliothek enthält einen Ordner Bildschaltflächen mit insgesamt 24 einzelnen Schaltflächen, die jeweils eine der Nummern von 1 bis 24 tragen. Bei jeder dieser Schaltflächen ist über das Kontextmenü und Eigenschaften die Freigabe für Actionscript aktiviert worden, damit später der dynamische Zugriff funktioniert.

Mit XML arbeiten

Bildergalerie mit Flash MX 2004

Als Erstes benötigen Sie nicht eine XML-Datei, sondern ein XML-Format ? Sie brauchen eine Vorschrift, wie die Konfigurationsdateien für die Bildergalerie auszusehen haben. Halten Sie das ganz einfach: Jedes Bild steht in einem bild-Element mit den Unterelementen url für den Pfad zur jeweiligen Grafik und text für den Beschriftungstext. Hier eine Beispieldatei mit zwei Fotos:

Bilder/Schluessel_01.jpg
Damit geht jede Autotür auf


Bilder/Feilen_02.jpg
Im Handumdrehen habe ich keine Seriennummer mehr

In Bild 1 des Films soll nun diese Datei geladen werden, was mit den XML-Fähigkeiten von Flash MX 2004 recht bequem geht. Das Laden der Datei ist ein Dreizeiler:

var dok_xml:XML = new XML();
dok_xml.load("bilder.xml");
dok_xml.onLoad = geladen;

Zunächst erzeugen Sie ein XML-Objekt, dann laden Sie eine Datei ein. Über die Eigenschaft onLoad geben Sie an, dass nach dem Abschluss des Ladevorgangs eine Funktion namens geladen() ausgeführt werden soll. Die ist eine deutliche Verbesserung gegenüber früheren Flash-Versionen, in denen in einer Schleife abgewartet wurde, bis der Ladevorgang beendet war. Hier ist es einfacher, denn geladen() wird automatisch aufgerufen. Sie können also den Film ohne Weiteres anhalten:

stop();

Sie benötigen noch drei globale Variablen. Eine speichert ab, welches Bild mit welcher Nummer gerade angezeigt wird, eine zweite die Nummer des vorher angezeigten Bildes. Die dritte Variable schließlich enthält alle Bilddaten aus der XML-Datei:

var bildnr_num:Number = 1;
var bildnr_alt_num:Number = 1;
var bilder_array:Array = new Array();

Mit Flash auf XML zugreifen

Bildergalerie mit Flash MX 2004

Der XML-Zugriff aus Flash heraus ist mächtig, wenngleich man schmerzlich eine Funktion wie etwa getElementsByTagName() vermisst, um bequem auf alle Bilder zuzugreifen. Stattdessen muss sich der Actionscript-Code mühsam von Knoten zu Knoten hangeln.

for (var i=0; i
if (dok_xml.childNodes[i].nodeName == "bilder") {
bilder_xmlnode = dok_xml.childNodes[i];
}
}