Skip to main content
E
EverestJ
Inspiring
October 30, 2012
Answered

How to make a movie clip scroll with mouse position

  • October 30, 2012
  • 1 reply
  • 7262 views

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!

This topic has been closed for replies.
Correct answer Ned Murphy

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.


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;

    }

}

1 reply

Ned Murphy
Ned Murphy
Legend
October 30, 2012

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"

E
EverestJAuthor
Inspiring
October 30, 2012

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

E
EverestJAuthor
Inspiring
October 31, 2012

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.


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!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices