Dialog

Faszinierende Beschleunigungs- bzw. Abbremseffekte in Flash

Rafiq R. Elmansy

In früheren Versionen von Flash® war es eine schwierige und zeitraubende Angelegenheit, Animationen über Bewegungs-Tweens mit realistischen Bewegungseffekten zu versehen. Die Funktion „Beschleunigung und Abbremsen“ war zwar hilfreich, stieß aber an ihre Grenzen, wenn sie auf komplexe Animationen angewendet wurde, denn um halbwegs realistische Effekte zu erzielen, mussten sehr viele Form- und Bewegungs-Tweens Bild-für-Bild erstellt werden.

Flash Professional 8 verfügt über die erweiterte Beschleunigungs- bzw. Abbremsfunktion „Benutzerdefinierte Beschleunigung und Abbremsen“. Diese neue Funktion ist mit einem Diagramm ausgestattet, das Ihnen mehr Möglichkeiten zum Steuern des Tweenings bietet. Die Beschleunigungskurve im Diagramm ermöglicht eine präzise, bildgenaue Steuerung von Bewegungs-Tweens. Außerdem können Sie mit der Funktion „Benutzerdefinierte Beschleunigung und Abbremsen“ auf jede einzelne Symboleigenschaft eine eigene, benutzerdefinierte Beschleunigungskurve anwenden.

Mithilfe dieser verbesserten Beschleunigungs- und Abbremsfunktion von Flash Professional 8 lassen sich auf einfache Weise faszinierende und unterhaltsame Effekte mit Bewegungs-Tweens erzielen.

In diesem Artikel wird die Funktionsweise des Beschleunigungs-/Abbremsdiagramms anhand konkreter Beispiele für interessante Animationseffekte erklärt. Darüber hinaus werden benutzerdefinierte Beschleunigungs- bzw. Abbremseigenschaften sowie das simultane Anwenden von mehreren Beschleunigungs- bzw. Abbremseffekten behandelt.

Voraussetzungen
Für diesen Lehrgang müssen Sie Flash Professional 8 installiert sowie die Übungsdateien heruntergeladen haben, die links unter der Überschrift „Downloads“ aufgeführt sind.

Außerdem sind Grundkenntnisse in Flash sowie praktische Erfahrungen im Umgang mit der Beschleunigungs- bzw. Abbremsfunktion und mit Bewegungs-Tweens erforderlich.

Benutzerdefinierte Beschleunigungs- bzw. Abbremseffekte in Flash

Es gibt in Flash mehrere Möglichkeiten, Beschleunigungs- bzw. Abbremseffekte für eine Animation zu steuern. Die erste Möglichkeit besteht in der Verwendung des Schiebereglers „Abbremsen“ im Eigenschafteninspektor. Dies war die Standard-Methode in früheren Flash-Versionen. Bei der zweiten Möglichkeit kommt das Dialogfeld „Benutzerdefinierte Beschleunigung und Abbremsen“ zum Einsatz, das nur für Bewegungs-Tweens zur Verfügung steht. (Bei der dritten Möglichkeit wird die Tween-Klasse/Easing-Methoden von ActionScript oder benutzerdefinierte ActionScript-Ausdrücke verwendet.)

Klicken Sie auf der Zeitleiste auf ein Bild mit Bewegungs-Tween und anschließend neben dem Schieberegler „Abbremsen“ auf die Schaltfläche „Bearbeiten“. Das Dialogfeld „Benutzerdefinierte Beschleunigung und Abbremsen“ wird angezeigt. Es enthält ein Diagramm, mit dem die Symboleigenschaften wie Position, Drehung, Skalierung, Farbe und Filter, die sich während einer Animation ändern, unabhängig voneinander gesteuert werden können.

Hinweis: Wenn Sie die benutzerdefinierte Beschleunigungs- bzw. Abbremsfunktion auf ein Symbol anwenden, wird im Eigenschafteninspektor beim Schieberegler „Abbremsen“ der Wert „--“ angezeigt.

Das Dialogfeld „Benutzerdefinierte Beschleunigung und Abbremsen“ umfasst die folgenden Funktionen:

