Bildergalerie mit Flash MX 2004
Fotoshow

DeveloperIT-ProjekteSoftware

Die zunehmende Verbreitung von Digitalkameras hat einen Boom der Online-Bildergalerien nach sich gezogen. Für die Umsetzung muss es aber nicht immer HTML oder PHP sein.

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];
}
}

Und das geht so: Zunächst wird derjenige Kindknoten (childNodes) des Wurzelknotens gesucht, der den Namen (nodeName) »bilder« trägt ? also das bilder-Element. Nach diesem Muster geht es weiter: Es werden alle bild-Elemente gesucht und dann für jedes Bild dessen Dateiname (url) und Beschreibungstext (text). Deren Inhalt (firstChild.nodeValue) wird in das Array bilder_array abgelegt. Hier ein Ausschnitt für die URLs der Bilder:

for (i=0; i
if (bilder_xmlnode.childNodes[i].nodeName == "bild") {
for (var j=0; j
if (bilder_xmlnode.childNodes[i].childNodes[j].nodeName == "url"){
url_str = bilder_xmlnode.childNodes[i].childNodes[j].firstChild.nodeValue;
}
}
// analog für
// ...
bilder_array.push(new Array(url_str, text_str));
}
}

Nachdem alle Bilder eingelesen sind, ist es an der Zeit, das erste dieser Bilder zu laden. Dies geht in nur einer Zeile:

laden();

Zugegeben, da steckt etwas mehr Funktionalität in einer eigenen Funktion laden(), die den aktuellen Wert von bildnr_num einliest und aus bilder_array den zugehörigen URL und Beschriftung entnimmt. Die Datei wird in den Movieclip geladen, die Beschriftung in das dynamische Textfeld eingetragen:

bild_mc.loadMovie(bilder_array[bildnr_num-1][0]);
dateiname_txt.text = bilder_array[bildnr_num-1][0];
beschriftung_mc.text_txt.text = bilder_array[bildnr_num-1][1];
}


Schaltflächen, die Erste

Bildergalerie mit Flash MX 2004

Zur Navigation innerhalb der Galerie gibt es rechts unten im Film zwei Schaltflächen zum Vor- und Zurückspringen. Der zugehörige Actionscript-Behandlungscode ist relativ einfach: bildnr_num wird um 1 erhöht oder verringert und laden() erneut aufgerufen.

Ist das Ende der Bilderliste erreicht, wird die Schaltfläche zum Vorspringen deaktiviert. Bei der Anzeige des ersten Bildes kann nicht mehr zurückgesprungen werden. Diese deaktivierten Schaltflächen müssen natürlich auch wieder aktiviert werden. Hier der Code für das Drücken der Vorwärts-Schaltfläche ? der Code für das Gegenstück für Rückwärts ist analog aufgebaut:

on (release) {
if (bildnr_num < bilder_array.length) {
bildnr_num ++;
laden();
}
if (bildnr_num == bilder_array.length) {
vor_btn.enabled = false;
}
if (bildnr_num == 2) {
zurueck_btn.enabled = true;
}
}

Die mit an_aus beschriftete Schaltfläche blendet die Bildbeschriftung ein oder aus. Der zugehörige Code ist sehr einfach: Mit dem Negationsoperator wird einfach der aktuelle Wert der _visible-Eigenschaft des Movieclips mit dem dynamischen Textfelds mit der Beschriftung geändert: Aus true (sichtbar) wird false (unsichtbar) und umgekehrt:

on (release) {
beschriftung_mc._visible = !beschriftung_mc._visible;
}


Schaltflächen, die Zweite

Bildergalerie mit Flash MX 2004

Die 24 Schaltflächen in der Bibliothek werden dazu verwendet, um zwischen den Bildern schnell hin und her springen zu können. Natürlich werden nur so viele Schaltflächen eingeblendet, wie sich Bilder in der XML-Datei befinden (es sind nur maximal 24 Bilder möglich). Nach dem Auslesen der XML-Datei werden die Schaltflächen aus der Bibliothek geladen, automatisch positioniert und der Alphatransparenzwert auf 50 gesetzt, damit sie dunkler erscheinen.

for (i=1; i<=bilder_array.length; i++) {
_root.attachMovie("BildIcon" + i + "_btn", "bild" + i + "_mc", i);
_root["bild" + i + "_mc"]._x = ((i-1) % 12) * 25 + 20;
_root["bild" + i + "_mc"]._y = (i <= 12) ? 349.5 : 370;
_root["bild" + i + "_mc"]._alpha = 50;

Ein Skript lädt das zugehörige Bild. Hierbei bedienen Sie sich eines Tricks. Wenn Sie innerhalb der Schaltfläche this in eine Zeichenkette umwandeln, erhalten Sie den Namen des Movieclips, also level0.bildXX_mc. Mit substring() extrahieren Sie XX_mc und wandeln das dann per parseInt() in einen Zahlenwert um. Dieser Wert ist die neue Bildnummer:

_root["bild" + i + "_mc"].onRelease = function() {
var s:String = this + "";
bildnr_num = parseInt(s.substring(12));
laden();
};

Nun müssen Sie nur noch dafür sorgen, dass in der Funktion laden() die Alphawerte für die Schaltflächen korrekt angepasst werden. Sie sehen auch, wozu die Variable bildnr_alt_num überhaupt gut ist: Die Schaltfläche des vorherigen Bildes wird abgedunkelt, der Alphawert der Schaltfläche für das aktuelle Bild auf 100 gesetzt.

_root["bild" + bildnr_alt_num + "_mc"]._alpha = 50;
_root["bild" + bildnr_num + "_mc"]._alpha = 100;
bildnr_alt_num = bildnr_num;

Denken Sie noch daran, nach dem dynamischen Erzeugen der Schaltflächen zumindest einmal laden() aufzurufen, damit alles korrekt initialisiert wird.
Die Bildergalerie ist jetzt fertig. Die Vorteile liegen auf der Hand: Wenn Sie eine neue Galerie erstellen möchten, benötigen Sie lediglich eine neue XML-Datei und laden diese zusammen mit den jeweiligen Bildern auf den Webserver. Fertig ist das Fotoalbum. Alles andere, wie Anzeige und Navigation, übernimmt der Flash-Film für Sie.

Alle Dateien zum Workshop finden Sie auf der Heft-CD und im Bereich Listings auf der Website.