Auf der Suche nach immer neuen Varianten für Bildergalerien und deren Benutzeroberfläche bleibt man entweder bei den ganz spektakulären oder den vollkommen intuitiven Exemplaren hängen. Der Bilderschieber gehört zu letzterer Gattung.
Eine der wichtigsten Anforderungen an Bildergalerien liegt im Versuch, möglichst wenig Platz zu verschwenden, um die Bilder in voller Pracht darstellen zu können. In der Realwelt würde man für diese Aufgabe die vertikale Stapelung der Bilder verwenden um dann bei der Präsentation effektvoll ein Bild nach dem anderen vom Stapel zu ziehen.
Die Bilder liegen wie auf einem Stapel in der Website
Wir realisieren einen solchen interaktiven Bilderstapel in Flash. Dazu legen Sie zehn Bilder mit den Bezeichnungen „bild0.jpg“ bis „bild10.jpg“ in einen Ordner. Die Bilder haben sämtlich das Format 400 mal 300 Pixel. Natürlich können diese Bilder jederzeit durch gleich dimensionierte überschrieben werden.
Setup
Starten Sie einen Flash-Film mit der Kantenlänge 600 mal 400 Pixel. Setzen Sie den Hintergrund auf dunkelgrau und erhöhen Sie die Filmgeschwindigkeit auf 25 Frames pro Sekunde. Beides in den „Eigenschaften“.
Zunächst erstellen wir einen neutralen Bildcontainer. Um die Justierung der Elemente einfach zu gestalten, importieren Sie eines Ihrer Motive auf die Bühne. Wandeln Sie es in ein MovieClip namens „platzhalter“ um und geben Sie ihm auch den gleichen Instanznamen. Nun wandeln Sie das fertige Clip erneut in ein MovieClip um. Das bekommt den Symbolnamen „bild“.
Das Platzhalter-Clip wird per ActionScript in den Film geladen
Drücken Sie „STRG + L“ und finden Sie das „bild“ in der Bibliothek. Klicken Sie mit rechts auf den Namen und gehen Sie in die „Eigenschaften“. Dort erlauben Sie, dass dieses Clip für „Actionscript exportiert“ werden kann. Der Bezeichner bleibt „bild“. Durch diese Maßnahme kommen wir mit einer winzigen Steuerungsdatei von nur knapp zwei Kilobyte aus.
Klicken Sie nun doppelt auf das Bild. Erzeugen Sie in Frame 20 ein Schlüsselbild. Erzeugen Sie ein weiteres in Frame 10 und verschieben Sie das Bild um fast die gesamt Breite nach rechts. Nur ein schmaler Streifen von 10 Pixel bleibt stehen. Erzeugen Sie zwei Tweenings und lassen Sie dies jeweils „am Ende“ abbremsen (Eigenschaften), um eine weiche Landung zu simulieren.
Über die Motiv-Ebene legen Sie nun eine Masken-Ebene. Zeichnen Sie ein Rechteck, das die gleichen Ausmaße hat, wie das Motiv im ersten Frame. Wenn das Motiv nach rechts gleitet, bleibt schließlich nur ein feiner Streifen auf der rechten Seite zu sehen.
Das Bildmotiv gleitet unter der Maske weg
Erstellen Sie jetzt noch eine neue Ebene. Zeichnen Sie am linken Bildrand ein hochkantiges Rechteck und verwandeln Sie dieses in eine Schaltfläche. Es sollte sauber mit dem Bild abschließen. Setzen Sie in Frame 10 ein Schlüsselbild und verschieben Sie den Button auf die rechte Seite, so dass er erneut die linke Kante berührt. Anschließend setzen Sie in Frame 2 und 11 ein leeres Schlüsselbild. ™
Material zum Artikel:
