Jump to content
GreenSock

Wiplash

Definitive answer on continuous tweens

Recommended Posts

Hi there,

 

I have been looking around this forum for a while now on the subject of continuos tweens but I can't seem to get a definitive answer.

 

I need to create tween that always follows the mouse. I would like if possible to have some easing on this motion also. The dynamic props plug-in is basically perfect for this task except that it has a time limit on it. When my tween reaches the mouse I do not want it to stop the tween but just pause until I move the mouse again I do not however want it to stop and start every time this happens. I guess this could be done with an onMouseMove listener but this is too similar to doing an onEnterFrame function as my mouse will pretty much always be moving. This is something that as far as I'm aware never the right thing to do. Basically a function like this does the job but I believe it is not the best way to do it.

 

onEnterFrame = function(){

TweenLite.to(mc, unlimited, {_x:_xmouse, ease:Quad.easeInOut});

}

 

or

 

onEnterFrame = function(){

mc._x = _xmouse;

}

 

Thanks

 

Will

 

P.s. I'm working with AS2

Link to comment
Share on other sites

A tween with no defined duration is an oxymoron - a tween always describes change over time. But your code is certainly valid - you can create a new tween on every frame like that if you want. Many developers do that sort of thing even though it's not typically considered a best practice. I personally would probably favor an onMouseMove so that new tweens aren't created when it's not necessary (when the mouse isn't moving). Actually, if performance is a top priority, I'd recommend doing an onEnterFrame and writing your own motion code but that's a bit more complex, especially if you're trying to apply an easeInOut. Keith Peters has some great books about this sort of code. Check out his ActionScript Animation books.

Link to comment
Share on other sites

Is this not a potential plugin as the dynamic props one is so close to this really? The problem is that the code above creates a very jerky animation.

 

Do you have any other tips such as creating a new tween on an interval or something. I don't need specific code but it just seems to me that this is something everyone needs to do all the time. Any image sliders or ipod style docks need this really to look good.

 

Thanks for your help though.

 

Will

Link to comment
Share on other sites

I'm not sure why you're getting jerky results - I've done a similar thing plenty of times before and it works great. In fact, I used this technique in the slideshow example at http://www.greensock.com/as/LoaderMax/slideshow.zip

 

As far as making a plugin, no it wouldn't make sense because tweens ALWAYS must have a duration otherwise they're not tweens. The whole framework depends on certain consistencies, one of them being a duration. For example, when you put tweens into a TimelineLite, it must be able to determine how long those tweens are so that the TimelineLite can report its duration and its overall progress, etc. Without a duration, how could the tween possibly figure out where to render things at what time and when it should be "done"? It could use a velocity or something, but it still must have a duration in order to work properly with all the other nifty tools like TimelineLite/Max.

Link to comment
Share on other sites

Thanks for that. I think maybe it's jerky because I'm on a mac or something and I'm trying to tween two things in this way on top of each other, but even your one is a little on the jerky side on my machine. It may also be that i'm using as2 where yours is as3.

 

I'm determined to find a solution to this problem but thanks for all your help.

Link to comment
Share on other sites

Yeah, AS3 is MUCH MUCH faster than AS2 and the Mac Flash Player is extremely slow compared to the PC flavor (well, until the recent 10.1 release at least).

 

Good luck.

Link to comment
Share on other sites

Right then I have my solution. This is basically a culmination of the above but for anyone who wants to know how to do this with the 'members only' dynamic props plugin here it is. It works really nicely.

 

// Imports
import com.greensock.*; 
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([DynamicPropsPlugin]);

// Variables
var speed:Number = 2;

// Set up a listener
var mouseListener:Object = new Object();

// Onmouse move listener
mouseListener.onMouseMove = function() {
	TweenLite.to(mc, speed, {dynamicProps:{_x:getMouseX, _y:getMouseY}});
}

// Get X and Y
function getMouseX():Number {
	return _root._xmouse;
}

function getMouseY():Number {
	return _root._ymouse;
}

// Set listener
Mouse.addListener(mouseListener);

 

Hope this help someone.

 

Will

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.
×