Mouse Out not working in Muse

[bo_spasic]

Hi, I created a simple button in Animate CC and wanted to use it in Muse. All works fine when previewing in Animate or web browser but when placed in Muse and exported the MouseOut simply do not work (the MouseOver does it job though, it just gets blocked once the mouse leaves the button)

Thanks in advance for any help

Bo

[Margo Lunsford]

Hey just wanted to let know I got some kind of answer for this:

.oam button breaks when brought into Muse

[Colin Holgate]

It doesn't read a lot like an answer! What is the simplest example you can give that would show the problem?

I tried this script:

this.btn.addEventListener("mouseout",out);

this.btn.addEventListener("click",clicked);

stop();

function out(){

  alert("out");

}

function clicked(){

  alert("clicked");

}

Both the click and the mouseout responded, in Animate and in Muse.

[Margo Lunsford]

I know right lol! The "mouseout" script seems to be ignored and Im not sure how to fix it. Adobe encourages users to create buttons and animations in AnimateCC since they have officially discontinued Edge Animate.

[Colin Holgate]

Edge Animate was perhaps a good fit with Muse in that you more normally do responsive designs in both. Adobe Animate for HTML5 is usually a fixed size canvas document. You can make it responsive in terms of with and height, but the moment would stay the same layout.

If you test my script and it doesn't work for you, let me know what your HTML publish settings are. Or if you can post an FLA online that I can try.

[Margo Lunsford]

I couldn't get your code to work

Here is the .fla file.

1_homebtn.fla - Google Drive

Thank you in advance!

[Colin Holgate · Accepted solution]

I figured it out. Your button is the size of the stage, and so by the time your mouseout would happen the cursor is already outside of the stage. Making the stage a bit bigger made it still work in Muse.

If it needs to be that way for some reason, look at the stage.mouseleave event to see if that would be another way to handle it:

EaselJS v0.8.2 API Documentation : Stage 

[Margo Lunsford]

omg thank you that worked like a charm!!!!!

[Colin Holgate]

I'm curious, did you make the stage bigger, or use the stage.leave event?

[jorges51234339]

this work for me.

this.stop();

var anim = this;

this.movieClip_2.addEventListener("click", fl_ClickToGoToWebPage_2);

function fl_ClickToGoToWebPage_2() {

    window.open("http://www.google.com.ar", "_blank");

}

/////////////////////////////////////////////

stage.enableMouseOver();

canvas.addEventListener ('mouseover', over.bind (this));

function over(){

anim.gotoAndPlay (16);

}

document.addEventListener ("mouseout", out.bind (this));

function out(){

anim.gotoAndPlay (21);

}