One of the new features in KitchenSync 1.5 is the ability to tween animations on a MovieClip’s timeline… and I’m not just talking about gotoAndPlay(), I’m talking about controlling the starting and stopping points, speed, and easing functions of an animation on the timeline with code. It does this by incrementally controlling the current frame number of the MovieClip using a KSTween and a special ITweenTarget (a class used to control the values of an object) called TimelineController.
Take this FLA animation.
As you can see, there is a simple animation using a guide layer and labels on the key frames.
The following SWF uses KitchenSync to control the same ball animation. As you can see, the duration and easing functions of the animation can be controlled. You can even animate backwards!
The source that controls this is here.
package { import flash.display.MovieClip; import org.as3lib.kitchensync.KitchenSync; import org.as3lib.kitchensync.action.*; import org.as3lib.kitchensync.action.tweentarget.*; import org.as3lib.kitchensync.easing.Bounce; import org.as3lib.kitchensync.easing.Cubic; import org.as3lib.kitchensync.easing.Linear; import org.as3lib.kitchensync.easing.Oscillate; /** * Demos the TimelineController which controls the animation of a MovieClip's timeline. */ public class FlashIntegrationTest extends MovieClip { protected var test1:MovieClip; public function FlashIntegrationTest() { super(); // initialize kitchensync. KitchenSync.initialize(this, "1.5"); // add a movieclip from the library test1 = MovieClip(new AnimationTest1()); addChild(test1); // define the start and end frame with strings or ints or FrameLabel's var startLabel:* = "start"; var endLabel:* = "end"; // set up the TimelineController tween target. var tweenTarget:TimelineController = new TimelineController(test1, startLabel, endLabel); // Animate the ball with a linear ease. var tween:KSTween = KSTween.newWithTweenTarget(tweenTarget, "1s", 0, Linear.ease); // animate the ball backwards with a bounce tween var tween2:KSTween = tween.cloneReversed(); tween2.duration = "4s"; tween2.easingFunction = Bounce.easeOut; tween2.addTrigger(tween); // animate the ball with an oscillator var tween3:KSTween = KSTween.newWithTweenTarget(tweenTarget, "10m", "1s", Oscillate.sine); tween3.easingMod1 = 0.3; tween3.addTrigger(tween2); // start the animations tween.start(); } } }
Pretty cool huh? We’re creating a new TimelineController and setting the boundaries of the animation then passing it to a new KSTween object. Each of the three tweens use different parameters and are triggered by the end of the one before it.
You can download the entire thing and play around with it.
Tags: KitchenSync
[...] tweening – Set up a complicated animation on the timeline then control it using a tween object. From KitchenSync you can change the duration of the animation, the easing function, or play [...]