How to make a movie clip scroll with mouse position

Question

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 · Accepted Answer

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;

}

Ned Murphy · Answer

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"

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded