Jump to content
Search Community

Slow/reduce then pause then resume...

mrEmpty test
Moderator Tag

Recommended Posts

Hello.

 

I am working on putting some final touches on my iOS style screen splitting class which I'll share as soon as it's ready. One of the last things I want to do is control any tweens currently playing when the screen split occurs. Currently I call TweenMax.pauseAll(); and that works fine, but it's very abrupt.

 

What I'm hoping to do is take the tweens that are playing, slow and reduce them drastically, then call the split function, so...

 

1: Square is on stage moving from top to bottom on a yoyo.

2: User splits the screen.

3: Square tween doesn't just stop, but comes to a pause over say 20 pixels.

4: Screen split occurs.

5: Screen un-splits, square tween quickly (but not instantly) goes back to it's original tween.

 

As I have no control over what people are tweening or how they set up the tweens, can I hijack them globally?

 

Thanks.

Link to comment
Share on other sites

I think right now, the short answer is no.

 

Here are 2 ways that won't work:

 

1: Loop through TweenMax.getAllTweens array and tween the timeScale of each tween in the master list to 0

 

var t:TweenMax = TweenMax.to(m1, 4, {x:400, ease:Linear.easeNone});
TweenMax.to(m2, 4, {x:400, ease:Linear.easeNone});

TweenLite.delayedCall(1, pauseAll);

function pauseAll(){
var tweens:Array = TweenMax.getAllTweens();
var tweensCount:int = tweens.length;

   for(var i:int = 0; i 		TweenLite.to( tweens[i], .5, {timeScale:0});
	}	
}

 

The code above actually works great when all the tweens are TweenMax tweens. TweenLite tweens don't have a timeScale property so they will throw errors and this isn't suitable for a global hijacking of all tweens "in the system".

 

 

2: Use TweenMax's globalTimeScale property to slow down ALL tweens including TweenLite tweens:

 

var t:TweenMax = TweenMax.to(m1, 4, {x:400, ease:Linear.easeNone});
TweenLite.to(m2, 4, {x:400, ease:Linear.easeNone});

TweenLite.delayedCall(1, pauseAll);


function pauseAll(){

TweenLite.to(TweenMax, .2, {globalTimeScale:0} );

}

 

The above code will nicely slow down and pause ALL tweens and timelines BUT since the globalTimeScale is 0, any tweens that fire in your split panel component simply won't do anything as globalTimeScale effects them too.

 

hopefully these failed attempts save you some time.

 

If I think of a way that works, I'll let you know.

 

I can fully understand that the control and effect you want could be very useful but perhaps it should be an optional setting or completely outside the role of your component. The developer using your component should have the responsibility for tracking what is going on in their app and killing/pausing unnecessary events (tweens, ENTER_FRAME, Timers, Videos etc) before the component does what it should do. As useful as global tween hijack could be, what if they are using another tweening mechanism other than GreenSock?

Link to comment
Share on other sites

'what if they are using another tweening mechanism other than GreenSock?'

 

What?

 

;)

 

Thanks, I came to the same conclusion, but am unable to accept it so am pressing on. I could go the messy route of using Tweener to do my tweens so they'll not be effected, bodge but it'd work. Can't bring myself to do it though. Can't believe I even typed it. I feel dirty.

Link to comment
Share on other sites

How about using TimelineLite? Just dump all your tweens in there and then tween its timeScale.

 

var tl:TimelineLite = new TimelineLite();
var tweens:Array = TweenMax.getAllTweens();
var i:int = tweens.length; 
while (--i > -1) {
   tl.insert( tweens[i], tweens[i].startTime - tweens[i].delay );
}
tl.startTime = 0;
TweenLite.to(tl, 20, {timeScale:0});

 

The upcoming v12 release of the platform will make this easier...but I can't let the cat out of the bag yet on that :)

Link to comment
Share on other sites

Go on, give us a clue. What's coming? :)

 

I tried that out, and it kinda works, but not really. My tweens pause and resume, but the pause is instant and the resume resumes at a point after it should. Kinda like if I stopped the tween at point 5, it resumes at point 6.5.

Link to comment
Share on other sites

Actually it's not working. I still get the jump after continued use. If I tween the timeScale down and up several times quickly the tweens go a bit crazy.

Hm...not sure what to say without seeing an example. Any chance you could post one? The technique mentioned above seemed to work well for me, but maybe my example is different than yours in some specific way that's causing the issue. A very simple FLA would be super helpful in seeing what's up.

 

As for v12, I can't let the cat out of the bag yet, but I think you'll really like it. :) If anyone wants to be a part of the testing team and have early access, shoot me an e-mail or PM. Only if you're willing to put some time in kicking the tires and providing feedback, though.

Link to comment
Share on other sites

Ah, I see - the tween's global startTime is being affected by the shift in the parent TimelineLite, but that should be relatively easy to fix. Your openGUISplit() method should look like this:

 

public function openGUISplit():void {
tweens = TweenMax.getAllTweens();
i = tweens.length;
while (--i > -1) {
	if (tweens[i].timeline is TimelineLite) {
		tl.insert(tweens[i], (tweens[i].startTime - tweens[i].delay) + tweens[i].timeline.startTime);
	} else {
		tl.insert(tweens[i], tweens[i].startTime - tweens[i].delay);
	}
}
tl.startTime = 0;
TweenLite.to(tl, 0.5, {timeScale:0, onComplete:runSplit});
}

 

Again, this will be easier in v12 :)

Link to comment
Share on other sites

Ah, I guess I wasn't clicking fast enough. I think I see what was happening. Try this:

 

public function openGUISplit():void {
TweenLite.killTweensOf(tl); //so that the timeScale tween doesn't get added to the TimelineLite
tweens = TweenMax.getAllTweens();
i = tweens.length;
while (--i > -1) {
	if (!(tweens[i].timeline is TimelineLite)) {
		tl.insert(tweens[i], (tweens[i].startTime - tweens[i].delay) - tl.startTime);
	}
}
TweenLite.to(tl, 0.5, {timeScale:0, onComplete:runSplit});
}

Link to comment
Share on other sites

That works :) Now I can release it, if it would be of any use to anyone I don't know.

 

Thank you.

 

So to get clear n my head what is going on, we are killing any TimelineLite tweens (if they exist), grabbing all TweenMax tweens and sticking them into a TimelineLite. Does the process of doing that kill the TweenMax tweens and create new ones, or does it simply reference the original tweens?

 

We then tween down the time scale of the TimelineLite and use a new set of TweenMax tweens to open the GUI. Is that it?

 

So from that we can control two 'sets' of tweens if one is TM and the other TL? Hmm, that opens a lot of cool stuff. How about adding an id to tweens so we can selectively control groups?

 

Thank you once again, if you ever come to London let me know, I'll hook you up with beer :)

Link to comment
Share on other sites

So to get clear n my head what is going on, we are killing any TimelineLite tweens (if they exist), grabbing all TweenMax tweens and sticking them into a TimelineLite. Does the process of doing that kill the TweenMax tweens and create new ones, or does it simply reference the original tweens?

No, it doesn't kill the TweenMax tweens - it just wraps them in a TimelineLite.

 

We then tween down the time scale of the TimelineLite and use a new set of TweenMax tweens to open the GUI. Is that it?

Kinda, except there are no "new" TweenMax tweens - it's using the existing one(s).

 

So from that we can control two 'sets' of tweens if one is TM and the other TL? Hmm, that opens a lot of cool stuff. How about adding an id to tweens so we can selectively control groups?

Think of TimelineLite as a holder/container for tweens (and/or other timelines). Every tween and timeline in the GreenSock system is placed onto a timeline (by default it's the root timeline). This creates a very flexible system that allows you to nest things and deeply as you want, alter timeScale on entire groups/sequences, etc. It's incredibly powerful once you understand the concept. If you haven't watched Carl's video series yet, I'd recommend doing so immediately:

http://active.tutsplus.com/series/timel ... ter-guide/

 

And I did a much less extensive video here: http://www.greensock.com/timeline-basics/

 

Does that help clear things up?

Link to comment
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.
×
×
  • Create New...