Animate CC JS mouse follower is not aligned with responsive

[khsana04]

Hello everyone,

I have started a website on Adobe Animate CC, I have done mouse follower with this code:

this.stage.canvas.style.cursor = "none";
this.mouseEnabled = true;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {
     this.plus_mc.x = stage.mouseX;
     this.plus_mc.y = stage.mouseY;
     this.black_plus_mc.x = stage.mouseX;
     this.black_plus_mc.y = stage.mouseY;
}

Now when I do the website responsive at publish setting the follower is not aligned with mouse cursor it only get aligned when I position the cursor at top left corner.

I Hope someone can help me!

Thank you,

Khalil

[ClayUUID · Accepted solution]

Multiply your coordinates by stage.scaleX and scaleY. Or divide them. One of those two.

[khsana04]

Hi ClayUUID,

Thank you for the answer, do you mean I have to edit the code like that:

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

this.mouseEnabled = true;

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

function fl_CustomMouseCursor() {

  this.plus_mc.x = stage.mouseX;

  this.plus_mc.y = stage.mouseY;

  this.black_plus_mc.x = stage.scaleX;

  this.black_plus_mc.y = stage.scaleY;

}

[Colin Holgate]

No, he meant:

this.plus_mc.x = stage.mouseX * stage.scaleX;

this.plus_mc.y = stage.mouseY * stage.scaleY;

[ClayUUID]

Now I must discover in which language of this world "multiply by" translates to "replace with".

[khsana04]

I am sorry for misunderstanding your answer, I did the code like that

this.plus_mc.x = stage.mouseX * stage.scaleX;

this.plus_mc.y = stage.mouseY * stage.scaleY;

this.black_plus_mc.x = stage.mouseX * stage.scaleX;

this.black_plus_mc.y = stage.mouseY * stage.scaleY;

But still not aligned

Thank you

Re: Animate CC JS mouse follower is not aligned with responsive

[ClayUUID]

I did say multiply "or divide". I just tested, and dividing works.

BTW, this.mouseEnabled = true; appears to not be necessary.

[khsana04]

Thank you very much ClayUUID​ IT WORKS, and I am sorry for not following you correctly.

Can I mark the first answer as correct or the last one?

[khsana04]

Thank you again ClayUUID for the answer, can you please let me know how to hide the default cursor and keep the follower only, I could do it by css, but is there is another way to do it inside Animate CC

Thanks

[ClayUUID]

I don't understand why you're asking, your code already hides the cursor.

But this code would be less indirect:

canvas.style.cursor = "none";

[khsana04]

Yes the code should hide the cursor but when I activated the follower to play on mouseover by this code

var frequency = 3;

stage.enableMouseOver(frequency);

this.rightsidepage1_mc.addEventListener("mouseover", fl_MouseOverHandler_1.bind(this));

function fl_MouseOverHandler_1() {

  this.plus_mc.gotoAndPlay("still_mc");

}

It makes the default cursor appears again

[khsana04]

Here is the test example shows the problem test

and the full code:

this.stop();

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

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

function fl_CustomMouseCursor() {

  this.plus_mc.x = stage.mouseX / stage.scaleX;

  this.plus_mc.y = stage.mouseY / stage.scaleY;

}

var frequency = 3;

stage.enableMouseOver(frequency);

this.righthoveringpage1.addEventListener("mouseover", fl_MouseOverHandler_1.bind(this));

function fl_MouseOverHandler_1() {

  this.plus_mc.gotoAndPlay("static");

}

var frequency = 3;

stage.enableMouseOver(frequency);

this.rightsidepage1_mc.addEventListener("mouseover", fl_MouseOverHandler_2.bind(this));

function fl_MouseOverHandler_2() {

  this.plus_mc.gotoAndPlay("right");

}

[ClayUUID]

According to the docs you should be able to hide the cursor with stage.cursor = "none", but it only partially works, hiding the cursor for objects but not the background. This appears to be a bug. To work around it, you could draw a solid-colored object completely covering the background.

[khsana04]

Thank you for the answer, unfortunately, the solid background does not work also, I have put a solid colored background as a separate layer below all the layers, but it still shows the default cursor. here is the screenshot

and here is the test test

[ClayUUID]

I don't see the code I suggested anywhere in that screenshot.

[khsana04]

I have updated the code as I understand and it shows like that test

Also I commented out both lines Colin Holgate​ mentioned

but as you can see it is flickering now between + and > everywhere I move the mouse cursor and ignoring the mouseover the buttons

This is code

this.stop();

stage.cursor = "none";

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

function fl_CustomMouseCursor() {

  this.plus_mc.x = stage.mouseX / stage.scaleX;

  this.plus_mc.y = stage.mouseY / stage.scaleY;

}

var frequency = 3;

//stage.enableMouseOver(frequency);

this.righthoveringpage1.addEventListener("mouseover", fl_MouseOverHandler_1.bind(this));

function fl_MouseOverHandler_1() {

  this.plus_mc.gotoAndPlay("static");

}

var frequency = 3;

//stage.enableMouseOver(frequency);

this.rightsidepage1_mc.addEventListener("mouseover", fl_MouseOverHandler_2.bind(this));

function fl_MouseOverHandler_2() {

  this.plus_mc.gotoAndPlay("right");

}

Thank you very much

[ClayUUID]

khsana04  wrote

I have updated the code as I understand and it shows like that test

Also I commented out both lines https://forums.adobe.com/people/Colin+Holgate  mentioned

but as you can see it is flickering now between + and > everywhere I move the mouse cursor and ignoring the mouseover the buttons

So you tried to combine two different solutions into the same code.

SIGH.

[khsana04]

Not exactly, first I tried stage.cursor = "none" but it didn't work, then I commented out the 2 lines as a separate solution, also didn't work, then I tried both as final step, with same result, and I am sorry if I didn't mention these steps

[Colin Holgate]

The code snippets window has a custom cursor example, which aside from needing the stage.scaleX change does work, without the cursor reppearing. The difference with your one is you are setting the stage.enableMouseOver(frequency);

Comment out those two lines.

[ClayUUID]

It appears the snippet code works by using the tick event instead of mouse movement. As soon as you do anything that requires mouse events, like dropping a button on the stage, the browser cursor comes back.

[khsana04]

For now it only works with css solution only which I tried to avoid, I hope there is a solution inside Animate

here what I have added in html file

<style>

  canvas {

  cursor: none !important;

  }

</style>

I had to add "!important" as it didn't work without it

and here is the test

Thank you very much ClayUUID​ and Colin Holgate​ for your help, and I am sorry for slow understanding.

I hope there is a solution