Relative Mouse Position with Easing

programming flash
1

Here is my cool code…

onClipEvent(enterFrame)
{
   
    _x -= (-20) - ((0.1 * _xmouse) - 60);
    _y -= (-45) - ((0.1 * _ymouse) - 60);
	
// y boundaries	
if (_root.assembled._y > 10) {
_root.assembled._y = 10;
}
 
if (_root.assembled._y < -10) {
_root.assembled._y = -10;
}
// x boundaries
if (_root.assembled._x > 20) {
_root.assembled._x = 20;
}
 
if (_root.assembled._x < -20) {
_root.assembled._x = -20;
}
}

Here is an example…
www.frunder.com/showcase.html

Now go ahead and try that on a movieclip named “assembled”.

Here is my question…

How can I make the easing start fast then go slow? Right now it starts slow and speeds up. Well not really, because it speeds up and then slows down once it gets closer to the mouse position. But becuase the mouse position is greater than that of the movement, it seems like it speeds up then just stops!

Here is the effect I am after…

look at the images inside of www.kelamali.com

I am close, really close.

Any help would be great!

Thanks!!!

2

An easier thing to have is this:


onClipEvent(enterFrame){
	if(this._x > _root._xmouse){
		this._x -= (this._x - _root._xmouse)/5;
	}else if(this._x < _root._xmouse){
		this._x += (_root._xmouse - this._x)/5;
	}
	if(this._y > _root._ymouse){
		this._y -= (this._y - _root._ymouse)/5;
	}else if(this._y < _root._ymouse){
		this._y += (_root._ymouse - this._y)/5;
	}
}
3

Any Ideas?

4

Is this just a weird problem?
Whenever I post about this, it never receives replies. Do you think it is because it is not popular?Did I get off to a wrong start?

Here is what I amtrying to imitate. Just look at the pictures on the site.

www.kelamali.com

Thanks in advance!

5

this should work for you:


[color=#000087]onClipEvent[/color] ([color=#000087]load[/color]) {
ease = 10
ease2 = -100
}
[color=#000087]onClipEvent[/color] (enterFrame) {
tx = (0-[color=#000087]_x[/color])/ease
ty = (0-[color=#000087]_y[/color])/ease
tx += ([color=#000087]_root[/color].[color=#000087]_xmouse[/color]-[color=#000087]_x[/color])/ease2
ty += ([color=#000087]_root[/color].[color=#000087]_ymouse[/color]-[color=#000087]_y[/color])/ease2
[color=#000087]_x[/color] += tx
[color=#878787]//_y += ty
[/color]}

Experiment with the ease and ease2 variables to get exactly what you want :smiley:

6

You are brilliant!
I would have never thought of doing it that way!

If you have a min or two, could you explain the actionscript for easing. I can never quite understand why it does what it does.

THank you so much!
Youhave no Idea how much this has helped!

Thanks again!
Wow!

7

Easing…what to say about easing… Let me try to explain it (I’m not a very good teacher but I will try)

if you look at easing code, you will se that it first finds the distance between the points:


_x += tx-_x; //tx is the target
if you applied this formula you would move to the point.

Make sense right?

Now thats all fine and dandy but wheres the fun in moving to the point in one frame? Theres none. At all. So if we divide that distance by a value greater than one then it wouldn’t move the whole way in one frame. It might move half the distance, or a fifth of the distance, depending on what we divided it by:


_x += (tx-_x)/2; //moves half the distance every frame
_x += (tx-_x)/5; //moves a fifth of the distance every frame

So if you think about it, if it moves a fifth of the distance every frame (and the distance is updated every frame) then the second frame it would be dividing four/fifths of the original distance by five and moving that much. So as it gets closer to the target the distance gets smaller and therefore the amount it moves gets smaller. I hope that makes sense. Maybe…

:cap: Jeremy

8

Thanks again!
You explained it perfectly!

Thanks for all the great info!