Foto-Folder

Teil 3: Flash 8: Animierte Bildergalerie

Für die Animation benötigen Sie zunächst zusätzliche Einzelbilder. Fügen Sie mit F5 den einzelnen Bildern in den fünf meta-Ebenen weitere Frames (Bilder) bis zum Frame 40 hinzu.

Flash 8: Animierte Bildergalerie

© Archiv

Richtschnur: Die Schablone hilft beim Ausrichten der Instanzen.

Bei Frame 10 setzen Sie jeweils ein Keyframe mit F6 hinzu, erkennbar am schwarzen Punkt im Frame. Auch bei Frame 15 ergänzen Sie je einen Keyframe in allen meta-Ebenen.

Bei Frame 15 bewegen Sie dann alle Instanzen deckungsgleich zur jeweils niedrigeren Instanz. Klicken Sie mit der rechten Maustaste für jede Ebene auf den Bereich zwischen Frame 10 und Frame 15, und wählen Sie Bewegungs-Tween erstellen. Das Ergebnis sollte in der Zeitleiste so aussehen:

Setzen Sie auf der Ebene meta1 bei Frame 12 mit F6 ein Keyframe und dahinter bei Frame 13 einen leeres Keyframe mit F7. Alle Frames dahinter löschen Sie mit Umschalt-F6. Damit das vorderste Bild beim Klick auf den Weiter- Button animiert an die hinterste Stelle fliegt, bewegen Sie das meta-pic im Keyframe-12 nach links außen. Die Position sollte in etwa auf halbem Weg nach hinten liegen. Um jetzt die Illusion von Dreidimensionalität zu schaffen, skalieren Sie das meta-pic etwa auf die Größe des meta3-Meta-pics (das etwa in der Mitte desWegs liegt).

Flash 8: Animierte Bildergalerie

© Archiv

Frames-Verschieben: Feintuning der Animation in der Zeitleiste

Eine weitere Ebene unter der Ebene meta5 erstellen Sie mit dem Namen meta0. Dort kopieren Sie ins Frame 10 das Keyframe von der Ebene meta1, Frame 12.

WichtigDen Instanznamen aller meta-pics in der Ebene meta0 müssen Sie von meta1 auf meta0 ändern.

Über einen Rechtsklick auf das Frame kopieren Sie das Bild. Via Rechtsklick auf das Zielframe fügen Sie das Bild ein.

Dieses Frame wählen Sie und drücken F6. Selektieren Sie das neu erschienene Keyframe und schieben Sie es nach Frame 12. Dieses Keyframe duplizieren Sie ein weiteres Mal mit F6, die weitere Kopie ziehen Sie auf Frame 15 und transformieren es deckungsgleich mit der Instanz meta5 aus Frame 10.

Zwischen die beiden Keyframes in der Ebene meta0 setzen Sie wieder einen Bewegungs- Tween. Ergänzen Sie eine Ebene mit dem Namen aktion, die im Frame 10 ein leeres Keyframe namens start erhält und bei Frame 15 ein Keyframe mit dem Namen stop besitzt.

Zum Schluss setzen Sie auf der Ebene aktion im Frame 35 und Frame 45 leere Keyframes und nennen diese dann start2 und stop2. Um durch die Bilder auch rückwärts scrollen zu können, brauchen Sie dieselbe Animation erneut, jedoch gespiegelt. Die Rückwärts-Animation beginnt bei Frame 35.

Flash 8: Animierte Bildergalerie

© Archiv

Platzhalter: Mit dieser Einstellung legen Sie fest, dass das Objekt nicht zu sehen ist.

Der Prozess ist viel einfacher als er sich anhört, da Sie die Keyframes nicht ändern. Sie werden lediglich um eine gedachte Achse zwischen Frame 20 und Frame 35 gespiegelt

Sie kopieren also z.B. das Keyframe aus der Ebene meta3, Frame 10 in derselben Ebene ins Frame 45, Keyframe-20 in Frame 35.

