Canvas with button not showing hand cursor

New Here ,
May 02, 2018 May 02, 2018

Copy link to clipboard

Copied

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

});

Views

3.3K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , May 03, 2018 May 03, 2018
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. T...

Likes

Translate

Translate
Adobe Community Professional ,
May 02, 2018 May 02, 2018

Copy link to clipboard

Copied

Are button_1 and button_2, in fact, buttons?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

Yes, they are buttons.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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:

Screen Shot 2018-05-03 at 3.01.40 PM.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

Here is the Dropbox link:

Dropbox - 300x250-1.fla

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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:

Screen Shot 2018-05-03 at 5.31.56 PM.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

Ah... you develop banner ads.

Well good luck.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 03, 2018 May 03, 2018

Copy link to clipboard

Copied

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,

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines