Tween glitch in scrolling hover pane

1

Hello! I’m hoping someone can help me out with this bug, because I’ve been trying to figure it out for hours and am making no headway. So, here’s what’s going on…

I am creating a pane that scrolls based on your mouse’s position, relative to the size of the scrolling object and its visible area.

I am using Tweens to achieve the desired effect, which is working really well except when trying to keep the scrolling object “in bounds”. If you run the attached SWF, you’ll see what I mean when you move your mouse from side to side really fast.

My only thought at this point is that there may be a display queue the Tweens are being put into that I can manage, and the glitch is just one of the queue items playing out after I expect it to.

I’ve also tried creating an event handler for TweenEvent.MOTION_START that had logic to keep the target object in bounds, but that didn’t work and I had to invoke the event manually for some reason.

Another problem I see is that when I mouse over the nav_contents clip, the nav_container looses focus, and the whole script is botched. Any suggestions on that? I am planning on using this in a Flex app, so I don’t think I can trap all of the mouse movement without that being a problem in implementation.

This is my first AS3 attempt…trying to bring myself up to date, so this has been a slow-going script. Thanks for your help!

2

Any ideas, anyone? I’ll be happy to answer any questions about the existing code. I’d really like to use the Tween function instead of an onEnterFrame to do this…I may fall back on that method if I can’t fix this.

3

You need to store your final position in a variable before passing it into the Tween so you can validate the bounds.

For example if you have a 300px stage and a 600px object:

ActionScript Code:
[LEFT][COLOR=#808080]*// maxX is our left side bound which is 0 since we add it to 0,0*[/COLOR]

[COLOR=#000000]var[/COLOR] maxX:[COLOR=#0000FF]Number[/COLOR] = [COLOR=#000080]0[/COLOR];

[COLOR=#808080]// minX is our right side bound which is -300 since our stage is 300 and object 600[/COLOR]
[COLOR=#000000]var[/COLOR] minX:[COLOR=#0000FF]Number[/COLOR] = -[COLOR=#000080]300[/COLOR];

[COLOR=#808080]// endX is our end based on mouseX[/COLOR]
[COLOR=#000000]var[/COLOR] endX:[COLOR=#0000FF]Number[/COLOR] = [COLOR=#000080]500[/COLOR];

[COLOR=#808080]// we now cap it to within bounds[/COLOR]
endX = [COLOR=#0000FF]Math[/COLOR].[COLOR=#0000FF]min[/COLOR][COLOR=#000000]([/COLOR]maxX, [COLOR=#0000FF]Math[/COLOR].[COLOR=#0000FF]max[/COLOR][COLOR=#000000]([/COLOR]minX, endX[COLOR=#000000])[/COLOR][COLOR=#000000])[/COLOR];

[COLOR=#808080]// trace to notice it gets capped[/COLOR]
[COLOR=#0000FF]trace[/COLOR]COLOR=#000000[/COLOR];
[/LEFT]

4

This code basically does the same thing:
scrolls content to the left when mouseX is right of center, and vice versa.
[COLOR=“Blue”]http://www.byrographics.com/AS3/mouseMoveScroller/mouseMoveScroller.html[/COLOR]

stop();
import gs.TweenMax;
import fl.motion.easing.*;

stage.addEventListener(MouseEvent.MOUSE_MOVE, scrollmc, false, 0, true);

function scrollmc(event:MouseEvent):void {
	if (mouseX < 250) {
		TweenMax.to(scroller, 5, {x:0});
	} else if (mouseX > 310) {
		TweenMax.to(scroller, 5, {x:-1500});
	}
}