timaging

speed up overall presentation

Recommended Posts

I have an animation that I just did for a client. It's all TweenMax with some timelineMax bits thrown in there. They just asked me if I can "speed everything up".

 

so, what I'm wondering, is if there is some sort of wrapper I can put around this so that the entire thing just goes a percentage faster?

 

thanks,

Dave

Share this post


Link to post
Share on other sites

Sure, if you wrap all your tweens in a TimelineLite or TimelineMax, you can simply alter the timeScale of that parent timeline to make everything go faster or slower. Like set it to 1.1 to make it 10% faster. There's also a TweenMax.globalTimeScale that you could tweak instead.

Share this post


Link to post
Share on other sites

ok, so I found something on it in the docs, but it doesn't say how to use it or give a sample that I can find. It just says you can do it:

 

timeScale () method

public function timeScale(value:Number):

Multiplier affecting the speed of the timeline where 1 is normal speed, 0.5 is half-speed, 2 is double speed, etc.
Parameters
value
:Number

 

 

Is there a section somewhere that shows a sample?

 

thanks,

Dave

Share this post


Link to post
Share on other sites

it also appears that timeScale is shown in the interface, but nothing updates or changes in the code, so I can't tell from that either?

 

http://www.greensock.com/timelinelite/

 

the interactive example shows that you can change it but doesn't say where or how.

 

thanks-

Dave

Share this post


Link to post
Share on other sites

In v12, it should be as simple as:

 

myTimeline.timeScale(1.5); //1.5x the normal speed

 

The globalTimeScale() method is deprecated in v12, but you could still use it. TweenMax.globalTimeScale(1.5); You might want to look at exportRoot() in TimelineLite which allows you to wrap up all the tweens/timelines at a given time into a TimelineLite instance which you could then control the timeScale() of. http://api.greensock.com/as/com/greensock/TimelineLite.html#exportRoot()

Share this post


Link to post
Share on other sites

ok, I just tried adding "myTimeline.timeScale(1.5);" to my timeline and got this:

 

 

Scene 1, Layer 'actions', Frame 2, Line 22 1120: Access of undefined property myTimeline.

Share this post


Link to post
Share on other sites

Ha ha - when I said "myTimeline" I meant YOUR TimelineLite instance. Like:

 

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.append(...); //<--add your tweens or whatever
myTimeline.timeScale(1.5);

Share this post


Link to post
Share on other sites

I still get the same thing:

 

 

Scene 1, Layer 'actions', Frame 2, Line 25 1084: Syntax error: expecting rightparen before semicolon.

 

 

here's a short sample:

 

 

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.append(
TweenMax.to(imgStart, 4, {autoAlpha:1, ease:Cubic.easeInOut});TweenMax.to(blueGrad, 4, {autoAlpha:1, ease:Cubic.easeInOut, delay:4});
TweenMax.to(whiteCircle01, 4, {rotation:5, ease:Cubic.easeInOut, delay:4});
TweenMax.to(img01, 1, {autoAlpha:1, ease:Cubic.easeInOut, delay:4});
TweenMax.to(discover01, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:6});TweenMax.to(img01, 2, {autoAlpha:0, ease:Cubic.easeInOut, delay:7});
TweenMax.to(img0101, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:7});
TweenMax.to(img0101, 8, {y:"-30", ease:Cubic.easeInOut, delay:5});
TweenMax.to(discover0101, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:7});
TweenMax.to(discover0102, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:7.5});
TweenMax.to(img0101, 2, {autoAlpha:0, ease:Cubic.easeInOut, delay:11});
TweenMax.to(img0102, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:11});
TweenMax.to(img0102, 10, {x:"20", ease:Cubic.easeInOut, delay:9});
TweenMax.to(discover0103, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:11});
TweenMax.to(discover0104, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:11.5});TweenMax.to(img0102, 2, {autoAlpha:0, ease:Cubic.easeInOut, delay:15});
TweenMax.to(img0103, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:15});
TweenMax.to(img0103, 10, {x:"-50", ease:Cubic.easeInOut, delay:13});
TweenMax.to(discover0105, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:15});
TweenMax.to(discover0106, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:15.5});
TweenMax.to(discover0107, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:19});
var timelineOut01:TimelineMax = new TimelineMax({repeat:0, delay:22});
timelineOut01.appendMultiple([new TweenMax(discover01,  3, {autoAlpha:0, blurFilter:{blurX:10, blurY:10, quality:3}, y:"-150", ease:Cubic.easeIn}),
					   new TweenMax(discover0101,  3, {autoAlpha:0, blurFilter:{blurX:10, blurY:10, quality:3}, y:"-60", ease:Cubic.easeIn}),
					   new TweenMax(discover0102,  3, {autoAlpha:0, blurFilter:{blurX:10, blurY:10, quality:3}, y:"-60", ease:Cubic.easeIn}),
					   new TweenMax(discover0103,  3, {autoAlpha:0, blurFilter:{blurX:10, blurY:10, quality:3}, y:"-60", ease:Cubic.easeIn}),
					   new TweenMax(discover0104,  3, {autoAlpha:0, blurFilter:{blurX:10, blurY:10, quality:3}, y:"-60", ease:Cubic.easeIn}),
					   new TweenMax(discover0105,  3, {autoAlpha:0, blurFilter:{blurX:10, blurY:10, quality:3}, y:"-60", ease:Cubic.easeIn}),
					   new TweenMax(discover0106,  3, {autoAlpha:0, blurFilter:{blurX:10, blurY:10, quality:3}, y:"-60", ease:Cubic.easeIn}),
					   new TweenMax(discover0107,  3, {autoAlpha:0, blurFilter:{blurX:10, blurY:10, quality:3}, y:"-60", ease:Cubic.easeIn}),
					   new TweenMax(img0103,  1, {autoAlpha:0, ease:Cubic.easeIn})], 0, TweenAlign.START, 0.3);
);
myTimeline.timeScale(1.5);

