使用Flash CC在HTML5画布中将光标更改为鼠标悬停时的指针

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';
     }

Answer 1

Maybe try this one.

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

Answer 2

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.

Answer 3

@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...

}