• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Custom cursor not working properly html5

New Here ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

Hello,

I have a client who wants a custom cursor and rollover effects. The rollovers work fine but the cursor is not. The default cursor is still being displayed and the custom cursor kind of responds in a weird way. Does anyone know why this is? If I were to take out the coding for the rollovers, the cursor works fine. Here is a link to what I am talking about:https://2shea.com/AFC/advocacy/advocacy_webpage.html.

The html5 code is below (The were lots of rollovers so I only included one rollover script to simplify). 

Thanks!

 

var _this = this;
stage.enableMouseOver(3);
_this.orange_button.on('mouseover', function () {
_this.orange_photo1.play();
});
var _this = this;
stage.enableMouseOver(3);
_this.orange_button.on('mouseout', function () {
_this.orange_photo1.play();
});
/* Custom Mouse Cursor
Replaces the default mouse cursor with the specified symbol instance.
*/
stage.canvas.style.cursor = "none";
this.pasted_purple_kid.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor_6.bind(this));

function fl_CustomMouseCursor_6() {
this.pasted_purple_kid.x = stage.mouseX;
this.pasted_purple_kid.y = stage.mouseY;
}

Views

654

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 Expert ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

Hi.

 

Try setting the cursor property on the root to "none" and when you set the custom cursor position to the mouse position you have to take into account the stage scale. Like this:

function fl_CustomMouseCursor_6() {
    this.pasted_purple_kid.x = stage.mouseX / stage.scaleX;
    this.pasted_purple_kid.y = stage.mouseY / stage.scaleY;
}

 

Please let us know the outcome.

 

Regards,

JC

Votes

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 ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

OK. Thanks! I will try it. I am new to this so bear with me if I don't follow the directions properly.

Votes

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 ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

Thanks JC! That worked!

Votes

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 ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

Hey JC, I still have the default cursor appearing over the custom cursor. I just noticed that. I thought I had set the cursor property to "none" in the original script (stage.canvas.style.cursor = "none";). I think you meant differently. Do I need to set the cursor property to "none" in a different way than what I have written? Thanks.  Below is the current script.

 

stage.canvas.style.cursor = "none";
this.pasted_purple_kid.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor_6.bind(this));

Votes

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 Expert ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

@garydg 

 

try:

 

document.getElementById("animation_container").style.cursor = "none"

Votes

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 ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

Hi kglad.

I tried the script and it partially works. It works fine overall except when I rollover a button, then a hand cursor appears over the custom cursor. I commented out the original cursor property and inserted the new one below that.

 

//stage.canvas.style.cursor = "none";
document.getElementById("animation_container").style.cursor = "none" // the new script provided by kglad
this.pasted_purple_kid.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor_6.bind(this));

function fl_CustomMouseCursor_6() {
//this.test_cursor.x = stage.mouseX;
//this.test_cursor.y = stage.mouseY;
this.pasted_purple_kid.x = stage.mouseX / stage.scaleX;
this.pasted_purple_kid.y = stage.mouseY / stage.scaleY;
}

Votes

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 Expert ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

for buttons, you need to set their cursor property to "none".

Votes

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 ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

Thanks kglad! That worked!

Votes

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 Expert ,
Apr 21, 2023 Apr 21, 2023

Copy link to clipboard

Copied

LATEST

you're welcome.

Votes

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