• Mit dem Diagramm Beschleunigung und Abbremsen können Sie durch Bearbeiten der Kurvensteuerpunkte das Beschleunigen bzw. Abbremsen des Tweenings steuern (Näheres dazu im nächsten Abschnitt).
• Wenn Sie das Kontrollkästchen Eine Einstellung für alle Eigenschaften verwenden aktivieren, wird eine einzige Kurveneinstellung für alle Objekteigenschaften verwendet (diese Option ist standardmäßig aktiviert).
• Wenn Sie das Kontrollkästchen „Eine Einstellung für alle Eigenschaften verwenden“ deaktivieren, wird das Popupmenü Eigenschaft aktiviert, über das Sie für jede einzelne Symboleigenschaft (Position, Drehung, Skalierung, Farbe und Filter) eine eigene Kurveneinstellung festlegen können.
• Mit den Schaltflächen zum Abspielen und Stoppen können Sie die Auswirkungen der Kurveneinstellungen auf die Animation in einer Vorschau anzeigen.
• Mit der Schaltfläche Zurücksetzen wird die Beschleunigungskurve wieder auf ihre Standardposition zurückgesetzt.

Dieser Artikel beschäftigt sich hauptsächlich mit dem Beschleunigungs-/Abbremsdiagramm, das die leistungsfähigste Komponente der Beschleunigungs- bzw. Abbremsfunktion von Flash 8 darstellt.

Funktionsweise des Beschleunigungs-/Abbremsdiagramms

Das Beschleunigungs-/Abbremsdiagramm ist sehr einfach zu verwenden. Auf der horizontalen Achse ist die Anzahl der Bilder der Animation abgetragen, auf der vertikalen der Änderungsgrad der Animation in Prozent (Tweening). Mit den Steuerpunkten auf der Beschleunigungskurve wird die Animation gesteuert. Durch Klicken auf die Kurve können Punkte hinzugefügt, durch Auswählen von Punkten und Drücken der Entf-Taste können Punkte gelöscht werden.

Jeder Steuerpunkt verfügt über zwei Griffe, die so genannten Tangentenpunkte. Durch Verschieben dieser Tangentenpunkte wird das Verhalten der Beschleunigungskurve gesteuert (siehe Abb. 1). Dies wiederum wirkt sich auf die Flüssigkeit der resultierenden Tween-Animation aus.

Abb. 1: Beschleunigungs-/Abbremsdiagramm.

Sehen wir uns die verschiedenen Teile des Diagramms einmal näher an, um ihre Funktionsweise besser zu verstehen. Die Geschwindigkeit des Tweenings hängt von der Steigung der Beschleunigungskurve ab. Die vertikalen Bereiche der Kurve mit großer Steigung stellen eine schnelle Animation dar, während die horizontalen Bereiche mit geringer Steigung eine langsame Animation darstellen. Die Beschleunigungskurve in Abb. 2 steigt zu Beginn der Animation sehr stark an, verläuft dann (fast) horizontal, um dann am Ende der Animation wieder stark anzusteigen.

Abb. 2: Auswirkung der Beschleunigungskurvensteigung auf die Animation.

Spielen Sie die folgende Demo-Animation ab, um die Auswirkung der Beschleunigungskurvensteigung aus Abb. 2 auf die Animation zu beobachten.

Wie bereits erwähnt werden die Steigungen der Beschleunigungskurve durch die Tangentenpunkte gesteuert. Steil ansteigende oder fallende Kurven ergeben harte, schnelle Animationen, die sich zur Simulation von Kollisionen eignen, wie z. B. von zwei aufeinanderprallenden Metallkugeln. Wir werden später noch einmal auf dieses Beispiel zurückkommen.

Flach ansteigende oder fallende Kurven ergeben weiche Animationen, die sich zur Simulation von langsamen Bewegungen eignen. Die erste Kollision mit dem gegenüberliegenden Rand in Abb. 3 ist über einen harten Animationspunkt definiert, der eine schnelle Bewegung des animierten Sterns anzeigt, während der flache Teil der Beschleunigungskurve ein langsames Zurückgleiten des Sterns zur Mitte der Bühne ergibt.

Abb. 3: Tangentenpunkte auf der Beschleunigungskurve.

