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');
});
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
...Copy link to clipboard
Copied
Are button_1 and button_2, in fact, buttons?
Copy link to clipboard
Copied
Yes, they are buttons.
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";
Copy link to clipboard
Copied
You're making the button follow the mouse pointer??
Copy link to clipboard
Copied
I don't know what you mean by "making the button follow the mouse pointer".
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.
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.
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:
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
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.
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?
Copy link to clipboard
Copied
Not one provided by Adobe, but you could use DropBox, Google Drive, WeTransfer, etc.
Copy link to clipboard
Copied
Here is the Dropbox link:
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:
Copy link to clipboard
Copied
Ah... you develop banner ads.
Well good luck.
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,
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
Copy link to clipboard
Copied
Also might be something to do with objects in your button being grouped or ungrouped. Play around.