Mouse over event keeps triggering (Canvas)

[Josh70138843]

I'm trying to create a movie clip which plays an animation on mouse over, then animates to the original state on mouse off. Basically this Original Hover Effects with CSS3.

I've created a movie clip called "button01_mc" which from fame 1 to 10 animates in, then from frame 10 to 20 animates out. Frame 1's labeled as "Over" and frame 10 is labeled as "Out". They both have the action "this.stop();".

My code on the main timeline is:

stage.enableMouseOver(3);

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

this.button01_mc.addEventListener('mouseout',outF.bind(this));

function over(e){

this.button01_mc.gotoAndPlay('Over');

}

function out(e){

this.button01_mc.gotoAndPlay('Off');

}

It's work, playing the Over and Out animations when triggered, but if the mouse is on the object and I move the mouse to a different part of the object, it plays the animation again. So every time the mouse overs it triggers the Over animation. How can I stop that happening? I tried setting "stage.enableMouseOver(3);" to "stage.enableMouseOver(1);", but then nothing happens at all when I mouse over it.

Thanks.

[JoãoCésar]

Set this.button01_mc.mouseChidren = false.

[Josh70138843]

Thanks for your answer but now it's triggering the "Out" animation when I move the mouse.

[JoãoCésar · Accepted solution]

Maybe you will have to set a child to be your hitArea.

Anyway, here is a working example: animate_cc_html5_mouse_over.

I hope it helps.

[Josh70138843]

Thanks a lot. Your exampled really helped. I've managed to get mine working by replicating yours. Still can't figure out why mine kept triggering but I'll go through it a few more times to see if I can figure it out.

[Josh70138843]

Do you know a good place where I can learn how to used JavaScript with Animate? Most of the Animate CC tutorials I've found are to do with animation, and the JavaScript tutorials aren't related to Animate, even on Lynda.com.

[JoãoCésar]

- Here are some official links:

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

Adobe Animate CC Developer Center

Create HTML5 Canvas documents in Animate CC

- Make sure to check out all the code snippets (Window > Code Snippets) related to HTML5.

- You can also use as a reference the template that comes with Animate called "Sample Puzzle Game" under File > New > Templates > HTML5 Canvas.

- The youtuber Martin Melendez - YouTube has excellent videos using Animate CC and HTML5. He uses some pretty basic to advance stuff and his games have really cool artworks and animations. The only "problem" is that he speaks spanish, but event for people of other languages I think it is a good idea to take a look at his videos.

- Another thing I do is to use console.log(object) to see all properties and methods of a specific object. So if you are not sure of all stuff that belongs to a Movie Clip or Button, try this.

Besides all of this, I'll start a series of tutorials showing how to create apps and games in Animate using AS3 and HTML5, so wish me luck!

Regards,

JC

[Josh70138843]

Thanks a lot. Send me a link to your channel when it get it started. You'll have one subscriber straight away.

[JoãoCésar]

This is nice!

I bookmarked this thread and I'll let you know as soon as I start. Thanks!