How to make an invisible top layer clickable (HTML5 Canvas)

[StuntmanF]

Hi guys. What is the best way to make a top layer invisible but still accessible for mouse events in Animate CC for HTML5 canvas?

When I set alpha to 0% the layer is not available for any events. So my workaround is to set the top layer to alpha 1%, but that does not seem like a really clean solution. Can you please advise if there is a better way to do this? Thanks a lot!

I would like to use the top layer for various events simultaneously like click to go to URL, mouse-over to unmute video, mouse-out to mute video etc.!

[kglad]

i recall having to do the same.

p.s. if you find the 1% alpha unacceptable design-wise, you can create a parent movieclip, add your 1% alpha movieclip to that parent and assign an alpha of 0 to the child and your click will still work on the parent that is totally transparent.

[ClayUUID · Accepted solution]

The actual, non-hackish way to do this is to create your cover clip as a Button with your layer box in the Hit frame only.

[StuntmanF]

Thank you very much for your answers guys!

@kglad: I tried that. Strangely the parent clip was still not accessible for events for me.

@ClayUUID: Your solution works perfectly, thanks again!

[ClayUUID]

You're welcome. If you found that to be the correct solution to your problem, please tag the post as such.