# Movie clip to move when mouse moves

**URL:** <https://forum.kirupa.com/t/movie-clip-to-move-when-mouse-moves/301911>\
**Category:** flash\
**Created:** [December 17, 2009, 5:41pm UTC](https://forum.kirupa.com/t/movie-clip-to-move-when-mouse-moves/301911 "2009-12-17T17:41:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![PWebdesigns](https://avatars.discourse-cdn.com/v4/letter/p/e36b37/32.png) [@PWebdesigns](https://forum.kirupa.com/u/PWebdesigns)\
**Post date:** [December 17, 2009, 5:41pm UTC](https://forum.kirupa.com/t/movie-clip-to-move-when-mouse-moves/301911/1 "2009-12-17T17:41:20Z")

</div>

I am trying to make a flash game for a website. In the game, there is a large interactive map which I created. The map is supposed to scroll just by moving the mouse.

As a placeholder for the map, an ex-coworker created a gradient background, which moves along with the mouse. Here is the AS.  
[INDENT]// Width and height of image  
var w = Stage.width \* 2;  
var h = Stage.height \* 2;

// Mock up graphic that will be the image  
var image\_mc = this.createEmptyMovieClip (“image\_mc”, 0);  
image\_mc.beginGradientFill (‘radial’, [0xFF0000, 0x0000FF], [100, 100], [0, 255], {matrixType:“box”, x:0, y:0, w:w, h:h, r:0});  
image\_mc.lineTo(w,0);  
image\_mc.lineTo (w, h);  
image\_mc.lineTo (0, h);  
image\_mc.lineTo (0, 0);  
image\_mc.endFill ();

/\*\* Below is important \*/  
image\_mc.onMouseMove = move;

function move ()  
{  
var xpercent = \_xmouse / Stage.width;  
var ypercent = \_ymouse / Stage.height;  
this.\_x = (Stage.width - this.\_width) \* xpercent;  
this.\_y = (Stage.height - this.\_height) \* ypercent;  
updateAfterEvent ();  
}

[/INDENT]And this works fine. But when I take out the gradient and add the map which is a movie clip, it does not move along with the mouse. Here is the new AS (I added what is in red)

[INDENT]// Width and height of image  
var w = Stage.width \* 2;  
var h = Stage.height \* 2;  
[COLOR=red]// Added map[/COLOR]  
[COLOR=red]var image\_mc = this.createEmptyMovieClip (“image\_mc”, 0);[/COLOR]  
[COLOR=red]image\_mc.loadMovie(“WVSU\_campus\_map.swf.”)[/COLOR]

/\*\* Below is important \*/  
image\_mc.onMouseMove = move;

function move ()  
{  
var xpercent = \_xmouse / Stage.width;  
var ypercent = \_ymouse / Stage.height;  
this.\_x = (Stage.width - this.\_width) \* xpercent;  
this.\_y = (Stage.height - this.\_height) \* ypercent;  
updateAfterEvent ();  
}  
[/INDENT]

The map movie clip is there in the background, but it does not move the way the gradient did.

Does anyone know how to make the MC move and pan along with the mouse? Even if it is a completely different code?!

TIA! 🙂