TweenMax – Tweening a timeline (Advanced Tweening)
Friday 18 December 2009 - Filed under ActionScript 3 + examples
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?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 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}); } } } |
2009-12-18 » johnlindquist