Spielen Sie die folgende Demo-Animation ab, um die Auswirkung der Tangentenpunkte aus Abb. 3 auf die Animation zu beobachten.

In diesem Beispiel zeigt die Lage der Punkte auf der Kurve den Tweening-Prozentsatz an. Folgt ein Punkt mit geringem Wert auf einen Punkt mit hohem Wert, bedeutet dies, dass der Tweening-Prozentsatz sinkt. Der Punkt mit dem geringeren Wert in Abb. 3 zeigt an, dass das Bewegungs-Tweening nach Erreichen des maximalen Effektes (100 %) auf 30 % verringert wird.

Erstellen von Animationseffekten mit dem Beschleunigungs- bzw. Abbremsdiagramm

Im folgenden Beispiel wird die Kollision von zwei Metallkugeln simuliert. In früheren Flash-Versionen mussten eine ganze Reihe von Bewegungs-Tweens und Schlüsselbilder eingerichtet werden, um den gewünschten Effekt zu erreichen. Wie wir sehen werden, lässt sich der Effekt nun mit einem einzigen Bewegungs-Tween pro Symbol (Metallkugel) erreichen.

Führen Sie die nachfolgenden Schritte aus, um den Beispieleffekt zu erzeugen:

1. Erstellen Sie ein Metallkugel-Symbol wie im Beispiel „MetalBall.fla“ und platzieren Sie es auf der Bühne.
2. Duplizieren Sie die Instanz des Metallkugel-Symbols und platzieren Sie die beiden Instanzen auf jeweils unterschiedlichen Ebenen.
3. Platzieren Sie die Metallkugel-Symbole im ersten Schlüsselbild der Animation wie in Abb. 4 dargestellt. Verwenden Sie den gleichen Transformationspunkt wie in der Abbildung.

Abb. 4: Positionen der Symbole im ersten Animationsschüsselbild.

4. Erstellen Sie bei Bild 50 ein weiteres Schlüsselbild und platzieren Sie die Metallkugel-Symbole wie in Abb. 5 dargestellt.

Abb. 5: Position der Symbole in Bild 50

5. Erstellen Sie ein Bewegungs-Tween für beide Symbole und wählen Sie alle dazugehörigen Bilder aus.
6. Klicken Sie im Eigenschafteninspektor neben dem Schieberegler „Abbremsen“ auf die Schaltfläche „Bearbeiten“.
7. Bearbeiten Sie im Dialogfeld „Benutzerdefinierte Beschleunigung und Abbremsen“ die Beschleunigungskurve so, dass sie der Kurve in Abb. 6 entspricht.
8. Erstellen Sie eine Vorschau der Animation, indem Sie im Dialogfeld auf die Schaltfläche „Abspielen“ klicken. Das Ergebnis sollte ungefähr der folgenden Animation entsprechen.

Abb. 6: Bearbeiten der Beschleunigungskurve

Spielen Sie die folgende Beispiel-Animation mit Bewegungs-Tweening ab. Zur Erstellung dieser Animation wurden entsprechende Einstellungen im Dialogfeld „Benutzerdefinierte Beschleunigung und Abbremsen“ vorgenommen:

Simultanes Anwenden von mehreren Beschleunigungs- bzw. Abbremseffekten

Das Kontrollkästchen „Eine Einstellung für alle Eigenschaften verwenden“ im Dialogfeld „Benutzerdefinierte Beschleunigung und Abbremsen“ ist standardmäßig aktiviert. Sie haben jedoch die Möglichkeit, die Eigenschaften der einzelnen Objekte unabhängig voneinander zu steuern, indem Sie dieses Kontrollkästchen deaktivieren. Wenn Sie das Kontrollkästchen deaktivieren, wird das Popupmenü „Eigenschaft“ aktiviert, mit dem Sie für jede der im Menü aufgeführten Eigenschaften eine eigene Beschleunigungskurve definieren können.

In der folgenden Liste werden die Eigenschaften aus diesem Popupmenü und die Auswirkungen ihrer Beschleunigungskurven auf die Animation beschrieben.

