Move image According to stage?

What i have is a movie which is lets say the default size 550w * 400h and i have an image which is 750w * 600h which is inside a movie clip and is placed in the center of the stage. What i want to happen is when i move the mouse around the stage i want the picture to move in relation of the _x. So for example if the mouse is at the bottom left corner of the stage the image will slowly eases to its bottom left corner. So where the mouse is on the stage i want the movie to scroll to. i dont know how to get this working with the different sizes.

Thanks in advance

Hi,

I can think of a couple ways to do this. One would be place a MC inside the "picture" MC and set that MC's _x and _y position to the mouse position. To make it slide gradually, you will need to put in a delay of some kind...... something like "destination._x / 2" in an onEnterFrame. This will divide the distance traveled by 2 in every frame simulating a slow down effect as it reaches the final destination.

The other way you might want to explore would be with the locatToGlobal command to determine the x and y position of the picture(local) and the _x and _y position of the mouse(global). I dont have any good code examples handy but there should be some tutorials or demo's around about it.

HTH
NTD

Yep that sounds exactly like i want. Ill give it a go and ill get back to ya. But in the mean time if anyone happens to find a way please let me know.

Just thaught a fla would be nice.

PS: Going by the first one if i do the slow down effect /2 it will never reach its destination right so it will continually /2 forever will this slow the movie down?

well, it wont slow the movie down per say unless you have lots of those. It is a bit CPU intensive as you are correct, it never completely stops, but used sparingly, it works well. One onEnterFrame with that should not slow your movie to any noticable level.

NTD

I just tried it and i couldnt get it to work properly.

What i had was
The mc containing the picture called "back" and inside i have an empty movie clip called "empty"

the actions i had on the empty movie where
onClipEvent(enterFrame) {
_x = _root._xmouse;
_y = _root._ymouse;
}

and on the "back" movie i have

onClipEvent(enterFrame) {

xpos = _root.back.empty._x;
ypos = _root.back.empty._y;

_x = xpos / 2;
_y = ypos / 2;
}

i dont think i understood you on how to set it up.

Thanks in advance

The only i can explain on how its supposed to work is. if i got to point y,0 x,0 on my stage the back mc will slowly move until its point y,0 x,0 is in the same spot as the main stage but if its like y,10 x 10 the points wont be the same because the image is bigger so it will be something like if im at y,10 x,10 the image will goto y,13.5 x,13.5 and so on.

not sure if this will help, a little different approach for movement. You would need to use a set of "if" statements to restrict the movement of the MC to where you want, but might help......

demo attached file

NTD

Thats not really what i want.I dont want the center of the movie to be where the mouse is i want the main stage to act like a small map in releation to what you can see on the main stage with the main picture. I will make an animation later today to show you what i mean. But thanks for your help NTD

Here's a link to my attempt at doing what you describe:

Map Scroller (.fla)

Map Scroller (.swf)


And here's the script. It assumes there is a large image attached to a movie called map_mc, which is on the stage.

Code:

---


SW = Stage.width;  // size of stage
SH = Stage.height;
MW = map_mc._width;  // size of large map
MH = map_mc._height;
map_mc.maxX = MW-SW; // max scroll coordinates
map_mc.maxY = MH-SH;
map_mc.speed = 6;    // travel speed
// initial targetting
map_mc.tx = -(map_mc.maxX * _root._xmouse / SW);
map_mc.ty = -(map_mc.maxY * _root._ymouse / SH);

_root.onMouseMove = function()
{
  // set target scaled by mouse position in stage
        map_mc.tx = -(map_mc.maxX * _root._xmouse / SW);
        map_mc.ty = -(map_mc.maxY * _root._ymouse / SH);
}

map_mc.onEnterFrame = function()
{
  // scroll map towards the target
        var dx = this.tx - this._x;
        var dy = this.ty - this._y;
        this._x += dx/this.speed;
        this._y += dy/this.speed;
}

---

So how's this work? The key is this line:

map_mc.tx = -(map_mc.maxX * _root._xmouse / SW);

xmouse/SW is a ratio that is going to be 0 when you are on the left side of the stage, and 1 when you are on the right side of the stage.

We multiply this value by the maximum value that we want to scroll the big map (maxX), and then negate it, so that the map scrolls to the left, instead of to the right.


- Jim

jbum to the rescue!

jbum advice should automatically override any NTD advice.

Regards
NTD

Heh - thanks NTD :)

Here's an amusing variant (based on a post from yesterday) that makes the map act like it is mounted on springs.

Tweak the variables tk and damp to your taste, they are both sensitive to frame-rate.

Code:

---

SW = Stage.width;
// size of stage
SH = Stage.height;
MW = map_mc._width;
// size of large map
MH = map_mc._height;
map_mc.maxX = -(MW-SW);
// max scroll coordinates
map_mc.maxY = -(MH-SH);
map_mc.tx = map_mc.maxX*_root._xmouse/SW;
map_mc.ty = map_mc.maxY*_root._ymouse/SH;

// setup spring stuff
map_mc.vx = 0;
map_mc.vy = 0;
map_mc.tk = .3; // spring stiffness
map_mc.damp = .8; // spring damping
       
_root.onMouseMove = function()
{
        map_mc.tx = map_mc.maxX*_root._xmouse/SW;
        map_mc.ty = map_mc.maxY*_root._ymouse/SH;
};

map_mc.onEnterFrame = function() {
        var dx = this.tx-this._x;
        var dy = this.ty-this._y;

        this.vx += dx*this.tk;
        this.vx *= this.damp;
        this.vy += dy*this.tk;
        this.vy *= this.damp;

        this._x += this.vx;
        this._y += this.vy;
};

---

Thanks for all of this jbum really appretiate it. Saved the day.
Thanks to you to NTD.