Mouse move panning

Question

Hi all,

I'm trying to scroll a series of thumbnails horizontally based on the mouseX position. I can get it to scroll but it's very choppy and for some reason it's not reading my start and end numbers so it will stop scrolling. Can anyone point me in the right direction? Thanks.

var thumbBounds:Object = new Object(); 
thumbBounds = thumbContainer.getBounds(this); 
thumbContainer.addEventListener(MouseEvent.MOUSE_OVER, setScrolling); 

private function setScrolling(me:MouseEvent):void         
{             
    thumbContainer.removeEventListener(MouseEvent.MOUSE_OVER, setScrolling);
    stage.addEventListener(Event.ENTER_FRAME, scrollThumbs);         
} 

private function scrollThumbs(e:Event):void         
{             
    if(mouseX <= thumbBounds.x || mouseX > thumbBounds.width || 
       mouseX < thumbBounds.y || mouseX > thumbBounds.height)
    {                 
        thumbContainer.addEventListener(MouseEvent.MOUSE_OVER, setScrolling); 
        stage.removeEventListener(Event.ENTER_FRAME, scrollThumbs);             
    } 

    if(thumbContainer.x >= 0)             
    {                 
        thumbContainer.x = 0;             
    }             

    if(thumbContainer.x <= -842)            
    {                 
        thumbContainer.x = -842;            
    }             

    var xdist:Number = new Number();             
    xdist = mouseX - 382;             
    thumbContainer.x += Math.round(-xdist / 10);         
}

Answer 1

One error I see immediately is:

if(mouseX <= thumbBounds.x || mouseX > thumbBounds.width || 
   mouseX < thumbBounds.y || mouseX > thumbBounds.height)

Shouldn't you be checking the mouseY agains the thumbBounds.y and thumbBounds.height?

As for the choppyness, that could be related to the framerate of the movie, the size and the number of the images. It also depends on the magnitude of your xdist value. I'd try and use interpolation (tweening) some how. Calculate the end destination of the container and animate it towards there using Tweener or TweenLite.

e.g.

TweenLite.to(thumbContainer.x, 0.5, { x: thumbContainer.x + Math.round(-xdist / 10) });

This will cause the movement between the thumbcontainer current position and the new position will happen smoothly over half a second (instead of immediately).