Copy link to clipboard
Copied
How do I return the x and y stage pixel coordinates in Animate CC?
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;
}
Copy link to clipboard
Copied
use e.stageX,e.stageY where e is a mouseevent.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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;
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));
how do you remove this event listener?
Copy link to clipboard
Copied
this.removeEventListener("tick", fl_CustomMouseCursor);
Copy link to clipboard
Copied
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;
}
Copy link to clipboard
Copied
From the look of it, there's a missing line:
var root = this;
Assuming the listener needs to be on that frame's stage.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
unfortunately, no dice. that change doesn't solve the problem.
Copy link to clipboard
Copied
Are you able to put your FLA online somewhere for us to try it?