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″]
[/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]