Changing cursor to pointer on roll over in HTML5 canvas with Flash CC

Question

I'm working on adding some interactivity to some buttons in an HTML5 canvas document in FLASH CC. The functionality works great, but I can't figure out how to add the JS to it for adding a rollover so that the handcursor/pointer appears when the buttons are rolled over.

I know how to do this in AS3 through the buttonMode, but I'm a total noob to JS.

Below is the code that I have currently for the buttons in the HTMl5 canvas doc, Thanks in advance for any help!

var frequency = 1;
stage.enableMouseOver(frequency);

this.btn_yes.addEventListener("click", clickYes.bind(this));
this.btn_no.addEventListener("click", clickNo.bind(this));

this.btn_yes.addEventListener("mouseover", MouseOverYes);
this.btn_yes.addEventListener("mouseout", MouseOutYes);

this.btn_no.addEventListener("mouseover", MouseOverNo);
this.btn_no.addEventListener("mouseout", MouseOutNo);

function clickYes()
   {
       this.gotoAndPlay("chooseYes");
   }


function clickNo()
   {
       this.gotoAndPlay("no");
   }


function MouseOverYes()
   {
       this.btn_yes.style.cursor = 'pointer';
   }


function MouseOutYes()
   {
       this.btn_yes.style.cursor = 'default';
   }

function MouseOverNo()
     {
       this.btn_no.style.cursor = 'pointer';
     }


function MouseOutNo()
     {
         this.btn_no.style.cursor = 'default';
     }

http://stackoverflow.com/questions/12608729/cursorpointer-on-hover-html5-canvas-element http://stackoverflow.com/questions/10665862/how-to-make-clickable-points-in-html5-canvas you might check these out. — dcclassics, Apr 24 '14 at 22:00

Rodrigo Martinez · Answer 1 · 2014-12-12T12:54:18.553

0

Maybe try this one.

stage.enableMouseOver();
var root = this;
root.theButtonName.cursor = "pointer";

edited Dec 12 '14 at 12:54

answered Dec 12 '14 at 04:38

Rodrigo Martinez

31
1
5

score 0 · Answer 2 · answered Aug 05 '15 at 17:43

stage.canvas.style.cursor = "default";

will set the mouse cursor to it's normal state.

stage.canvas.style.cursor = "none";

This will make the mouse cursor disappear, there's a serious lack of documentation on everything right now. Trying to find a good resource for coding in flash canvas as well. if you find one please let me know.

score 0 · Answer 3 · answered Sep 16 '15 at 20:26

@user3570797 If you are using FlashCC, this can be done easily by creating button symbols. Try something like this: http://grab.by/Ktw2

Then reference these buttons by name via the 'ExportRoot' object and attach event handlers to those buttons.

Example:

function init() {
 canvas = document.getElementById("canvas");
 exportRoot = new lib.Button();

 stage = new createjs.Stage(canvas);
 stage.addChild(exportRoot);
 stage.update();
 stage.enableMouseOver();

 var yesBtn = exportRoot.yesBtn;
 var noBtn = exportRoot.noBtn;
 yesBtn.addEventListener("click", handleClick);
 noBtn.addEventListener("click", handleClick);

 createjs.Ticker.setFPS(lib.properties.fps);
 createjs.Ticker.addEventListener("tick", stage);

}

function handleClick(event) {
 //doSomething...

}

Changing cursor to pointer on roll over in HTML5 canvas with Flash CC

3 Answers3