Skip to main content
N
NotALamer
Known Participant
May 19, 2006
Question

Overlapping Buttons

  • May 19, 2006
  • 6 replies
  • 524 views
Is there any way to get flash to fire button events for a button that is underneath something else? I have a popup menu and right now I have some invisible buttons around it to detect when a user moves off of the menu and it should be closed. The menu is in the corner of my movie so the invisible buttons only work well on two sides of the menu, the other two sides I can move my mouse out of the flash player and the menu will stay up. I'd like to fix this by putting an invisible button over top of the menu and just detecting when the mouse leaves it. I got this to work quite well except the buttons in the popup menu are no longer clickable and don't have a rollover effect because they are beneath the invisible button and no rollOver or any other events will fire for them. If if put the layer with the invisible button below the layer with the real buttons, events no longer fire for the invisible button and the menu never closes. Any suggestions?
This topic has been closed for replies.

6 replies

N
NotALamerAuthor
Known Participant
May 22, 2006
Thanks I'll check it out.
N
NotALamerAuthor
Known Participant
May 22, 2006
Thanks I'll try that when I've got some more time to work on this. Any idea if the rollOver and rollOut will still fire if the MC is totally covered by the buttons, or do I need a 1px space around the edge or something like that?
B
blemmo
Inspiring
May 22, 2006
No, it won't work if the MC is totally covered. When something is between mouse and MC, it's as if the mouse is outside the MC. That's the reason it fires onRollOut when the mouse is over a button that is above the MC. So you would need a little border around the buttons to make that work.

On the other hand: buttons also have onRollOver and onRollOut events, iirc. So when the area is totally covered by buttons, it should be possible to use the events of the buttons on the sides to detect the rollOut. As the event will also fire when the mouse is rolled off the buttons towards the inside of the MC, this would also involve some position checking inside onRollOut, but this way may be safer than an only 1 or 2 px wide border of the MC (you could probably pass this area with a fast mouse move).

Here's a good tutorial on events for nested objects: http://www.senocular.com/flash/tutorials/buttoncapturing/
On a quick look, it doesn't offer some simpler solution for the problem here, but is a good read anyway. Maybe you see something to use here...

greets,
blemmo
N
NotALamerAuthor
Known Participant
May 22, 2006
Still looking for a good way to do this, I looked around a bit but didn't find anything too helpful. It seems like the easiest way to deal with the menu being at the edge of the player would be to just detect when the mouse leaves the player, but I haven't found a way to do it.
B
blemmo
Inspiring
May 22, 2006
I also think that using the rollOut event of the menu MC should be the best way. Too bad that it steals the events from the buttons... A workaround could be to insert an MC of the size of the menu into the menu MC, behind the buttons, and assign the rollOut event to this MC. The buttons should work that way, and the rollOut event is also there. Just one issue with that: the rollOut event also occurs, when the mouse is moved over a button, so you would have to check inside the event if the mouse is really outside the menu (e.g. checking the mouse pos, like described in my former post). Then it should be what you wanted.
I think this way (rollOut of an MC) is the only way to check if the mouse is somewhere, there's no event for leaving the player.

greets,
blemmo
N
NotALamerAuthor
Known Participant
May 19, 2006
I got the onMouseMove method to work but it's really not any better than the invisible buttons. Since the popup is in the corner of the movie it is very easy to move the mouse out of the flash player without it firing an onMouseMove event and closing the popup. The best way I've found so far is putting some onRollover and onRollout event handlers on the menu MC itself, but as soon as I add the event handlers the buttons in the MC stop responding. About all I can think of at this point is adding those event handlers and then adding an onMouseMove handler to detect the mouse position for rollovers and clicks, but this seems overly complicated. There has to be a good way to do this, is there an event that fires when the mouse leaves the player by any chance?
N
NotALamerAuthor
Known Participant
May 19, 2006
The menu is actually an MC already, right now there is an event handler set on a button in the MC that opens the popup. If I set event handlers on the menu MC itself, the buttons and MCs inside it stop responding, it's really irritating. I think I'm going to see if I can get the second method to work, it seems like it could be CPU intensive having an event handler on mouseMove though.
B
blemmo
Inspiring
May 19, 2006
Movieclips also have rollOver and rollOut events, so you could use MCs instead of the invisible buttons. Or, even simpler, make the popup menu an MC (if it isn't already), and use the rollOver events of that MC to check if the mouse is in the area:
menu.onRollOut = function(){
// hide menu
}

Another way: use hitTest or a custom function that checks if the mouse is inside the coordinates of the menu. Something like
onMouseMove = function(){
if(_xmouse < menu._x || _xmouse > menu._x+menu._width || _ymouse < menu._y || _ymouse > menu._y+menu._width){
// mouse outside, hide menu
}

hth,
blemmo
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices