Overlapping Buttons

[Lkm]

i have a vertical nav made up of Movieclips with Dynamic Textfields, pretty straight forward. Now the problem is that the movieclips slightly overlap each over because of the vertical height of the textfields, so the mouse interaction is screwed. So ive a added a hidden movieclip with a specified height that handles the mouse events, but the problem is still there as the preceding buttons textfield interferes with the interaction of the previous button.

ive tried setting setting mouseChildren, mouseEnabled but no dice, unless ive missed something.

anyone else got any ideas?

cheers.

[Swooter]

If you use buttons, draw a smaller shape on the 'hit' keyframe
If you use movieclips, draw a shape and convert it to a movieclip, then use:

myButtonMC.hitArea = myArea; // myArea is the shape you drew

[Lkm]

If you use buttons, draw a smaller shape on the 'hit' keyframe
If you use movieclips, draw a shape and convert it to a movieclip, then use:

myButtonMC.hitArea = myArea; // myArea is the shape you drew

cheers for the response, tried this but the preceding textfield still interferes with the previous movieclip/ button.

arhh. so simple but sooo annoying.

any other thoughts?

cheers.

[countersweet]

can you post a link to the swf? or attach it? or at least make a screenshot

[snickelfritz]

Here's a possible solution:
Nest a Movieclip (containing a rectangle shape) to act as the hit area for the button.

button instance name: "btn"
nested hit area movieclip instance name: "hit".
nested textfield instance name: "btnLabel"



btn.hit.buttonMode = true;
btn.btnLabel.mouseEnabled = false;
btn.hit.addEventListener(MouseEvent.CLICK, btnClick);

function btnClick(e:MouseEvent):void
{
trace(e.target.name);
}

[Lkm]

can you post a link to the swf? or attach it? or at least make a screenshot

http://i44.tinypic.com/256aiw5.png

ive attached an image to show you what going on, as you can see the textfields are white, the hitArea pink and the annoying overlap in green. So the 5px overlap is still interfering with previous button by blocking the hit area no matter what i try.

im sure there's a simple solution to this.

cheers for the responses.

[countersweet]

i'd solve this problem by registering onRelease(or Press, whatever) events inside those movie clips, not the moviecilps as menus themselves. there would be an invisible rectangle inside the menus that does not overlap anything around it handling the events

so my onpress definition would go like this
menu1.rectangle.onRelease=function(){
blah blah
}

oh? and don't ever use predefined "button" symbols

[snickelfritz]

attach the listeners to the pink object.
set the white object to mouseEnabled = false.

[Lkm]

attach the listeners to the pink object.
set the white object to mouseEnabled = false.

yeah thats what you'd think would work, but it only works for that button not overlapping buttons.

ive attached a demo with src code. see what you think.

its got me bamboozled.

[countersweet]

wow i dunno why is this happening. the only thing that comes to my mind is to loading buttons with text first and then hitAreas after that, by the y coordinate of the buttons (in your main class).

it is a lame workaround but that way it will be on top for sure=S

actionscript 2 for the win =P it would work there

[snickelfritz]

It's not an AS3 issue; it's a construction issue.
(AS3 is, if anything, more flexible than AS2 for stuff like this)

[snickelfritz]

I just looked at your demo, and the buttons seem to work correctly.(?)

[countersweet]

no, they overlap and cover each other

anyways, yeah? watch this, done it as2, took less than 5 minutes. works perfectly
as flexible as it can be, placeable anywhere and i did not need to create 2 god damn additional classes for it

i personally always loved how freestyle and flexible can actionscript be, placing no limits upon developer. actionscript 3 just simply ruins everything

[Lkm]

no, they overlap and cover each other

anyways, yeah? watch this, done it as2, took less than 5 minutes. works perfectly
as flexible as it can be, placeable anywhere and i did not need to create 2 god damn additional classes for it

i personally always loved how freestyle and flexible can actionscript be, placing no limits upon developer. actionscript 3 just simply ruins everything

thanks but it has to be AS3.

[countersweet]

no i understand it, i was just telling to snickelfritz (http://www.kirupa.com/forum/member.php?u=102867).

for that in cs3 i suggested this
wow i dunno why is this happening. the only thing that comes to my mind is to loading buttons with text first and then hitAreas after that, by the y coordinate of the buttons (in your main class).

it is a lame workaround but that way it will be on top for sure=S

[Lkm]

wow i dunno why is this happening. the only thing that comes to my mind is to loading buttons with text first and then hitAreas after that, by the y coordinate of the buttons (in your main class).

it is a lame workaround but that way it will be on top for sure=S

yeah i was thinking abt this, pretty annoying as the menu expands/contracts to reveal sub menu items. i guess its just another thing to track, move, listen to.

it is such a lame workaround.

[snickelfritz]

Loading invisible hit areas on top seems like a good solution.
You could also try nesting a mask (for the textfield) within the button to set the hit area.
Any part of the textfield that extends beyond the mask will be ignored.
I tested this and it works.

[Lkm]

You could also try nesting a mask (for the textfield) within the button to set the hit area.
Any part of the textfield that extends beyond the mask will be ignored.
I tested this and it works.

PERFECT!!!

just tested and its spot on.

much appreciated.