Movieclip wont do roll out animation properly

[danne_7454]

Im making a movieclip as a navigation button on my html5 canvas. I want a simple roll in and roll out animation. What i noticed is the animation wont roll out from the button. I have asked chatgpt everything how to make only a specific area of a movieclip interact nothing works. Also the movieclip is glitchy sometimes even when the mouse is completely out from the movieclip it still holds on hover. I have tried so many codes and everything. How can i make it work smoothly and make several buttons in the same movieclip do the same roll in roll out animation you see in the video i attached.
This is the code for me movieclip right now: 

let currentState = "idle"; // Can be "idle", "hovering", "hoveringOut"

this.navi1.stop();

this.navi1.addEventListener("mouseover", function () {
if (currentState !== "hovering") {
currentState = "hovering";
this.navi1.gotoAndPlay("hoverIn");
}
}.bind(this));

this.navi1.addEventListener("mouseout", function () {
if (currentState !== "hoveringOut") {
currentState = "hoveringOut";
this.navi1.gotoAndPlay("hoverOut");
}
}.bind(this));

[kglad · Accepted solution]

add

stage.enableMouseOver(10);

[danne_7454]

Thank you so much this really helped. But is there anyway to make it hover out inside the movieclip. Right now it hovers out but only when the mouse is outside the movieclip is there any way to make it hover out earlier?

[kglad]

like when?

[danne_7454]

When the mouse cursor is on the fent reactor button i want the memes button to roll back to its idle state

[kglad]

assign the mouse out to fent and remove from the current.

[danne_7454]

Code please?

[kglad]

stage.enableMouseOver(10);

let currentState = "idle"; // Can be "idle", "hovering", "hoveringOut"

this.navi1.stop();

this.navi1.addEventListener("mouseover", function () {
if (currentState !== "hovering") {
currentState = "hovering";
this.navi1.gotoAndPlay("hoverIn");
}
}.bind(this));

this.fent.addEventListener("mouseout", function () {  // or this.navi1.kent if kent is a child of navi1
if (currentState !== "hoveringOut") {
currentState = "hoveringOut";
this.navi1.gotoAndPlay("hoverOut");
}
}.bind(this));

[danne_7454]

Should fent have some kind of instance name or anything like that? Remember this is not a regular button its a movieclip that will change shapes depending on where the mouse cursor is

[danne_7454]

The code you sent me caused my canvas to crash and its blank when it test it in browser

[kglad]

of course fent needs to have an instance name.  you can't reference anything with code (by name) unless it's named.

[danne_7454]

Hello kglad. I have tried this and i got issues. 

}.bind(this));

this.fent.addEventListener("mouseout", function () {  // or this.navi1.kent if kent is a child of navi1
if (currentState !== "hoveringOut") {
currentState = "hoveringOut";
this.navi1.gotoAndPlay("hoverOut");
}
}.bind(this));
This didn't work but could it be because navi1 and fent have the same hoverin and hoverout? Should i renamed them hoverin2 and hoverout2? instead?

[danne_7454]

Also i must add that adding the fent caused my whole html5 canvas to break.

[kglad]

are you seeing error messages in the console?

[danne_7454]

Uncaught ReferenceError: AdobeAn is not defined
at init (rawsourcescybertronic.html?26831:24:11)
at onload (rawsourcescybertronic.html?26831:101:44)
Yes these are the errors.

[danne_7454]

Forgot to add: Uncaught SyntaxError: Unexpected token ')'

[kglad]

what line of code had the unexpected token?

[danne_7454]

That canvas is gone now but there's barely any difference
Uncaught SyntaxError: Unexpected token ':'
Now i got this error and it breaks the html5 too. Whenver i attach any code to the fent my website breaks. The fent code you sent me was placed on the maintimeline not inside the navi1 movieclip. 

[kglad]

what are the current errors?

[JoãoCésar]

Hi.

I think it's easier to use a Button symbol because you don't have to code the hover interaction.

Here is an exmple of how to achieve this behavior in a very simple way, by smartly structuring the buttons and only using a couple of stops.
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/simple_hover_interaction

Regards,
JC

[danne_7454]

The thing is i want to make my buttons smoothly change when i hover them. Im trying to make one movieclip play certain keyframes inside of the movieclip when the mouse interacts with one of the buttons. Is this hard to achieve?

[kglad]

read my post

[JoãoCésar]

The buttons smoothly change in the sample provided.

Although it's a Button symbol, there's a MovieClip instance containing an animation in each state (up and over).

[danne_7454]

My issue was fixed btw i dont know what happened but the animation started working fine. Now i have a new another problem

[kglad]

one down.  that's how you debug.