Lediglich die Ebenen meta1 und meta0 werden nicht genau symmetrisch gespiegelt. Das Keyframe auf der Ebene meta0 im Frame 10 braucht z.B. nicht gespiegelt zu werden. Dafür müssen Sie das Keyframe aus der meta1- Ebene im Frame 12 in die Frames 35 und 34 kopieren. Grund dafür ist eine Eigenheit von Flash: Solange zwei identische Instanzen in zwei unterschiedlichen Keyframes liegen, welche sich aber berühren, behält Flash alle Einstellungen an dieser Instanz auch beim Wechsel von einem Keyframe zum anderen bei.

Sollte aber zwischen den beiden Instanzen eine Lücke, also ein leeres Keyframe liegen, "vergisst" Flash alle bis dahin festgelegten Einstellungen.

Da wir im Frame start alle bilder (green1, green2, green3... ) über ActionScript zentrieren und entsprechend sichtbar und unsichtbar schalten werden, müssen alle Instanzen eine durchgehende Verbindung zu diesem Frame besitzen. Das gilt auch für das Frame start2. Da start und start2 nicht symmetrisch sind, sind es die Verbindungskeyframes auch nicht.

Damit der Inhalt der Verbindungs-Keyframes nicht zu sehen ist, schalten Sie die Sichtbarkeit (= den Alpha-Wert) manuell auf 0%.

TippDie Verbindungskeyframes sind nur nötig, um die Einstellungen aus ActionScript beizubehalten, nicht auf Grund des Inhalts.

Flash 8: Animierte Bildergalerie

© Archiv

Aktion auf Klick: Hier legen Sie die Bereiche fest, die eine Handlung auslösen.

Wählen Sie zuerst das meta-pic in Ebene meta0, Frame start. Im Eigenschaften-Fenster stellen Sie die Farbe auf Alpha mit dem Wert 0%.

Verfahren Sie ebenso mit dem meta-pic meta1 aus der Ebene meta1, Frame start2.

Störende Ebenen lassen sich einfach ausschalten. Dafür klicken Sie in der Zeitleiste auf den entsprechenden schwarzen Punkt unter dem Auge-Symbol.

Auf die gleiche Weise schalten Sie die Ebene erneut ein.

AchtungAusgeschaltete Ebenen werden im fertigen Flash-Film trotzdem zu sehen sein.

Flash 8: Animierte Bildergalerie

© Archiv

Stop & go: Die Zeitleiste mit Rückspul-Option enthält je zwei Start- und Stopp-Keyframes.

Nachdem alle Keyframes kopiert sind, fügen Sie an den entsprechenden Stellen wieder Bewegungs-Tweens ein.

Die Zeitleiste sollte jetzt so aussehen:

Mehr zum Thema

HTML 5
Webgestaltung

Google Web Designer ist spezialisiert auf HTML5. Ein Vorteil dieses Standards ist das einfache Einbinden von Videos mit dem Element video. Wir zeigen…
Wir verraten, wie Sie Fritzboxen und andere Router vor Hackern schützen.
Fritzbox, Asus, Belkin und Co.

Fritzbox, Asus, Belkin oder DLink - die Liste der geknackten Router ist lang. Hacker stahlen Passwörter oder NAS-Daten. So machen Sie Ihren Router…
Wir führen Sie zur eigenen Windows-App - unserem PC-Magazin-RSS-Feed.
C# und XAML

Wir zeigen, wie Sie Windows 8.1 Apps selbst programmieren können. Lernen Sie das App erstellen an Hand unseres Beispiels: dem RSS-Feed von PC…
Windows Tipps & Tricks: Benutzerrechte unter Windows 8.1
Programme richtig installieren

Wir zeigen Ihnen, wie Sie sich unter Windows 8.1 alle Benutzerrechte verschaffen und Programme richtig installieren.
Windows 8: Starbildschirm
Microsoft Project Siena

Erstellen Sie sich selbst eine App für Windows 8, die auf alle Funktionen Ihres Tablets zugreifen kann, inklusive Kamera, Mikrofon und Lautsprecher.…