Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
SyntaxMind

active link

Recommended Posts

I am working on a site and I have this navigation that when hovered will raise its height, but once I mouse out the height does not stay. Does anyone have any tips on how I could work this into what I have so far?

 

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;

	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;

		aboutBtn.buttonMode = true;
		portfolioBtn.buttonMode = true;
		contactBtn.buttonMode = true;

		// 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
	{
		TweenMax.to(e.target, 1, {y:720, ease:Back.easeOut});
	}

	private function onOutHandler(e:MouseEvent):void
	{
		TweenMax.to(e.target, 1, {y:737, ease:Back.easeOut});
	}

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

		targetSection = e.target.ID;

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

	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,

 

Maybe I'm not understanding you correctly but you have 2 functions, one when you mouse over, the other when you mouse out:

 

      private function onOverHandler(e:MouseEvent):void
     {
        TweenMax.to(e.target, 1, {y:720, ease:Back.easeOut});
     }

     private function onOutHandler(e:MouseEvent):void
     {
        TweenMax.to(e.target, 1, {y:737, ease:Back.easeOut});
     }

 

If you want the menu item that you are hovering over to not go down again when you hover away from it you simply have to remove "MouseEvent.ROLL_OUT, onOutHandler" for all your menu items.

 

Is this what you're asking?

Presumeably however, if you then were to mouse over any other button, you would want the previously 'raised' button to go down?

This would involve a bit more code to do correctly.

 

Have I understood you correctly?

 

X10

Link to comment
Share on other sites

No sorry I didn't explain that properly. I'm looking for the sticky nav effect Carl used in snorkle.tv. I tried to incorporate his currentNav and navItem variables but for some reason Im getting undefined and null traces. He doesn't use the ID property like I am using here so I'm wondering if anyone can see how I would stick what I have.

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.
×