Animations-Techniken mit dem Bewegungs-Tween
Mit dem Bewegungs-Tween bringen Sie sprichwörtlich Bewegung ins Spiel. Das Bewegungs-Tween erlaubt das Erstellen von Animationen mit Objekt-Verschiebungen, -Neigungen, -Drehungen und -Skalierungen. Dabei bestimmen Sie lediglich Ausgangs- und Endzustand durch die Platzierung entsprechender Schlüsselbilder. Alle Zwischenschritte, also der gesamte Animationsablauf, wird von Flash automatisch berechnet. Sollte Ihnen bei einer Verschiebung der berechnete Bewegungsablauf einmal nicht gefallen, dann können Sie mit Hilfe einer Pfadebene sogar selbst bestimmen, wie das Objekt vom Punkt A zum Punkt B gelangen soll.
Erstellen Sie ein neues Flash-Dokument und platzieren Sie auf der bestehenden Ebene im ersten Bild ein Objekt. Wandeln Sie das Objekt in ein Movieclip-Symbol um. Stellen Sie hierfür sicher, dass das Objekt markiert ist und betätigen Sie anschließend die Funktionstaste F8. Im drauffolgenden Fenster vergeben Sie einen aussagekräftigen Namen und wählen als Verhalten „Movieclip“. Verlassen Sie das Fenster über die OK-Schaltfläche. Erstellen Sie nun an einer höheren Position der Zeitleiste durch Betätigen der Taste F6 ein weiteres Schlüsselbild. Da wir zunächst eine Animation mit Objektverschiebung erzielen wollen, positionieren Sie das Objekt in diesem Schlüsselbild an eine andere Stelle der Bühne. Markieren Sie erneut das erste Schlüsselbild und begeben Sie sich in das Bedienfeld „Eigenschaften“. Wählen Sie unter „Tween“ den Eintrag „Bewegung“.
Die Eigenschaften des Bewegungs-Tweens:
Flash berechnet daraufhin automatisch alle nötigen Zwischenschritte für die Animation. In Ihrer Zeitleiste sollten Sie einen länglichen Pfeil zwischen dem ersten und zweiten Schlüsselbild auf Lila gefärbten Hintergrund vorfinden.
Bewegungs-Tween in der Zeitleiste:
Die Möglichkeiten des Bewegungs-Tweens sind damit aber noch längst nicht ausgeschöpft. Wählen Sie im Bedienfeld „Eigenschaften“ unter „Abbremsen“ einen positiven Wert, so wird das Objekt zum Ende der Animation langsamer. Ein negativer Wert bewirkt entsprechend, dass sich das Objekt zu Beginn der Animation langsamer bewegt. Haben Sie sich unter der Option „Drehen“ für den Eintrag „Nach rechts“ oder „Nach links“ entschieden, so rotiert das Objekt während der Animation zusätzlich um die eigene Achse. Im nebenstehenden Textfeld bestimmen Sie die Anzahl der Rotationen innerhalb eines Animationsablaufs. Ein weiterer interessanter Effekt ergibt sich aus der Option „An Pfad ausrichten“. Bei Bewegungs-Tweens mit den noch vorzustellenden Pfadebenen erzeugen Sie somit einen viel realistischeren Animationsablauf. Betrachten Sie hierfür die angefügte Beispieldatei am Ende des Artikels.
Lassen Sie uns die Animation um einen zweiten Bewegungs-Tween erweitern. Ein zweites Objekt soll unser bestehendes Objekt umkreisen. Da unser bestehendes Objekt seinerseits durch das bestehende Tweening die Position stetig verändert, muss das neue Objekt entsprechend dem ersten Objekt folgen. Auf Grund der Tatsache, dass wir unser vorhandenes Objekt zu Beginn in ein Movieclip-Symbol konvertiert haben, ist dies jedoch kein Problem. Wechseln Sie in den Bearbeitungsmodus des Movieclips. Klicken Sie hierfür doppelt auf die auf der Bühne befindliche Instanz. Sie können den Bearbeitungsmodus ebenso über die Bibliothek erreichen. Klicken Sie zu diesem Zweck in der Bibliothek mit der rechten Maustaste auf den Movieclip und wählen Sie im sich öffnenden Kontextmenü den Eintrag „Bearbeiten“. Im Bearbeitungsmodus des Movieclips angelangt, sollten Sie eine leere Zeitleiste antreffen. Auf der Bühne befindet sich lediglich das bereits erstellte Objekt. Erzeugen Sie eine neue Ebene. Um einen kreisförmigen Bewegungsablauf zu erhalten, benötigen wir eine so genannte Pfadebene. Wie eingangs erwähnt, können Sie mit Hilfe einer Pfadebene den Bewegungsablauf eigenhändig bestimmen. Hierfür müssen Sie jedoch einen Pfad einzeichnen, an dem sich Flash zur Berechnung der Animationsschritte orientieren kann. Wählen Sie das Ellipsenwerkzeug aus. Wir benötigen lediglich die Kontur der Ellipse. Deaktivieren Sie daher die Füllfarbe oder Löschen Sie die Füllung nach dem Erstellen der Ellipse sofort wieder. Die Ellipse sollte das bestehende Objekt umschließen, wie in folgender Grafik:
Die bisherigen Bühnenobjekte:
Ein Pfad muss eine erkennbare Anfangs- und Endposition haben. Die Ellipse darf daher nicht geschlossen sein. Entfernen Sie mit dem Radiergummiwerkzeug oben mittig einen kleinen Bereich der Kontur. Betätigen Sie nun die rechte Maustaste oberhalb der Ebene und setzen Sie den Haken unter „Führungsebene“, um die Ebene in eine Pfadebene umzuwandeln. Erstellen Sie daraufhin eine weitere Ebene für das zu animierende Objekt. Ziehen Sie die neue Ebene unter die Pfadebene. Die Ebene wird folglich eingerückt dargestellt. Erzeugen Sie auf der Ebene ein neues Objekt und wandeln Sie dieses sofort in ein Movieclip-Symbol um. Erzeugen Sie in der aktuellen Ebene sowie in der Pfadebene an einer höheren Position der Zeitleiste ein Schlüsselbild. Damit das Objekt während der Animation dem Pfad folgt, müssen Sie das Objekt am Pfad ausrichten. Gehen Sie in das erste Schlüsselbild und ziehen Sie das Objekt an die Startposition des Pfades.
Wiederholen Sie diesen Schritt im zweiten Schlüsselbild für die Endposition und erstellen Sie anschließend in gewohnter Manier einen Bewegungs-Tween. Die Zeitleiste sollte nun wie folgt aussehen:
Die Zeitleiste der Pfadanimation:
In unserer Grafik beinhaltet die Ebene „Viereck rot“ das zuerst erstellte Objekt. Direkt darunter befindet sich die Pfadebene mit der eingerückten Ebene „Viereck blau“. Die zuletzt genannte Ebene enthält das soeben erstellte Bewegungs-Tween. Alle Ebenen und Objekte finden Sie ebenso in der Beispieldatei wieder.
Testen Sie die Animation durch Betätigen der Tastenkombination Strg + Enter. Beim Umkreisen des statischen Objektes entsteht ein leichter 3D-Eindruck. Um diesen Eindruck zu verstärken, können Sie weitere Tweenings einsetzen. Ein dichter erscheinendes Objekt wirkt beispielsweise größer und häufig auch heller. Erstellen Sie an den entsprechenden Positionen, an denen sich das Objekt scheinbar näher befindet, weitere Schlüsselbilder in der Zeitleiste.
Die Zeitleiste mit neuen Schlüsselbildern:
Jetzt können Sie das Objekt in den erzeugten Schlüsselbildern markieren und über das Bedienfeld „Transformieren“ skalieren. Zum Verändern der Farbe gehen Sie in das Bedienfeld „Eigenschaften“ und wählen unter der Option „Farbe“ beispielsweise den Eintrag „Farbton“. Bei Bedarf können Sie den 3D-Effekt durch Schattierungen weiter verstärken. Seien Sie kreativ und probieren Sie gerne etwas herum. Nur so gewinnen Sie die nötige Sicherheit im Umgang mit Tweenings.
Beispieldatei: Verschiedene Bewegungs-Tweens [Animations-Techniken_mit_dem_Bewegungs-Tween.zip]
Erstellen Sie ein neues Flash-Dokument und platzieren Sie auf der bestehenden Ebene im ersten Bild ein Objekt. Wandeln Sie das Objekt in ein Movieclip-Symbol um. Stellen Sie hierfür sicher, dass das Objekt markiert ist und betätigen Sie anschließend die Funktionstaste F8. Im drauffolgenden Fenster vergeben Sie einen aussagekräftigen Namen und wählen als Verhalten „Movieclip“. Verlassen Sie das Fenster über die OK-Schaltfläche. Erstellen Sie nun an einer höheren Position der Zeitleiste durch Betätigen der Taste F6 ein weiteres Schlüsselbild. Da wir zunächst eine Animation mit Objektverschiebung erzielen wollen, positionieren Sie das Objekt in diesem Schlüsselbild an eine andere Stelle der Bühne. Markieren Sie erneut das erste Schlüsselbild und begeben Sie sich in das Bedienfeld „Eigenschaften“. Wählen Sie unter „Tween“ den Eintrag „Bewegung“.
Die Eigenschaften des Bewegungs-Tweens:
Flash berechnet daraufhin automatisch alle nötigen Zwischenschritte für die Animation. In Ihrer Zeitleiste sollten Sie einen länglichen Pfeil zwischen dem ersten und zweiten Schlüsselbild auf Lila gefärbten Hintergrund vorfinden.
Bewegungs-Tween in der Zeitleiste:
Die Möglichkeiten des Bewegungs-Tweens sind damit aber noch längst nicht ausgeschöpft. Wählen Sie im Bedienfeld „Eigenschaften“ unter „Abbremsen“ einen positiven Wert, so wird das Objekt zum Ende der Animation langsamer. Ein negativer Wert bewirkt entsprechend, dass sich das Objekt zu Beginn der Animation langsamer bewegt. Haben Sie sich unter der Option „Drehen“ für den Eintrag „Nach rechts“ oder „Nach links“ entschieden, so rotiert das Objekt während der Animation zusätzlich um die eigene Achse. Im nebenstehenden Textfeld bestimmen Sie die Anzahl der Rotationen innerhalb eines Animationsablaufs. Ein weiterer interessanter Effekt ergibt sich aus der Option „An Pfad ausrichten“. Bei Bewegungs-Tweens mit den noch vorzustellenden Pfadebenen erzeugen Sie somit einen viel realistischeren Animationsablauf. Betrachten Sie hierfür die angefügte Beispieldatei am Ende des Artikels.
Lassen Sie uns die Animation um einen zweiten Bewegungs-Tween erweitern. Ein zweites Objekt soll unser bestehendes Objekt umkreisen. Da unser bestehendes Objekt seinerseits durch das bestehende Tweening die Position stetig verändert, muss das neue Objekt entsprechend dem ersten Objekt folgen. Auf Grund der Tatsache, dass wir unser vorhandenes Objekt zu Beginn in ein Movieclip-Symbol konvertiert haben, ist dies jedoch kein Problem. Wechseln Sie in den Bearbeitungsmodus des Movieclips. Klicken Sie hierfür doppelt auf die auf der Bühne befindliche Instanz. Sie können den Bearbeitungsmodus ebenso über die Bibliothek erreichen. Klicken Sie zu diesem Zweck in der Bibliothek mit der rechten Maustaste auf den Movieclip und wählen Sie im sich öffnenden Kontextmenü den Eintrag „Bearbeiten“. Im Bearbeitungsmodus des Movieclips angelangt, sollten Sie eine leere Zeitleiste antreffen. Auf der Bühne befindet sich lediglich das bereits erstellte Objekt. Erzeugen Sie eine neue Ebene. Um einen kreisförmigen Bewegungsablauf zu erhalten, benötigen wir eine so genannte Pfadebene. Wie eingangs erwähnt, können Sie mit Hilfe einer Pfadebene den Bewegungsablauf eigenhändig bestimmen. Hierfür müssen Sie jedoch einen Pfad einzeichnen, an dem sich Flash zur Berechnung der Animationsschritte orientieren kann. Wählen Sie das Ellipsenwerkzeug aus. Wir benötigen lediglich die Kontur der Ellipse. Deaktivieren Sie daher die Füllfarbe oder Löschen Sie die Füllung nach dem Erstellen der Ellipse sofort wieder. Die Ellipse sollte das bestehende Objekt umschließen, wie in folgender Grafik:
Die bisherigen Bühnenobjekte:
Ein Pfad muss eine erkennbare Anfangs- und Endposition haben. Die Ellipse darf daher nicht geschlossen sein. Entfernen Sie mit dem Radiergummiwerkzeug oben mittig einen kleinen Bereich der Kontur. Betätigen Sie nun die rechte Maustaste oberhalb der Ebene und setzen Sie den Haken unter „Führungsebene“, um die Ebene in eine Pfadebene umzuwandeln. Erstellen Sie daraufhin eine weitere Ebene für das zu animierende Objekt. Ziehen Sie die neue Ebene unter die Pfadebene. Die Ebene wird folglich eingerückt dargestellt. Erzeugen Sie auf der Ebene ein neues Objekt und wandeln Sie dieses sofort in ein Movieclip-Symbol um. Erzeugen Sie in der aktuellen Ebene sowie in der Pfadebene an einer höheren Position der Zeitleiste ein Schlüsselbild. Damit das Objekt während der Animation dem Pfad folgt, müssen Sie das Objekt am Pfad ausrichten. Gehen Sie in das erste Schlüsselbild und ziehen Sie das Objekt an die Startposition des Pfades.
Wiederholen Sie diesen Schritt im zweiten Schlüsselbild für die Endposition und erstellen Sie anschließend in gewohnter Manier einen Bewegungs-Tween. Die Zeitleiste sollte nun wie folgt aussehen:
Die Zeitleiste der Pfadanimation:
In unserer Grafik beinhaltet die Ebene „Viereck rot“ das zuerst erstellte Objekt. Direkt darunter befindet sich die Pfadebene mit der eingerückten Ebene „Viereck blau“. Die zuletzt genannte Ebene enthält das soeben erstellte Bewegungs-Tween. Alle Ebenen und Objekte finden Sie ebenso in der Beispieldatei wieder.
Testen Sie die Animation durch Betätigen der Tastenkombination Strg + Enter. Beim Umkreisen des statischen Objektes entsteht ein leichter 3D-Eindruck. Um diesen Eindruck zu verstärken, können Sie weitere Tweenings einsetzen. Ein dichter erscheinendes Objekt wirkt beispielsweise größer und häufig auch heller. Erstellen Sie an den entsprechenden Positionen, an denen sich das Objekt scheinbar näher befindet, weitere Schlüsselbilder in der Zeitleiste.
Die Zeitleiste mit neuen Schlüsselbildern:
Jetzt können Sie das Objekt in den erzeugten Schlüsselbildern markieren und über das Bedienfeld „Transformieren“ skalieren. Zum Verändern der Farbe gehen Sie in das Bedienfeld „Eigenschaften“ und wählen unter der Option „Farbe“ beispielsweise den Eintrag „Farbton“. Bei Bedarf können Sie den 3D-Effekt durch Schattierungen weiter verstärken. Seien Sie kreativ und probieren Sie gerne etwas herum. Nur so gewinnen Sie die nötige Sicherheit im Umgang mit Tweenings.
Beispieldatei: Verschiedene Bewegungs-Tweens [Animations-Techniken_mit_dem_Bewegungs-Tween.zip]
