Neue Tween-Engine in Flex 4

Neben vorgefertigten Animationsabläufen bietet Flex 4 eine Tween-Engine, die zum Umsetzen von individuellen Animationen gedacht ist. Dazu gibt es die neue Klasse Animation, wodurch die frühere Tween-Klasse ausgedient hat.

Das Tweening funktioniert bequem mit MXML-Code (oder natürlich direkt in ActionScript) und erlaubt es, einzelne Keyframes zu setzen.

Zuerst ein kleines Beispiel, das die Tween-Engine in Aktion zeigt. Klickt man auf den Button, wird die Position (x), die Rotation (rotation) und die Breite (width) des Objekts animiert.

[kml_flashembed fversion=“10.0.0″ movie=“/wp-content/uploads/2009/05/Animation.swf“ targetclass=“flashmovie“ publishmethod=“dynamic“ width=“550″ height=“175″]

Get Adobe Flash player

[/kml_flashembed]

Grundgerüst der Animation

Das Grundgerüst einer Animation (myTween), die auf ein Objekt myRect angewendet wird, kann in MXML auf folgende Weise definiert werden:

[xml]





[/xml]

MotionPath und KeyFrame

Um den Verlauf der Animation zu steuern, müssen nun Keyframes festgelegt werden. Keyframes definieren den Wert einer Eigenschaft (z.B. x-Position, Breite, etc.) zum einem bestimmten Zeitpunkt der Animation. Die Werte dazwischen werden von der Tween-Engine interpoliert. Mehrere Keyframes werden zu einem MotionPath zusammengefasst. Eine Animation kann wiederum mehrere Motion-Pfade haben, wodurch mehrere Eigenschaften gleichzeitig animiert werden können.

Beim folgenden Beispiel wird die Breite des Objekts bei 300ms auf 200% vergrößert, bei 600ms auf 20% verkleinert und zuletzt bei 700ms wieder auf die ursprüngliche Breite skaliert.

[xml]





[/xml]

Quellcode

Der komplette Quellcode des oben gezeigten Beispiels lautet:

[xml]

















[/xml]

Mehr zu Flex 4: „Gumbo-Wochen” auf www.video-flash.de
[ad]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert