Skip to main content
Participant
August 30, 2021
Answered

custom cursor html5 canvas remove arrow when button on stage

  • August 30, 2021
  • 1 reply
  • 560 views

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.

    This topic has been closed for replies.
    Correct answer kglad

    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");
    }
    }

    1 reply

    kglad
    Community Expert
    Community Expert
    August 30, 2021

    use a movieclip instead of a button.

    iana333Author
    Participant
    August 30, 2021

    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
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    August 31, 2021

    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");
    }
    }