Mouseover animation with JavaScript

[arturs73452037]

Hey! Thank you for getting here. I'm trying to do mouseover animation in Animate CC without any background in JS. An hour spent for experimenting with code snippets predictably have resulted in nothing. Though it was much easier for me in Adobe Edge Animate. Please give me some guides, how to do that in Animate CC? Thank you!

[kglad]

you need something with an alpha of 1% or greater and you need to use something like:

stage.enableMouseOver(20);

[Colin Holgate · Accepted solution]

If each animation is a movieclip, put this into the first frame and the last frame of each of the movieclips:

this.stop();

In the main timeline, where the four movieclips are, put this script ('mcname' is the name you gave one of the movieclips in the Properties panel):

stage.enableMouseOver(4);

this.mcname.addEventListener("mouseover", playmc);

this.mcname.addEventListener("mouseout", playmc);

function playmc(e) {

  e.currentTarget.play();

}

Duplicate the two addEventListener lines for each of the other three movieclips, changing the 'mcname' part to be the right name.

As it stands the animation would play when you point the mouse at it, and when you move away it would play again but be stopped on frame 1. You could put a second copy of the animation in the timeline, and reverse the frames. With a this.stop() on the first frame, and on the last frame of the first animation, when you point at the movieclip it would play the normal animation and stop, and when you point away it would play the reversed copy of the animation, stopping back on the first frame.

[arturs73452037]

Thank you Colin! One question, if the main timeline is where the four movieclips are, then where should I put this snippet - this.stop();? Is it goes in actions for every layer inside of a movieclip symbol?

[Colin Holgate]

Inside the movieclip you have some layers that are the graphics animating. Make another layer, select frame 1 of that layer, and type in this.stop(); into the Actions panel.

Select the last frame of the animation in that same layer, and make it be a keyframe (F6 key will do that). In the Actions panel type this.stop(); again.

Do that for each of the movieclips.

[arturs73452037]

Ok, now seems like I'm on the right way, thanks to you! The animation works fine for the first couple of times but then it just swaps the ends of it somehow. Do you think there's any solution to this? Thank you!

[andyr15145041]

The code Colin provided was spot on for what I spent hours experimenting trying to create on my own and searching for:

stage.enableMouseOver(4);

this.mcname.addEventListener("mouseover", playmc);

this.mcname.addEventListener("mouseout", playmc);

function playmc(e) {

  e.currentTarget.play();

}

Whew. Thank you!

[arturs73452037]

Do you think it somehow applicable to my thing?

[andyr15145041]

@arturs73452037

I think you're experiencing what I am. If you move your cursor off the button too fast (ie: when it's still acting upon the mouse over), it doesn't trigger the mouse out event. Thus, your position in the animation timeline is not where you want it to be when you move over again.

[arturs73452037]

So, is there any way to fix that?