Animate CC get mouse x y coordinates

[Marsman2500]

How do I return the x and y stage pixel coordinates in Animate CC?

[kglad]

use e.stageX,e.stageY where e is a mouseevent.

[Marsman2500]

Sorry. I'm new to Animate CC code. Let's say I wanted a movieclip to follow the x value of the cursor. In my mind, the code would look like this:

var frequency = 3;

stage.enableMouseOver(frequency);

this.addEventListener("mousemove", mouseMoved);

function mouseMoved(e) {

  this.my_movieclip.x = e.pageX;

};

... but this does not work.

[Colin Holgate]

The 'this' in the function is not the current timeline. Either add a .bind(this) to mouseMoved:

this.addEventListener("mousemove", mouseMoved.bind(this));

or use another variable:

var self = this;

function mouseMoved(e) {

  self.my_movieclip.x = e.pageX;

};

If you look in the Code Snippets panel, under HTML5 Canvas, there's an example that shows how to do a custom cursor, which is on the same lines as what you're trying to do.

[Marsman2500 · Accepted solution]

Thanks Colin for steering me to the code snippets. Here is the working code (Gets mouse position and causes movieClip to follow mouse without hiding the cursor):

this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {

  this.ball.x = stage.mouseX;

  this.ball.y = stage.mouseY;

}

[Colin Holgate]

By the way, HTML5 Canvas is just one of the formats Animate can work in. If you're doing animation for video, games and activities for desktop browsers, desktop applications, mobile apps, Apple TV apps, touch screen kiosk applications, and so on, you would use ActionScript 3.0 instead. Kglad's answer was correct for ActionScript. It's worth mentioning which kind of FLA you are working on.

[Marsman2500]

Colin- That's true. I wanted this particular FLA to be an HTML5 canvas. Thanks for the tip for future reference.

I used the code to create a test pseudo 3-D scene here.

[Numinus67]

this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

how do you remove this event listener?

[Colin Holgate]

this.removeEventListener("tick", fl_CustomMouseCursor);

[Numinus67]

how do you remove it from a function called from a mouseout event? the following isn't working for me.

this.myButton.addEventListener("mouseover", mouseOverFunction);
this.myButton.addEventListener("mouseout", mouseOutFunction);
function mouseOverFunction() {
  root.addEventListener("tick", fl_CustomMouseCursor.bind(root));
}
function mouseOutFunction(){
  root.removeEventListener("tick", fl_CustomMouseCursor);
}
function fl_CustomMouseCursor() {
  this.lilBall.x = stage.mouseX/stage.scaleX;
  this.lilBall.y = stage.mouseY/stage.scaleY;
}

[Colin Holgate]

From the look of it, there's a missing line:

var root = this;

Assuming the listener needs to be on that frame's stage.

[Numinus67]

no, i have that line earlier in my code. the mouseover binding part is working. but the removal is not.

after researching i've found that apparently .bind() creates a new function that needs to be referenced in the remove. but i can't figure out how to create a variable that references it.   

[Colin Holgate]

I see that for fl_CustomMouseCursor you are binding root, but then in the function you are using 'this'. The 'this' in that function is the function. I think that if you are binding root you should use root and not this.

[Numinus67]

unfortunately, no dice. that change doesn't solve the problem.

[Colin Holgate]

Are you able to put your FLA online somewhere for us to try it?