r erstellen ein dreidimensional erscheinendes Bilderkarussell. Je nach Mausposition drehen sich die angezeigten Grafiken schneller und langsamer. Dieser tolle Effekt eignet sich für Diashows ebenso wie für Website-Navigation. Der Workshop führt in den Umgang mit geskripteten Animationen und XML ein.
Dieser Workshop basiert auf einem Video-Tutorial von TopDesigner Lee Brimelow.
Der geneigte Leser, der seit Jahren meinen Workshops folgt, kennt meine Vorliebe für Tweening. In vielen Fällen sind damit komplexe Animationen wesentlich schneller und einfacher zu erstellen, als per ActionScript. Dennoch gibt es Fälle, in denen die Programmierung einer Bewegung überlegen erscheint. Offensichtlich ist das dann der Fall, wenn ich den Code oder Teile davon immer wieder verwenden möchte. Und auch bei bestimmten Bewegungsformen ist ActionScript überlegen, etwa bei asymptotischen Bewegungen, wie dem weichen Abfedern einer Animation. ActionScript ist auch dort überlegen, wo es um eine variable Kreisbewegung geht. Sinus und Cosinus liefern die perfekte Grundlage für die dynamische Positionsberechnung.
Im folgenden Workshop erstellen wir ein dreidimensional erscheinendes Bilderkarussell. Je nach Mausposition drehen sich die angezeigten Grafiken schneller und langsamer. Sie werden dabei gleichzeitig im Hintergrund kleiner und vorne größer, was den dreidimensionalen Effekt verstärkt. Berührt der Mauszeiger eines der Bildchen, erscheint ein Tooltip. Klickt der Nutzer das Bild, wird eine Aktion ausgelöst. In unserem Fall zoomt das Bild in den Vordergrund und wird vergrößert. Ein schöner Spiegelungseffekt rundet die Anwendung ab.
Vorbereitung
Außerhalb des Flash-Films benötigen wir vor allem zehn Bilder. Sie werden in zwei unterschiedlichen Größen im Ordner des Flash-Films platziert. Die kleinere Bilderserie trägt Dateinamen von bild0.jpg bis bild9.jpg. Die größere Serie heißt gr_bild0.jpg bis gr_bild9.jpg. Die kleinen Bilder haben eine Outline von 100 x 75 Pixel, die großen von 400 x 300.
Alle Dateien liegen im gleichen Ordner, der Flash-Film selbst hat nur 19 Kilobyte
Die zweite Vorbereitung ist eine XML-Datei. Sie enthält die Dateinamen sowie eine Eigenschaft namens „bildunterschrift“. Das ist der Text, der im Tooltipp angezeigt werden wird.
Durch das Anlegen eines solchen zentralen Containers für die Bilder wird es sehr einfach, die dynamischen Abstände zu berechnen. Man muss nur die Anzahl der „bild“-Elemente zählen und nimmt diese Zahl als Grundlage für die Positionierung. Je weniger Elemente, um so größer müssen die Abstände sein. Außerdem lässt sich auf dieser Grundlage ein eindeutiges Ereignis definieren, dass das Ende des erfolgreichen Ladevorgangs anzeigt.
Die Struktur der Textdatei lautet wie folgt:
<?xml version="1.0" encoding="iso-8859-1"?>
<bilder>
<bild image="bild0.jpg" bigimage="gr_bild0.jpg" bildunterschrift="Kapstadt" />
... bis
<bild image="bild9.jpg" bigimage="gr_bild9.jpg" bildunterschrift="Barcelona" />
</bilder>
Auch diese Datei liegt im gleichen Ordner unter dem Namen „bilder.xml“.
Die Platzhalter
Starten Sie Flash. Nennen Sie die erste Ebene zu „Aktionen“ um. Erzeugen Sie eine zweite Ebene und nennen diese Platzhalter. Hier erscheint das einzige grafische Element. Es ist zunächst ein schlichtes Rechteck, welches Sie zum MovieClip verwandeln und ihm den Symbol- und Instanznamen „platzhalter“ geben. Letzteres geschieht – wie Sie wissen – im Eigenschaftsinspektor. Dieser Rahmen wird später das große Bild tragen.
Lee Brimelow arbeitet an dieser Stelle zunächst mit einer Vektorgrafik, die er erst zu einem späteren Zeitpunkt gegen dynamisch geladene Bilder eintauscht. Diesen Schritt sparen wir uns.
Gehen Sie auf „Einfügen/Neues Symbol“ und erstellen Sie ein neues MovieClip. Das bekommt den Symbolnamen „bild_container“. Zeichnen Sie nun erneut ein Rechteck, und zwar genau in den Dimensionen 100 x 75 Pixel. Wandeln Sie das in ein weiteres MovieClip um und nennen Sie Symbol und Instanz „inner“. Dieses Rechteck wird sofort wieder in ein MovieClip verwandelt, das den Symbol- und Instanznamen „rahmen“ erhält.
Um einen schönen optischen Effekt zu erzeugen, erstellen wir eine weitere Version dieses Rahmens als Spiegelung. Kopieren Sie das eben erzeugte MovieClip also, gehen Sie auf „Modifizieren/Transformieren/Vertikal spiegeln“ und legen Sie es direkt an die Unterkante des „rahmen“. Der neue Instanzname lautet „spiegelbild“.
Wenn Sie ein farbiges Rechteck als MovieClip „platzhalter“ einsetzen, erleichtert das die Positionierung
Damit die Spiegelung optisch glaubwürdig wird, muss sie immer schwächer erscheinen, je weiter sich die Reflexionsoberfläche vom Objekt distanziert. Sprich: Wir brauchen einen Verlauf über der Spiegelung. Sperren Sie also die aktuelle Ebene und erzeugen Sie eine weitere. Ziehen Sie einen Farbverlauf, der von hellgrau mit einer Deckkraft von 25 Prozent zu „unsichtbar“ also einer Deckkraft von „0“ abschwächt. Die volle Transparenz wird irgendwo bei der Hälfte des Verlaufs erreicht. Drehen Sie das Verlaufsrechteck so, dass Hellgrau oben ist.
Nun wandeln Sie dieses Rechteck zu einem MovieClip um und geben ihm den Symbol- und Instanznamen „Maske“.
Erzeugen Sie eine letzte Ebene im „bild_container“ und platzieren Sie folgendes Skript im ersten Frame:
spiegelbild.setMask(maske);
Dieser Befehl beschränkt den Wirkungsbereich der Maske auf die Inhalte von „spiegelbild“. Somit kann dort auch ein nicht rechteckiges Objekt erscheinen und der hellgraue Verlauf ist dennoch außerhalb nicht zu sehen. Damit die dynamische Maskierung funktioniert, muss für beide MovieClips, die Maske und das Spiegelbild, die Option „Bitmap-Zwischenspeicherung“ im Eigenschaftsinspektor aktiviert sein.
Die Maske wird nicht als Ebenenmaske definiert sondern als Objektmaske per ActionScript umgesetzt
Um das Aussehen des Effekts beurteilen zu können, kehren Sie zurück auf Szene 1. Dort legen Sie vorübergehend eine neue Ebene an und ziehen das Element „bild_container“ aus der Bibliothek auf die Bühne. Nach dem Drücken von „STRG + Enter“ sollten Rechteck und Spiegelung erscheinen. Falls Ihnen das zu abstrakt ist, können Sie jederzeit eines der kleinen Fotos in Flash importieren und in das MovieClip „rahmen“ legen. ™
