How to make a movie clip scroll with mouse position

[EverestJ]

Hello again.  I asked a question about parallax scrolling and I think it was the wrong question.  I am looking to control a website with similar controls as this example:

http://www.sectionseven.com/index2.html

I want to use this but also with both  x and y axis.  Any ideas as to where to find a tutorial as to where to do this?  It should be fairly simple, but I am having trouble.  Any help or code is greatly appreciated.  Thanks!

[Ned Murphy]

What trouble are you having.  Show the code that is giving you a problem.  The same approach that you might take with parallax scrolling is likely to apply, the difference being that you are only scrolling one level of content rather than multplie levels.

In the case of your current example.  The movement of the content is based on passing a specific horizontal position at which the content is scrolled.  So you would pick a point at each side of the stage that defines where motion starts, and the further the distance from that point the faster the motion becomes, until the end of the content is reached.

What you should do is pursue getting one direction of motion solved first.  Once you understand how that works, you should be able to apply the same approach for the perpendicular motion.

For tutorial help or code examples you could try using search terms like "AS3 hover scroll" or "AS3 mouseover scroll"

[EverestJ]

The problem I am having is that when I place my map as a MC, it starts to scroll just fine.  Then when I export to a browser, it doesn't fill the screen.  I can not get the coordinates down properly and once the MC reaches a certain point, I can not get it to come back.  It is very inaccurate as a whole.  That is where my issues are.  Thanks and sorry to be a pain in the butt

[robdillon]

As Ned said, you have to show us what you've done. Without seeing your code and an example of the bad behaviour, the best that anyone can offer is, "you're doing something wrong". And that's not useful to you or anyone else.

[EverestJ]

var dir:int=1;

var mSpeed:Number;

var prevXpos:Number;

var currentMC:MovieClip;

var isIn:Boolean = true;

stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoved);

/*stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown)*/;

stage.addEventListener(MouseEvent.MOUSE_OVER, MouseUp);

stage.addEventListener(MouseEvent.MOUSE_OUT, MouseDown)

function onMouseMoved(e:MouseEvent):void {

    constrainedMove(bg_mc, 4, 1);

}

function MouseUp(e:MouseEvent):void {

    isIn = true;

}

function MouseDown(e:MouseEvent):void {

    isIn = false;

}

function constrainedMove(target:MovieClip, speed:Number, dir:Number) {

    currentMC = target;

    myspeed = speed;

    var mousePercent_x:Number = mouseX/stage.stageWidth;

    var mousePercent_y:Number = mouseY/stage.stageHeight;

    var mSpeed_x:Number;

    var mSpeed_y:Number;

    //trace(dir)

    if (dir == 1) {

        mSpeed_x = mousePercent_x;

        mSpeed_y = mousePercent_y;

    } else {

        mSpeed_x = 1-mousePercent_x;

        mSpeed_y = 1-mousePercent_y;

    }

    currentMC.destX = Math.round(-((currentMC.width-stage.stageWidth)*mSpeed_x));

    currentMC.destY = Math.round(-((currentMC.height-stage.stageHeight)*mSpeed_y));

    addEventListener(Event.ENTER_FRAME, onEnter);

}

function onEnter(e:Event):void {

    if(isIn == true)

    {

    if (currentMC.x == currentMC.destX) {

        removeEventListener(Event.ENTER_FRAME, onEnter);

    } else if (currentMC.x>currentMC.destX) {

        currentMC.x -= Math.ceil((currentMC.x-currentMC.destX)*(myspeed/100));

    } else if (currentMC.x<currentMC.destX) {

        currentMC.x += Math.ceil((currentMC.destX-currentMC.x)*(myspeed/100));

    }

    if (currentMC.y == currentMC.destY) {

        removeEventListener(Event.ENTER_FRAME, onEnter);

    } else if (currentMC.y>currentMC.destY) {

        currentMC.y -= Math.ceil((currentMC.y-currentMC.destY)*(myspeed/100));

    } else if (currentMC.y<currentMC.destY) {

        currentMC.y += Math.ceil((currentMC.destY-currentMC.y)*(myspeed/100));

    }

    }

}

