Inspiring

Answered

Animate CC get mouse x y coordinates

Forum|Forum|9 years ago
December 4, 2016
3 replies
8189 views

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

This topic has been closed for replies.

Correct answer Marsman2500

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.

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;

}

N

Numinus67

Known Participant

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

how do you remove this event listener?

Colin Holgate

Inspiring

this.removeEventListener("tick", fl_CustomMouseCursor);

N

Numinus67

Known Participant

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

Inspiring

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.

M

Marsman2500Author

Inspiring

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.

kglad

Community Expert

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

M

Marsman2500Author

Inspiring

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

Inspiring

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.

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