Saturnboy
 12.14

GTween, Easing, and Flex 4

,

Recently, I needed to do some programmatic animation in Flex for a client project. I was looking to achieve a kind of “mouse following” effect where an object would move towards the mouse even as the mouse itself was moved. And since Grant Skinner just updated his tiny GTween tweening engine, I thought I’d give it a whirl in Flex 4.

Here is the result (view source enabled):

Flash is required. Get it here!

Click and drag the slider up and down to see the “following” effect. The height of each bar is always being tweened to match the target height set by the slider, and each bar moves with a different easing. Depending on the type of easing, the bars do a better or worse job of following the slider. In the code, all the magic happens via GTween’s proxy object, which allows me to adjust the target height of the bar even if the bar is already in motion.

Here is the relevant section of code:

private function slideHandler():void {
    for each (var tween:GTween in _tweens) {
        tween.proxy.barHeight = slide.value;
    }
}

The slideHandler() is called whenever the slider is moved. Looping through each bar, I simply set the target barHeight via the proxy object and GTween does all the work. In the end, I get exactly the animation effect I want with a minimum of effort. I love lazy. Thanks Grant!

Files

Comments

1.5.2010

1

Awesome! Indeed could be useful from time to time.

Greets

4.27.2010

2

Very handy, thanks!

© 2014 saturnboy.com