Trying to make a navbar with an addChild element

[databell]

I'm creating a simple AS3 based navigation bar that has a child that comes up when you rollover the Portfolio button. Problem is rolling out. See if you mouse out of the button you lose the child. Now you should but only when you're out of the area of both the button and the child. Not just the button. Like most navbars you see on websites. How can I achieve this using AS3?

[jweeks123]

Well I can't get your fla to open but taking a shot in the dark here I'd say that your roll_out event is on the button in question when in reality it should be placed upon the nav bar clip itself.

Hope this helps.

[databell]

My bad. I uploaded a corrupt file. Here's the correct one.

Tried jweeks123's method but it only came back with an error.

[jweeks123]

replace your portfolio mouse out function with this:

function popped(event:MouseEvent) {
	if((mouseX<popup.x || mouseX>popup.x + popup.width) || (mouseY<popup.y || mouseY>popup.y + popup.height + (portfolio.y + portfolio.height) )) {
		removeChild(popup);
	} else {
		addEventListener(Event.ENTER_FRAME, checkMouse);
	}
}
function checkMouse(evt:Event):void {
	if((mouseX<popup.x || mouseX>popup.x + popup.width) || (mouseY<popup.y || mouseY>popup.y + popup.height + (portfolio.y + portfolio.height) )) {
		removeEventListener(Event.ENTER_FRAME, checkMouse);
		removeChild(popup);
	}
}

That should do it.

Let me know if this helps.

[databell]

Yep, that worked. Thanks so much.

[jweeks123]

No Problem, happy to help.

[databell]

jweeks, found one problem with the script. Yes, if you roll to the left or right of the button or the popup, it disappears. However when you move below the Portfolio button, the popup stays on the screen. I know there isn't a lot of real estate beneath the button but it's there and I tried moving the Portfolio button up about 50 pixels and the popup still doesn't disappear if you roll away from the Portfolio button if you do it beneath the button. How do I solve this?

[jweeks123]

Could you send me the fla with the new script in it? I'll take a look at it, and we'll go from there. Sorry for the mistake though.

[databell]

Sure. No problem. Here you go.

[jweeks123]

Okay, sorry about the problem, my bad.

Anyway, just replace your code with this:

import gs.TweenLite;
import flash.events.Event;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.display.MovieClip;

home.addEventListener(MouseEvent.CLICK,homeLink);
function homeLink(evt:MouseEvent) {
	navigateToURL(new URLRequest("http://www.yoursite.com/"), '_self');
}

aboutUs.addEventListener(MouseEvent.CLICK,aboutLink);
function aboutLink(evt:MouseEvent) {
	navigateToURL(new URLRequest("http://www.yoursite.com/about/"), '_self');
}

portfolio.addEventListener(MouseEvent.CLICK,portfolioLink);
function portfolioLink(evt:MouseEvent) {
	navigateToURL(new URLRequest("http://www.yoursite.com/portfolio/packaging.html"), '_self');
}

contact.addEventListener(MouseEvent.CLICK,contactLink);
function contactLink(evt:MouseEvent) {
	navigateToURL(new URLRequest("http://www.yoursite.com/contact/"), '_self');
}

var popup:MovieClip = new popup1();
var eventGoing:Boolean = false;
portfolio.addEventListener(MouseEvent.MOUSE_OVER, popp);

function popp(event:MouseEvent) {
	if (popup.parent == null) {
		addChild(popup);
		popup.x = 228;
		popup.y = 0;
	}
}

popup.packaging.addEventListener(MouseEvent.CLICK,packagingLink);
function packagingLink(evt:MouseEvent) {
	navigateToURL(new URLRequest("http://www.yoursite.com/portfolio/packaging.html"), '_self');
}

popup.promotion.addEventListener(MouseEvent.CLICK,promotionLink);
function promotionLink(evt:MouseEvent) {
	navigateToURL(new URLRequest("http://www.yoursite.com/portfolio/promotion.html"), '_self');
}

popup.identity.addEventListener(MouseEvent.CLICK,identityLink);
function identityLink(evt:MouseEvent) {
	navigateToURL(new URLRequest("http://www.yoursite.com/portfolio/identity.html"), '_self');
}

portfolio.addEventListener(MouseEvent.MOUSE_OUT, popped);

function popped(event:MouseEvent) {
	if ((mouseX<popup.x) || (mouseX>popup.x + popup.width) || (mouseY<popup.y) || (mouseY>popup.y + popup.height + (portfolio.height) )) {
		removeChild(popup);
	} else {
		if (! eventGoing) {
			eventGoing = true;
			stage.addEventListener(Event.MOUSE_LEAVE, checkMouseGone);
			addEventListener(Event.ENTER_FRAME, checkMouse);
		}
	}
}
function checkMouse(evt:Event):void {
	if ((mouseX<popup.x) || (mouseX>popup.x + popup.width) || (mouseY<popup.y) || (mouseY>popup.y + popup.height + (portfolio.height) )) {
		eventGoing = false;
		stage.removeEventListener(Event.MOUSE_LEAVE, checkMouseGone);
		removeEventListener(Event.ENTER_FRAME, checkMouse);
		removeChild(popup);
	}
}
function checkMouseGone(evt:Event):void {
	eventGoing = false;
	stage.removeEventListener(Event.MOUSE_LEAVE, checkMouseGone);
	removeEventListener(Event.ENTER_FRAME, checkMouse);
	removeChild(popup);
}

and you should be good to go.

Hope this helps.