Share this post


Link to post
Share on other sites

Hi Dave,

 

It appears you are missing some of the basics of TimelineLite or mis-interpreting some of Jack's abbreviated code hints.

 

In order to easily wrap your existing tweens inside a timeline you could add them all via the insertMultiple() or appendMultiple() methods which accept an array of tweens:

 

 

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.appendMultiple([
TweenMax.to(imgStart, 4, {autoAlpha:1, ease:Cubic.easeInOut}),
TweenMax.to(blueGrad, 4, {autoAlpha:1, ease:Cubic.easeInOut, delay:4}),
TweenMax.to(whiteCircle01, 4, {rotation:5, ease:Cubic.easeInOut, delay:4}),
TweenMax.to(img01, 1, {autoAlpha:1, ease:Cubic.easeInOut, delay:4}),
TweenMax.to(discover01, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:6}),
TweenMax.to(img01, 2, {autoAlpha:0, ease:Cubic.easeInOut, delay:7}),
TweenMax.to(img0101, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:7}),
TweenMax.to(img0101, 8, {y:"-30", ease:Cubic.easeInOut, delay:5}),
TweenMax.to(discover0101, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:7}),
TweenMax.to(discover0102, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:7.5}),
TweenMax.to(img0101, 2, {autoAlpha:0, ease:Cubic.easeInOut, delay:11}),
TweenMax.to(img0102, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:11}),
TweenMax.to(img0102, 10, {x:"20", ease:Cubic.easeInOut, delay:9}),
TweenMax.to(discover0103, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:11}),
TweenMax.to(discover0104, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:11.5}),
TweenMax.to(img0102, 2, {autoAlpha:0, ease:Cubic.easeInOut, delay:15}),
TweenMax.to(img0103, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:15}),
TweenMax.to(img0103, 10, {x:"-50", ease:Cubic.easeInOut, delay:13}),
TweenMax.to(discover0105, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:15}),
TweenMax.to(discover0106, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:15.5}),
TweenMax.to(discover0107, 2, {autoAlpha:1, ease:Cubic.easeInOut, delay:19})
]);

 

note all the tweens are separated by commas ( , ) and are inside a single array enclosed by square brackets ( [ ] )

 

I know you are just looking for a quick fix for your timing/speed situation, but I can't recommend more strongly that you take some time with TimelineLite/Max. One of the most valuable features of it is that you no longer have to manage the individual delay's of each tween. You can simply say "play this tween .5 seconds after the last tween is done" OR play these 100 tweens in direct succession. Totally flexible.

  • Like 1

Share this post


Link to post
Share on other sites

Hi Carl,

 

I do understand this method, but my original request was that I have both tweens and timelines already created and there are alot. (What I posted was only a portion of the show.) The client asked me to speed up the entire show so I was looking for a global speed change or wrapper for my entire show. I tried the one supplied and that's where I got the error.

 

so, what I'm hoping to be able to to is just add some globalTimeScale but nothing has worked thus far.

 

I think at this point, I may just need to go through it line by line, but that's not what the client requested.

 

thanks,

Dave

Share this post


Link to post
Share on other sites

From what I can tell, the errors you were getting were related to

a: something wrong with accessing an object named 'myTimeline'

b: missing a parenthesis somewhere

 

I have attached files illustrating both of Jack's suggestions

 

adjust globalTimeScale in v12 (deprecated but still works)

 

TweenLite.to(mc1, 1, {x:500});

var tl:TimelineLite = new TimelineLite();
tl.append(TweenLite.to([mc2, mc3], .5, {x:250, rotation:180}));
tl.append(TweenLite.to([mc2, mc3], .5, {alpha:0}));

TweenMax.to(mc4, 1, {width:500});

//all animations will have their timeScale adjusted
TweenMax.globalTimeScale(.2);

 

Use exportRoot to wrap all existing tweens in a single TimelineLite (recommended)

 

TweenLite.to(mc1, 1, {x:500});

var tl:TimelineLite = new TimelineLite();
tl.append(TweenLite.to([mc2, mc3], .5, {x:250, rotation:180}));
tl.append(TweenLite.to([mc2, mc3], .5, {alpha:0}));

TweenMax.to(mc4, 1, {width:500});

var master:TimelineLite =  TimelineLite.exportRoot();
master.timeScale(.2);

 

as you can see both methods have a variety of TweenLite, TimelineLite and TweenMax tweens floating around and all of them can have their timeScale adjusted globally.

 

please see the attached zip which includes fla, swf and v12 lib.

 

best,

Carl

adjustTimeScale.zip

  • Like 1

Share this post


Link to post
Share on other sites

Thanks Carl-

 

I'll check this out and see if I can apply it to my project.

 

Dave

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.