Help with animated button

[Htown Dirtbag]

Hello folks,

I received help a while back on a problem with having an animated button where the hit box grew with the animation and then shrunk on rollout. That was very very helpful and I have used that many times now. I have come across a situation where I can't figure out a way to use it because of the invisible button element.

I am attaching the file, but what I have here is this:

I have a main nav button, inside that button on a seperate layer I have an animated submenu that comes out from under it's mask during the overstate of the main nav button. I can't figure out a way to make the sub nav stay out when I roll down over it without putting the invisible button (used in the animated button before). The problem is when I use the invisible button it has to be the top layer and therefore will not allow me to have multiple buttons underneath it that point to different places. Any help with this would be greatly appreciated.

[Pporksoda]

It's an old file, but it works.

[Htown Dirtbag]

Thank you, It seems like the perfect solution I appreciate it. I will try it out at work tommorow.

[Htown Dirtbag]

Nice site you have there btw.

[Pporksoda]

thanks.

[Htown Dirtbag]

I plugged it in and things are working pretty good. The problem I now have is since my menu drops down if I set the hit setting (default of <100) to less than this the mouse will get too far away from the main button before reaching the bottom of the sub menu and the menu goes away. If I set it large enough to encompass the sub menu then the hit box for the main button is huge. Any tweak for a menu that does not originate from the center of the main button that you might know of?

[Pporksoda]

Sure. Use something like this instead:

onClipEvent (enterFrame) {
	if (_xmouse>0 and _xmouse<50 and _ymouse>0 and _ymouse<100) {
		nextFrame();
	} else {
		prevFrame();
	}
}

[Htown Dirtbag]

I am still new to action script, but it appears as though this adjusts the hit area to where it will go off when the pointer reaches a certain distance from the x coordinate of the center of the button and/or the y coordinate of the center of the button and those two can be different.

Just for my information, is there a unit of measurement for all 4 sides of a point, or only x,y coordinates? I am assuming x,y and then z for depth or layers.

thanks for all the help I appreciate you taking the time.

[Pporksoda]

the if statement checks the x and y position of the mouse (_xmouse and _ymouse) to see if the mouse is within a certain area. In the sample I sent, greater than 0 or less than 50, etc. Modify the values in the if statement to change the area that activates the animation.

It's best to put the origin or center of your movieclip in the upper left hand corner. See the sample grab I've attached and compare it to this code. I've changed the bounds to 0 to 100 for the x position of the mouse and 0 to 120 for the y position of the mouse.

onClipEvent (enterFrame) {
        if (_xmouse>0 and _xmouse<100 and _ymouse>0 and _ymouse<120) {
                nextFrame();
        } else {
                prevFrame();
}

[Pporksoda]

sorry. here's that screen grab:

[Htown Dirtbag]

I have changed the center point for every item I can, both the mc sitting in the main scene and I have gone into the mc and tried each of the elements center points. None of those effect the hit area, can you tell what it is reading as the center point? Is it hidden because it is a masked animation and the first frame center point of "Church Growth" is not the actual center point for the whole mc?

Attaching an updated .fla

[Htown Dirtbag]

Well one work around for this is to have add negative values to the math. instead of >0 I put >-50 and it seemed to change the spot.

[Pporksoda]

It's not the circle, but the + sign looking thing thats the center point. I moved everything over for you and changed the script so that it simply detects it based on the height and width of the clip. See if that works.

If not, just change the 2 numbers in the if statement from the previous stuff i posted until you find something that works. Note that you can use negative numbers as well. Like this:

onClipEvent (enterFrame) {
        if (_xmouse>-30 and _xmouse<100 and _ymouse>-50 and _ymouse<120) {
                nextFrame();
        } else {
                prevFrame();
}

[Pporksoda]

sorry. here's your file back using width and height:

[Htown Dirtbag]

I would buy you a beer if I could, thanks for all your help. I think this is going to do it. So much to learn.

[Htown Dirtbag]

Now I am just asking curiousity questions. Is there a calculation that can be put into something like this that makes the percieved height of the button grow as the sub menu comes out or is the height always determined by the mc container max size?

[Pporksoda]

Yes. using width and height will accomplish that for you, but you need to modify your animation, because the height will calculate including the mask you're using.

I made a quick change that scales out the background and fades the menu items instead.

[Htown Dirtbag]

Now that is really nice. So the calculation of width and height is based on the current frame of the animation in the mc, not the last frame or first frame of it.

[Pporksoda]

Exactly. The width and height are calculated based on the current visible frame of the movieclip. And that code will work fine.. as long as the origin (0,0) is in the upper left hand corner.

[Htown Dirtbag]

That's it, that one hit the nail on the head. I learned a ton, thanks for the help once again and I hope I didn't take too much of your time.

Ryan