Archive for December 18th, 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?
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}); } } } |
Search
Recommended Books
Speaking at FITC Toronto
Recent Posts
- Moving to johnlindquist.com
- AsyncCommand with Robotlegs, Signals, Flight, MinimalComps
- Search Widget – Robotlegs, Signals, Flight, Minimal Comps, Yahoo Astra
- FDT Super Awesome March Deal
- haXe Tutorial
- AS3 Signals Tutorial
- Preferred Video Tutorial Resolution?
- TweenMax – Tweening a timeline (Advanced Tweening)
- Robotlegs + Flight + Union Platform
- Back in the saddle
- Eclipse Theme Designer Preview
- RobotLegs Hello World Video Tutorial
- 10 Things Every Senior Flash Developer Should Know
- Efflex – 3D Effects for Flex
- MorphController – Mighty Morphing Papervision3D
Recent Comments
- Ocatarinabelachichix on about
- Rajiv on faq
- Rajiv on 3ds max texture baking for Papervision3D
- Anupam Biswas on Maya Texture Baking
- Anupam Biswas on Maya Texture Baking
- Arindam Mojumder on requests
- Arindam Mojumder on requests
- Arindam Mojumder on Full Screen Cube
- Arindam Mojumder on faq
- Mimosa123321 on requests
Categories
Archives
Preferred Video Tutorial Resolution
- 1024x768 (53%, 85 Votes)
- 1280x1024 (15%, 24 Votes)
- 1920x1080 (15%, 24 Votes)
- 800x600 (13%, 20 Votes)
- 480x320 (4%, 6 Votes)
- 640x480 (0%, 2 Votes)
Total Voters: 160

