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';
}
Maybe try this one.
stage.enableMouseOver();
var root = this;
root.theButtonName.cursor = "pointer";
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.
@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...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.