A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: Trying to make a navbar with an addChild element

  1. #1
    Senior Member
    Join Date
    Jul 2000
    Posts
    373

    Trying to make a navbar with an addChild element

    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?
    Last edited by databell; 07-22-2010 at 02:11 PM.
    Adam Bell
    dzign@datatv.com
    --
    Over 90% of all websites
    suck......
    Join the minority.

  2. #2
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    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.

  3. #3
    Senior Member
    Join Date
    Jul 2000
    Posts
    373
    My bad. I uploaded a corrupt file. Here's the correct one.

    Tried jweeks123's method but it only came back with an error.
    Last edited by databell; 07-22-2010 at 02:11 PM.
    Adam Bell
    dzign@datatv.com
    --
    Over 90% of all websites
    suck......
    Join the minority.

  4. #4
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    replace your portfolio mouse out function with this:

    Code:
    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.

  5. #5
    Senior Member
    Join Date
    Jul 2000
    Posts
    373
    Yep, that worked. Thanks so much.
    Adam Bell
    dzign@datatv.com
    --
    Over 90% of all websites
    suck......
    Join the minority.

  6. #6
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    No Problem, happy to help.

  7. #7
    Senior Member
    Join Date
    Jul 2000
    Posts
    373
    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?
    Adam Bell
    dzign@datatv.com
    --
    Over 90% of all websites
    suck......
    Join the minority.

  8. #8
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    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.

  9. #9
    Senior Member
    Join Date
    Jul 2000
    Posts
    373
    Sure. No problem. Here you go.
    Last edited by databell; 07-22-2010 at 02:11 PM.
    Adam Bell
    dzign@datatv.com
    --
    Over 90% of all websites
    suck......
    Join the minority.

  10. #10
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Okay, sorry about the problem, my bad.

    Anyway, just replace your code with this:

    Code:
    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center