Friday, April 25, 2008

mouseEnabled vs mouseChildren

The more I learn about AS3 the more I enjoy it... however, figuring out all the little insider tricks can be aggravating.

My current struggle has been with the mouse enabled feature. Basically if you click on the screen, Flash will register the click with the top layer regardless if that top layer is being used or not. My current application contains many gradients, masks, and transparent layers and since it was not my design I sometimes do not even realize they are there. I may have a button that I can see plain as day (who came up with that quote? and better yet, who still uses it?). But I can not click on this button because of some masked/transparent evil movieclip that is on top of the button. So I dig through the layers and try to find this evil movieclip that was created to cause me misery and I set its mouseEnabled to false... which basically means the mouse ignores this layer and checks the next layer. You'd think that would solve it, and in some cases it does.

However, there is a catch. What if this evil layer is so clever that it had another invisible evil layer hidden within it as a child. Well shat... My first reaction was to dig through each child and set the mouseEnabled to false. However, Flash comes to the rescue with mouseChildren. Basically if you set mouseChildren to false then Flash will ignore the mouse clicks of all the children of that Movieclip.

Even with all this grief I do have to admit I prefer this setup over having movieclips being accidentally clicked in the background (which occurred frequently in previous versions of flash).

16 comments:

Johan said...

Thanks for an interesting article. But there is one thing I still kept wondering - why not use mouseChildren all the time? If you deactivate clickability on a MovieClip, 99.9% of the time you would want to disable clickability for any element inside that mc.

Ickydime said...

You are probably right. I've been using mouseEnabled when the item does not have children and using mouseChildren when it does. But honestly I do not know if there is any optimization boost for doing this. It just seemed like a good practice, but could be completely unnecessary.

Wojtek said...

Just as an extra note, it looks like you have to use both mouseEnabled and mouseChildren when you don't want the movie clip OR its children to catch mouse events.

James Docherty said...

Thanks for the pointer Mark. Really helped me get around a snagette I had with a project...thanks for sharing!
Cheers,
James

gbdesigner said...

Thanks for the info. In regards as to why sometimes you'd want to have a movieclip mouse disabled but have its children active is if say you had a movieclip that you wanted to drag around, and then when locked in to place, have movieclips inside have mouse events. I recently needed that functionality to build an interactive map of a facility with icons inside of the draggable movieclip that needed rollover effects (to show info or animate), while making sure that if clicked on, the whole map wouldn't drag.

Anonymous said...

thanks for the post, it really helped me out disabling mouse over a movieclip (containing static text), which interfered the mouse-over on a button


thanks!

NeRV said...

Thank you very much !

Prabin Shrestha said...

Thanks a lot. You saved my life.

Anonymous said...

Thank You very much! You just saved my life!

Anonymous said...

I have an accordian, and i put a movieclip mask on top of it. Then set mouseEnabled and mouseChildren to false. Unfortunately still doesn't work.

Any ideas how to have the mask for the accordian?

thanks,

Ickydime said...

Once a movieclip is set to a mask it should not be accepting mouse events...

Try adding a mouse click event listener on the stage and trace out the event.target, event.target.name and maybe event event.target.parent. This way you can start to tell what you are clicking on that may be covering your according.

Cheers!

Anonymous said...

thanks a lot, boys. This article saves my project! I love you! :)

Mark said...

THANK YOU!!!!
I have been struggling with this for the better part of a day.
The transition from AS2 to AS3 is tough.

ColinBrogan said...

Oooh buddy!!!! you did it!

Anonymous said...

I was just using mouseEnabled = false all this time, which can be tedious if you have a lot of nested objects. Thanks, this will save me a lot of time in the future.

Tushar said...

Thanks a lot. I had the same problem. I used both, mouseEnabled = false and mouseChildren = false. Problem solved.