custom cursor html5 canvas remove arrow when button on stage

[iana333]

Hello great minds,

I'm updating an old actionscript project to html5 canvas.

The project has a custom cursor with a button with an over state.

Once there is a button on the stage, the updated code: stage.canvas.style.cursor = "none"; stops working and the arrow shows.

I can remove the hand when the cursor is over the button by adding: this.button1.cursor = "none";

But the arrow remains on the rest of the stage.

If I use a movie clip instead of a button I still need: stage.enableMouseOver(10); for the mouse over state

which brings the arrow back. Adding: this.stage.cursor = "none"; removes the arrow when hovering over the button but not on the rest of the stage.

I'm wondering if there is a solution to this.

To replicate the original flash I need a mouse over state on either a button or a movie clip.

[kglad]

use a movieclip instead of a button.

[iana333]

Thanks for the reply but but as I explained I need a overstate on the movie clip.

"If I use a movie clip instead of a button I still need: stage.enableMouseOver(10); for the mouse over state

which brings the arrow back."

[kglad · Accepted solution]

you're not understanding something basic.  i'm not sure what that is, but with a movieclip, add a this.stop() to its first frame (labelled "up") and then create your "over" (and if you want "down") frames.

if _cursor is your custom cursor, you can then use:

var pt;

stage.enableMouseOver(10);
this._cursor.cursor = "none"
stage.addEventListener("stagemousemove",moveF.bind(this));

function moveF(){
this._cursor.x = stage.mouseX;
this._cursor.y = stage.mouseY;
pt = this.mc.globalToLocal(this._cursor.x, this._cursor.y);
if(this.mc.hitTest(pt.x, pt.y)){
this.mc.gotoAndStop("over");
} else {
this.mc.gotoAndStop("up");
}
}