Canvas with button not showing hand cursor

[mattb79078689]

I have two buttons on a canvas file that I created with Adobe Animate. I can't get the cursor to change to the pointer/hand. I can click on it, the cursor just doesn't change.

Here is the script I'm using:

Button 1

var _this = this;

/*

Clicking on the specified symbol instance executes a function.

*/

_this.button_1.on('click', function(){

/*

Loads the URL in a new browser window.

*/

window.open('http://www.adobe.com', '_blank');

});

Button 2

var _this = this;

/*

Clicking on the specified symbol instance executes a function.

*/

_this.button_2.on('click', function(){

/*

Loads the URL in a new browser window.

*/

window.open('http://www.eatonvance.com', '_blank');

});

[ClayUUID]

Are button_1 and button_2, in fact, buttons?

[mattb79078689]

Yes, they are buttons.

[mattb79078689]

This is kind of working, but only works intermittently:

/* Custom Mouse Cursor

Replaces the default mouse cursor with the specified symbol instance.

*/

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

this.button_1.mouseEnabled = true;

this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {

  this.button_1.x = stage.mouseX;

  this.button_1.y = stage.mouseY;

}

//To restore the default mouse pointer, uncomment the following lines:

//this.removeEventListener("tick", fl_CustomMouseCursor.bind(this));

//stage.removeChild(button_1);

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

[ClayUUID]

You're making the button follow the mouse pointer??

[mattb79078689]

I don't know what you mean by "making the button follow the mouse pointer".

[ClayUUID]

I mean this code that you just posted:

function fl_CustomMouseCursor() {

  this.button_1.x = stage.mouseX;

  this.button_1.y = stage.mouseY;

}

This moves "button_1" to wherever the mouse cursor is.

[mattb79078689]

I just got that code from the "code snippets" in Animate. It was autogenerated. It's the one called "Custom Mouse Cursor".

If you can think of another way to get the mouse pointer to display the finger pointing, I'm more than happy to implement it.

[Colin Holgate]

You're trying the custom cursor as a work around to not getting the pointing finger cursor when you point at buttons. In message 2 you said that they are buttons, can you double check that? One big difference between a button looking thing being a MovieClip, and being a Button, is that the hand cursor doesn't appear if it's a MovieClip. Select each one on stage, and make sure that in Properties they are set to be Button:

[Colin Holgate]

I just had a thought. You may have used the Components panel to make the buttons. Those would then be HTML5 components that sit on top of everything on stage, and the custom cursor approach won't work, because that all happens underneath the component.

If you have a reason to use components, and not make your own regular Animate button, you may need to track down solutions on how to make an HTML button show a custom cursor. Here's one discussion about that:

css - How to get the cursor to change to the hand when hovering a <button> tag - Stack Overflow 

[Colin Holgate]

I looked into this for a while, and it doesn't seem to be very easy to hack the CSS of a component. If you could learn how to make buttons in Animate, and not use components, that would be a much easier solution.

[mattb79078689]

Colin, good thoughts. These are definitely buttons and not movie clips. They aren't from the Components either. Is there a place I can toss this fla file and someone can take a look and test my code?

[Colin Holgate]

Not one provided by Adobe, but you could use DropBox, Google Drive, WeTransfer, etc.

[mattb79078689]

Here is the Dropbox link:

Dropbox - 300x250-1.fla

[Colin Holgate · Accepted solution]

Just for interest, this code would work for a custom cursor:

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

this.yourCursorMC.mouseEnabled = false;

this.addEventListener("tick", fl_CustomMouseCursor_3.bind(this));

function fl_CustomMouseCursor_3() {

  this.yourCursorMC.x = stage.mouseX;

  this.yourCursorMC.y = stage.mouseY;

}

'yourCursorMC' would be a movieclip that you would place off stage somewhere. It could perhaps look like Mickey Mouse's hand, or a colorful arrow. Or some other non-standard looking cursor. The mouseEnabled = false part would mean that when you click on something, the custom cursor movieclip itself won't trap the click, it will get through ok to the buttons underneath the cursor.

The buttons themselves would not want to be moved around to follow the cursor, they would stay in place, over the hot spots in your design.

With the code working correctly there is a new problem that happens. stage.canvas.style.cursor = "none"; is telling the window to show no cursor, so that you don't see an arrow on top of the custom cursor, as it moves around. But, because you're using buttons, those are forcing the window to show the arrow cursor when you stop pointing at them. You could successfully use a custom cursor, and get no arrow appearing, if your two buttons were movieclips instead, and if you used the code I gave above.

But don't do that! Instead, delete all of the code in the Actions layer of frame 1, and then the regular button pointer cursor should appear.

One thing that could go wrong is that if your buttons are filling the whole of the stage, which they are, and you then view the final thing inside a DIV that is exactly the size of the stage, there won't be a moment where the cursor rolls over the buttons. One moment it's outside of the DIV, then its immediately over a button. There isn't a moment where it's over the DIV but outside of the button.

You could test if that's the issue by making your buttons smaller. Something like this:

[ClayUUID]

Ah... you develop banner ads.

Well good luck.

[albertd9194959]

Collin is spot on....

Part of the issue is that there is a core level mouse enter icon state for animate buttons and your trying to override it / take it over.

So you move your mouse over the button....default animate over button icon triggers....your custom code icon....click the button, more custom code....default animate over button icon triggers......ah confusion and explosions.....

For me, creating custom buttons worked best to avoid weirdness....use a movie clip or graphic, add .mouseenter / .mouseover and .mouseleave / .mouseout event listeners and they need to communicate with your .click or .mousedown event listeners.

Animate CC HTML5 Canvas Mouse Over

so based on Collins example, you would just replace "yourCursorMC" with "yourCursorOverMC" for .mouseenter and "yourCursorClickMC" for .mousedown.

BUT, you would need to change the way it works if your using, say 20 buttons so you dont spam event listeners.

https://www.kirupa.com/html5/handling_events_for_many_elements.htm

Regards,

[Ron5EB9]

I just had the same problem. Copied a Pause button from one file (hand cursor showed) to another and the hand cursor did not show. This is how I ended up here.

I changed the publish settings (HTML5) and the hancursor showed. I don't know why 😞

The two settings I changed were "overwrite HTML ..." and "Multibound frames".

Don't ask me why this worked as I have not a clue.

Ron

[Ron5EB9]

Also might be something to do with objects in your button being grouped or ungrouped. Play around.