the movement is very stiff and rigid.  I know I need to somehow incorporate greensock or something of the sorts, but im not sure.  Any suggestions would be much appreciated.  Thanks!

[Ned Murphy]

Part of your problem with the one way movement is that your movement commanding function only commands one way motion...

function onMouseMoved(e:MouseEvent):void {

    constrainedMove(bg_mc, 4, 1);

}

It should not be using fixed values, and it should define the values based on the mouse position. 

As you have it, it will only always proceed in the dir = 1 direction.  There are conditions when you want the dir to be -1.  The speed value could stay fixed though you could get smoother motion if you were to vary it based on distance like the example you pointed to likely does.

Further down where you deal with that dir variable....

if (dir == 1) { 

        mSpeed_x = mousePercent_x;

        mSpeed_y = mousePercent_y;

} else { 

        mSpeed_x = 1-mousePercent_x;

        mSpeed_y = 1-mousePercent_y;

}

I didn't study it closely do I might be wrong, but I believe the else portion of that needs to be changed to making the value negative, not subtracting it from +1.  If it is a fraction t begin with, it will always be a value > 0 if you subtract it from 1, just like the first half of that conditional, which will make your motion always the same direction as well.  If you replace that "1-" with a "0-" or  "-1* " it might help there... just remember you need to send something other than a dir value = 1 to get any use out of that else section

[EverestJ]

I know by this point everyone on here has to be beating their heads against the wall anytime I post.  I do really appreciate all of your help though.  More than you will ever know.  So I simplified the code down to a few lines.  Of course this brings up new questions.  Here is my new code:

addEventListener(Event.ENTER_FRAME,scrollmc1 );

function scrollmc1(event:Event):void

{

    mc.x += (mouseX - mc.x) * 0.04;

    mc.y +=(mouseY - mc.y) *0.04;

}

It seems to work much better and smoother than before.  It is a alot more simple. My new question is 2 parts.