• Position steuert die Position des animierten Objekts beim Bewegungs-Tweening.
• Drehung steuert die Drehung des animierten Objekts. Die Animation zu Abb. 3 ist ein Beispiel dafür.
• Skalierung steuert die Größe des animierten Objekts.
• Farbe legt die Beschleunigungs- bzw. Abbremseinstellungen für Farbübergänge fest, die auf die animierte Instanz angewendet werden.
• Filter steuert die Filter, die auf das animierte Objekt angewendet werden.

Durch Erstellen von eigenen Beschleunigungskurven für jede einzelne Objekteigenschaft werden mehrere Beschleunigungs- bzw. Abbremseffekte gleichzeitig auf das betreffende Objekt angewendet. Das folgende Beispiel zeigt, wie jeweils unterschiedliche Beschleunigungs- bzw. Abbremseinstellungen für die Eigenschaften „Position“ und „Filter“ auf eine Instanz des Stern-Objekts angewendet werden.

Spielen Sie die folgende Demo-Animation ab, um die Auswirkung der beiden Beschleunigungs- bzw. Abbremseinstellungen (für die Eigenschaften „Position“ und „Filter“) aus Abb. 7 und 8 auf die Stern-Animation zu betrachten:

Die Beschleunigungskurve in Abb. 7 zeigt die Beschleunigungs- bzw. Abbremseinstellung für die Position des Sterns während des Bewegungs-Tweenings.

Abb. 7: Beschleunigungs- bzw. Abbremseinstellung für die Eigenschaft „Position“ des animierten Sterns.

Die Beschleunigungskurve in Abb. 8 zeigt die Beschleunigungs- bzw. Abbremseinstellung für den während des Bewegungs-Tweenings auf den Stern angewendeten Filter „Weichzeichnen“.

Abb. 8: Beschleunigungs- bzw. Abbremseinstellung für den auf den Stern angewendeten Filter „Weichzeichnen“.

Beim folgenden Beispiel, einem von oben betrachteten, springenden Ball, wurden jeweils unterschiedliche Beschleunigungs- bzw. Abbremseinstellungen für die Beschleunigungskurven der Eigenschaften „Skalierung“ und „Filter“ vorgenommen.

Spielen Sie die folgende Demo-Animation ab, um die Animation des springenden Balls zu betrachten, die mit zwei unterschiedlichen Beschleunigungs- bzw. Abbremseinstellungen für die Eigenschaft „Skalierung“ und den Filter „Weichzeichnen“ erstellt wurde.

Der Eindruck eines springenden Balls wird über die Skalierungseinstellung (siehe Abb. 9) erreicht, während die Filtereinstellung (siehe Abb. 10) für den Weichzeichnereffekt am Ende der Animation verantwortlich ist.

Abb. 9: Beschleunigungs- bzw. Abbremseinstellungen für die Eigenschaft „Skalierung“, die auf die Animation des springenden Balls angewendet wurde.

Abb. 10: Beschleunigungs- bzw. Abbremseinstellungen für den Filter „Weichzeichnen“, der auf die Animation des springenden Balls angewendet wurde.

Anwendungsbereiche

Versuchen Sie realistisch wirkende Animationseffekte zu erzeugen und probieren Sie weitere Einstellungen der Beschleunigungskurve aus. Erstellen Sie ein einfaches Bewegungs-Tween, öffnen Sie das Dialogfeld „Benutzerdefinierte Beschleunigung und Abbremsen“ und bearbeiten Sie die Beschleunigungskurve, um die Auswirkungen der Änderungen auf die Animation zu studieren.

Die folgenden, weiterführenden Artikel beschäftigen sich ebenfalls mit der Beschleunigungs- bzw. Abbremsfunktion und ihrer Verwendung für Animationseffekte:

• Figuren in Flash 8 zeichnen und animieren: Einführung in 2.5D
• Flash Animation Learning Guide: Applying Easing and Custom Ease-in and Ease-out to Motion Tweens (Flash-Animationen – Lernhandbuch: Anwenden der Beschleunigungs- bzw. Abbremsfunktion sowie der benutzerdefinierten Beschleunigungs- bzw. Abbremsfunktion auf Bewegungs-Tweens)*
• Using the Tween and Transition Classes in Flash MX 2004 (Verwenden der Tween- und Transition-Klassen in Flash MX 2004)*