Jump to content
Search Community

Sticky Nav

SyntaxMind test
Moderator Tag

Recommended Posts

This was intended for Carl but if anyone else can assist, please advise.

 

I am trying to combine Carl Schooff's stick nav with his TimelineMax addLabel tutorials seen here - http://www.snorkl.tv/2010/11/create-a-s ... y-clicked/. I have three movieclips on the screen. There are no nested movieclip symbols inside. With the script below, I was able to get an active sticky from the buttons, but without proper traces to "navItem" or "currentNav". I am guessing the over, out, and click tweens alone are causing this to work. But overall I want to have the button start with a stick to label which page I am on from the start. Carl gave me a fix but unless I understand why the navItem/currentNav traces aren't working, I dont think I can get my plan to work. Any suggestions?

 

 

package 
{

  import flash.display.MovieClip;
  import flash.events.Event;
  import flash.events.MouseEvent;

  import com.greensock.TweenMax;
  import com.greensock.TimelineMax;
  import com.greensock.easing.Back;

  public class Main extends MovieClip
  {
     public var tl:TimelineMax;

     // stage instances
     public var logo:MovieClip;
     public var aboutBtn:MovieClip;
     public var portfolioBtn:MovieClip;
     public var contactBtn:MovieClip;
  public var currentNav:MovieClip;

     private var targetSection:String;
     private var currentSection:String = "portfolio";

     public function Main()
     {
        if (stage)
        {
           init();
           trace( "stage" )
        } else
        {
           trace( "listener added" );
           addEventListener(Event.ADDED_TO_STAGE, init);
        }
     }

     private function init()
     {
        removeEventListener(Event.ADDED_TO_STAGE, init);
        navigation();
        timeline();
     }

     private function timeline():void
     {
        tl = new TimelineMax( {} );

        contactTxt.alpha = aboutTxt.alpha = 0;
        box.alpha = 0;


        // portfolio section
        tl.addLabel("portfolio", tl.duration);
        tl.append( TweenMax.to(box, 1, {autoAlpha:1, onComplete:tl.pause}) );
        tl.append( TweenMax.to(box, .5, {autoAlpha:0}) );

        // about section
        tl.addLabel("about", tl.duration);
        tl.append( TweenMax.to(aboutTxt, 1, {autoAlpha:1, onComplete:tl.pause}) );
        tl.append( TweenMax.to(aboutTxt, .5, {autoAlpha:0}) );

        // contact section
        tl.addLabel("contact", tl.duration);
        tl.append( TweenMax.to(contactTxt, 1, {autoAlpha:1, onComplete:tl.pause}) );
        tl.append( TweenMax.to(contactTxt, .5, {autoAlpha:0}) );
     }

     private function onOverHandler(e:MouseEvent):void
     {
	 // button IDs
        aboutBtn.ID  = "about";
        portfolioBtn.ID  = "portfolio";
        contactBtn.ID = "contact";

	 portfolioBtn.mouseChildren = false;
	 aboutBtn.mouseChildren = false;
	 contactBtn.mouseChildren = false;

	 var navItem:MovieClip = e.target as MovieClip;
	 trace(navItem);
	 if (navItem != currentNav)
	 {
       	 TweenMax.to(navItem, 1, {x:841, ease:Back.easeOut});
	 }
     }

     private function onOutHandler(e:MouseEvent):void
     {
	 // button IDs
        aboutBtn.ID  = "about";
        portfolioBtn.ID  = "portfolio";
        contactBtn.ID = "contact";

	 portfolioBtn.mouseChildren = false;
	 aboutBtn.mouseChildren = false;
	 contactBtn.mouseChildren = false;

	 var navItem:MovieClip = e.target as MovieClip;
	 trace(navItem);
	 if (navItem != currentNav)
     { 
        	TweenMax.to(navItem, 1, {x:873, ease:Back.easeOut});
	 }
     }

     private function onClickHandler(e:MouseEvent):void
     { 

  // button IDs
        aboutBtn.ID  = "about";
        portfolioBtn.ID  = "portfolio";
        contactBtn.ID = "contact";

	 portfolioBtn.mouseChildren = false;
	 aboutBtn.mouseChildren = false;
	 contactBtn.mouseChildren = false;

        targetSection = e.target.ID;
	 var navItem:MovieClip = e.target as MovieClip;
	 trace(currentNav);

        if (targetSection != currentSection)
        {
           tl.gotoAndPlay( e.target.ID );
           currentSection = targetSection;
        }

	 if (currentNav != null) 
	 {
		 TweenMax.to( currentNav, 1, {x:873});
	 }
	 	 TweenMax.to( navItem, 1, {x:841});

	 currentNav = navItem;
     }

     private function navigation():void
     {
        aboutBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler);
        aboutBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler);
        aboutBtn.addEventListener(MouseEvent.CLICK, onClickHandler);
        portfolioBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler);
        portfolioBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler);
        portfolioBtn.addEventListener(MouseEvent.CLICK, onClickHandler);
        contactBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler);
        contactBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler);
        contactBtn.addEventListener(MouseEvent.CLICK, onClickHandler);
     }
  }

}

Link to comment
Share on other sites

hi syntaxmind.

 

thanks for posting here. its much easier to read the code.

it looks like you have things pretty solid.

 

if you post your files and I'm sure I can pretty easily hunt down why the traces aren't working.

 

if you don't want to post your files publicly. you can click on my username and send me a private message.

 

I should be able to look at them later tonight

 

carl

Link to comment
Share on other sites

checkout the attached Main.as.

 

it is set so that the timeline starst at "contact" and the contactBtn is activated.

 

setTargetSection("contact");

 

you can do setTargetSection("portfolio") or whatever you want.

 

in the future please label your layers and use text that has some meaning. there was no way of me knowing what text belonged to each section without hunting through your fla. makes troubleshooting difficult.

 

thanks

 

Carl

Link to comment
Share on other sites

Thanks. Sorry about the text. This project wasn't meant for the text to say anything. All of the elements are just dummy elements so that I can add the fla and .as files in this thread instead of using real work. Looks like this needed something different than what was explained in snorkl but I'm glad you found it. Thanks for the helps.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...