1.  How do I get it to stop scrolling when the movie clip edge lines up with the edge of the screen (so it doesn't just scroll into a white stage).

2.  How do I get this effect to only happen when the user scrolls toward the edges of the screen?

Thanks again.  You guys are awesome and so so patient.  Thank you.

[Ned Murphy · Accepted solution]

Use conditionals to control how far the object can move.  Only allow your movement code to work if the object is not yet to its limit.  Basically something like...

function scrollmc1(event:Event):void

{

    if(mc.x < upperlimit){

        mc.x += (mouseX - mc.x) * 0.04;

        mc.y +=(mouseY - mc.y) *0.04;

    }

}

As far as only allowing the movement to occur when the mouse is at the edge, a similar approach can be taken, something like...

function scrollmc1(event:Event):void

{

    if(mc.x < upperlimit  && (mouseX > rightboundary || mouseY > bottomboundary ){

        mc.x += (mouseX - mc.x) * 0.04;

        mc.y +=(mouseY - mc.y) *0.04;

    }

}

[EverestJ]

Ok, so I came back to this project after having a long break (it was a personal project, and now it has resurfaced as a school project).  Here is my code

addEventListener(Event.ENTER_FRAME,scrollmc1 );

function scrollmc1(event:Event):void

{

     if(mc.x < 911  && (mouseX > 369)) {

        mc.x += (mouseX - mc.x) * 0.04;

    }

    {

     if(mc.x > 369  && (mouseX < 911)) {

        mc.x += (mouseX - mc.x) * 0.04

    }

}}

Only issue I am having now is that it scrolls the opposite way I want it to.  If the mouse is dragging to the left, the screen goes right.   Any help would be appreciated.  Thank you for your help up through this point.

[J_Darps]

Were you ever able to get the screen to go the right way? I have been following the same steps shown here and I am stuck at the same issue that you had. Any fix?

[EverestJ]

Yeah, I figured it out.  simply change 0.04 to -0.04

addEventListener(Event.ENTER_FRAME,scrollmc1 );

function scrollmc1(event:Event):void

{

     if(mc.x < 911  && (mouseX > 369)) {

        mc.x += (mouseX - mc.x) * -0.04;

    }

    {

     if(mc.x > 369  && (mouseX < 911)) {

        mc.x += (mouseX - mc.x) * -0.04

    }

}}

Here is the actual code I used on my site:

stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

stage.align = StageAlign.TOP_LEFT;

function enterFrameHandler(e:Event):void

{

          if((sliderWorkspace.x < 911 && (mouseX > 1100)) || (sliderWorkspace.x > 369 && (mouseX < 90))) {

              var newLocation:Number = sliderWorkspace.x + ((mouseX - sliderWorkspace.x) * -0.04);

                    newLocation = Math.min(910, newLocation);

        newLocation = Math.max(370, newLocation);

        sliderWorkspace.x = newLocation;

    }

}

Let me know if this works for you

[J_Darps]

This is so close to working for me, but the numbers you have set are not letting me pan throrugh the entire mc. Which numbers would I have to change, to change the width of the slider area?

[EverestJ]

The numbers I used are set to my Movie Clip size.  The max and min are the x y coordinates when your movieclip is aligned to the left and to the right of the stage.  It will vary depending on the size of the movieclip

[J_Darps]

So say my movieclip is 4976x1080 with a stage size of 1920x1080, what then? Again, thanks so much for helping me out, I am very much a newbie when it comes to flash.

Also, what is the mc.x, the mouseX, the max, and min in relation to?

function enterFrameHandler(e:Event):void

{

          if((mc.x < 911 && (mouseX > 1100)) || (sliderWorkspace.x > 369 && (mouseX < 90))) {

              var newLocation:Number = sliderWorkspace.x + ((mouseX - sliderWorkspace.x) * -0.04);

                    newLocation = Math.min(910, newLocation);

        newLocation = Math.max(370, newLocation);

        sliderWorkspace.x = newLocation;

    }

}

[EverestJ]

stop();

stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

import flash.events.Event;

import flash.display.StageAlign;

stop();

stage.align = StageAlign.TOP_LEFT;

function enterFrameHandler(e:Event):void

{

          if((mc1.x < 2489 && (mouseX > 1100)) || (mc1.x > -571 && (mouseX <50))) {

              var newLocation:Number = mc1.x + ((mouseX - mc1.x) * -0.04);

                    newLocation = Math.min(2490, newLocation);

        newLocation = Math.max(-570, newLocation);

        mc1.x = newLocation;

    }

}

Try that out.  Just adjusting the numbers will do a lot.   They are in relation to the stage.  That is where all the numbers come from

[tareagen]

Great info in this thread, thank you.  I'm experiencing one problem:

the scrolling seems to speed up exponentially when scrolling to the right (till it gets to the end), and slow down exponentially when scrolling to the left (till it returns to the origin).

Movie clip is 3000 wide x 200 high
Stage is 1000 wide x 200 high

Code:

stop();

stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

import flash.events.Event;

import flash.display.StageAlign;

stop();

stage.align = StageAlign.TOP_LEFT;

function enterFrameHandler(e:Event):void

{

          if(mc1.x < 1000 && (mouseX > 950)) {

              var newLocation:Number = mc1.x + ((mouseX - mc1.x) * -0.01);

                    newLocation = Math.min(1000, newLocation);

        newLocation = Math.max(-2000, newLocation);

        mc1.x = newLocation;

    }

              if(mc1.x > -3000 && (mouseX <50)) {

              var newLocation:Number = mc1.x + ((mouseX - mc1.x) * 0.04);

                    newLocation = Math.min(1000, newLocation);

        newLocation = Math.max(-3000, newLocation);

        mc1.x = newLocation;

    }

}

Can't seem to figure it out . . any ideas?