Skip to main content
Participant
December 23, 2021
Question

HTML5 Canvas - Making a nested movie clip in a button not clickable

  • December 23, 2021
  • 1 reply
  • 192 views

Greetings -

I'm slowly returning to Animate/Flash after quite a long time (since Flash 8). With the current state of things, I'm dipping my feet into HTML5 Canvas for a simple project. I’m taking advantage of the mouse over support for buttons to enable hover effects that play a nested movie clip in the “over” frame of my button.


Not sure if it’s possible, but since the movie clip is in a button layer, it also retains its clickable attribute. This makes it so if you move your mouse off the button in an attempt to close the movie clip, and you move in the same direction with enough speed – your mouse will be over the clip and thus does not release the mouse over effect.


I am curious if there is a way to make a layer/symbol (move clip in this case) embedded within a button timeline not behave as a part of the button (i.e. not clickable).


Cheers and happy holidays 

This topic has been closed for replies.

1 reply

kglad
Community Expert
Community Expert
December 24, 2021

the best way (that i've found to prevent that failure to detect mouse out) is to use a movieclip (with "up" and "over" frames) with a hittest and a stagemousemove event:

 


stage.addEventListener("stagemousemove",moveF.bind(this));

var movieclip_to_test_for_mouseover_mouseout = this.mc;

 

function moveF(e){
var pt = movieclip_to_test_for_mouseover_mouseout.globalToLocal(stage.mouseX, stage.mouseY);
if(movieclip_to_test_for_mouseover_mouseout.hitTest(pt.x,pt.y)){
movieclip_to_test_for_mouseover_mouseout.gotoAndStop("over");
} else {
movieclip_to_test_for_mouseover_mouseout.gotoAndStop("up");
}
}