Bildergalerie im Laufband
Ich habe noch mal das Projekt http://www.flashdevelop.de/actionscript-3/bilder-links-rechts-scrollen.html aufgegriffen. Diese Bildergalerie lädt zunächst alle Vorschaubilder und nach Anfrage erst die Originalbilder. Das aneinandergereihten Bilder werden mit der Maus bewegt, je näher die Maus an den Rand kommt, desto schneller bewegt sich das Band.
Die Bilder werden über eine XML-Datei geladen, die Vorschaubilder (Thumbnails) müssen gleich der großen Bilder lauten, mit _T. Das heißt, wenn das große bild img_001.jpg heißt, so muss die Vorschau img_oo1_T.jpg heißen.
Die Projektdateien gibt es am Ende des Artikels.
Die zip Datei enthält, aus Platzgründen, nur die Vorschaubilder.
Kurz und knapp:
Der Sourcecode ist ausführlich kommentiert.
In der Main wird die XML-Datei geladen, ein Container (Sprite) für die großen Bilder erstellt, so wie der ImageContainer. Die Positionen des ImageContainer und der für die großen Bilder kann frei positioniert werden.
ImageContainer beinhaltet alle Vorschaubilder, bzw. alle Image Instanzen und Mausereignisse. Der ImageContainer lässt die Bilder links rechts scrollen. Dem ImageContainer erwartet ein Sprite, auf dem die großen Bilder angezeigt werden sollen.
Image beinhaltet ein Vorschaubild und das dazugehörige normale Bild und kümmert sich um die Abläufe der Animationen.
ImageEvent wird benötigt, um ein eigenes Event auszulösen, wenn die Animation von groß nach klein fertig ist.
Die XML hat verschiedene Attribute, mit der man das Band, die Großansicht und die Vorschaubilder einstellen kann.
thumbWidth = Breite des Vorschaubildes
thumbHeight = Höhe des Vorschaubildes
thumbSpacer = Abstand zwischen den Vorschaubildern
viewportListWidth = Breite des sichbaren Bereiches, der Vorschaubilder
viewportListHeight = Höhe des sichtbaren Bereiches, der Vorschaubilder
viewportWidth = Maximale Breite der großen Bilder
viewportHeight = Maximale Höhe der großen Bilder
Ein Bild wird mit dem img-Tag erstellt.
src = URL zum großen Bild
title = Ein Titel für das Bild (Wird ab der Version 0.0.2) angezeigt.
Version 0.0.3 hat eine neue Klasse PreloaderView dieser zeigt den Ladebalken in rund, finde ich persönlich schöner.
Die Sourcen als FlashDevelop-Projekt findet ihr hier: Bildergalerie Scroller
