# Tween glitch in scrolling hover pane

**URL:** <https://forum.kirupa.com/t/tween-glitch-in-scrolling-hover-pane/263836>\
**Category:** Uncategorized\
**Created:** [June 19, 2008, 4:14pm UTC](https://forum.kirupa.com/t/tween-glitch-in-scrolling-hover-pane/263836 "2008-06-19T16:14:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![stephenr85](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@stephenr85](https://forum.kirupa.com/u/stephenr85)\
**Post date:** [June 19, 2008, 4:14pm UTC](https://forum.kirupa.com/t/tween-glitch-in-scrolling-hover-pane/263836/1 "2008-06-19T16:14:38Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![stephenr85](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@stephenr85](https://forum.kirupa.com/u/stephenr85)\
**Post date:** [June 21, 2008, 7:57pm UTC](https://forum.kirupa.com/t/tween-glitch-in-scrolling-hover-pane/263836/2 "2008-06-21T19:57:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Robert\_Payne](https://avatars.discourse-cdn.com/v4/letter/r/6bbea6/32.png) [@Robert\_Payne](https://forum.kirupa.com/u/Robert_Payne)\
**Post date:** [June 21, 2008, 8:58pm UTC](https://forum.kirupa.com/t/tween-glitch-in-scrolling-hover-pane/263836/3 "2008-06-21T20:58:42Z")

</div>

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]

---

<div class="post-metadata">

**Author:** ![snickelfritz](https://avatars.discourse-cdn.com/v4/letter/s/7ea924/32.png) [@snickelfritz](https://forum.kirupa.com/u/snickelfritz)\
**Post date:** [June 21, 2008, 9:04pm UTC](https://forum.kirupa.com/t/tween-glitch-in-scrolling-hover-pane/263836/4 "2008-06-21T21:04:15Z")

</div>

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]](http://www.byrographics.com/AS3/mouseMoveScroller/mouseMoveScroller.html)

```auto
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});
	}
}

```