Friday, December 18, 2009

TweenMax - Tweening a timeline (Advanced Tweening)

It's been a really busy week doing a lot of interactive motion work, so no time to work on my Theme Designer, but here's a little trick I picked up this past week from Jack. Tweening a timeline allows you to create multiple tweens and then apply one ease to the whole group. Neat trick, eh?

[kml_flashembed movie="http://dl.dropbox.com/u/132579/sites/pv3d.org/examples/tween/EasingATimeline.swf" width=700/]


package
{
import com.greensock.TimelineMax;
import com.greensock.TweenMax;
import com.greensock.easing.Linear;
import com.greensock.easing.Quart;

import flash.display.Sprite;

/**
* @author John Lindquist
*/
[SWF(width="900", height="480", frameRate="31")]
public class EasingATimeline extends Sprite
{
private var square:Sprite;
private static const STEP_DURATION:Number = 1;

public function EasingATimeline()
{
square = new Sprite();
square.graphics.beginFill(0xcc0000);
square.graphics.drawRect(0, 0, 50, 50);
square.graphics.endFill();

square.x = 100;
square.y = 50;

addChild(square);

//set all the eases of your steps to Linear.easeNone
var step1:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 700, y: 50, ease: Linear.easeNone});
var step2:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 700, y: 350, ease: Linear.easeNone});
var step3:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 100, y: 350, ease: Linear.easeNone});
var step4:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 100, y: 50, ease: Linear.easeNone});

var timeline:TimelineMax = new TimelineMax();
timeline.append(step1);
timeline.append(step2);
timeline.append(step3);
timeline.append(step4);
//pause your timeline
timeline.pause();

//tween your timeline with whatever ease you want
TweenMax.to(timeline, timeline.totalDuration, {currentTime: timeline.totalDuration, ease: Quart.easeInOut, repeat: -1});
}
}
}

6 comments:

  1. Guilherme Cruz1:21 PM

    Looks cleaner than managing tweening sequences by delays.

    ReplyDelete
  2. Hicham8:10 AM

    Crazy ideas!!!
    this is a great tween engine!

    ReplyDelete
  3. ocorso1:31 PM

    Sweet!

    ReplyDelete
  4. Mark Prades4:21 PM

    Great classe ! nice article

    ReplyDelete