Creating web navigation with basic tweening

[ariekstins]

Hello there! First of all, I`d like to say thanks to those who made this therific as3 library, which makes things so easy. Because of the wide opportunities the basic tweeining can give (i`m beginner with AS3), I started to make web navigation, but, unfortunately, I faced one problem, where I need your help..

I can`t figure out how to make that after mouse click, the animation "freezes", so it would be easier for users to indicate in which section they are.

Here you can look at my work so far - http://megaswf.com/serve/92607/

I tried to apply MouseEvent.CLICK to portfolio button, but it doesn`t freeze. I assume it`s because ROLL_OUT event, but I need it anyway.

Any suggestions?

 

Code so far..

portfolio_btn.addEventListener(MouseEvent.CLICK, pClick);

function pClick(event:MouseEvent):void{
var homeLink:URLRequest = new URLRequest("#jquery");
navigateToURL(homeLink, "_self");
TweenMax.to(portfolio_mc, 0, {scaleY:10, ease:Bounce.easeOut, tint:0x0099CC});
}

portfolio_btn.addEventListener(MouseEvent.ROLL_OVER, manageMouseOver, false, 0, true);
function manageMouseOver(event:MouseEvent):void{
TweenMax.to(portfolio_mc, 0.5, {scaleY:10, ease:Bounce.easeOut, tint:0x0099CC});
TweenMax.to(seperator_mc, 0.5, {tint:0x0099CC});
TweenMax.to(dot_mc, 0.5, {tint:0x0099CC});
}

portfolio_btn.addEventListener(MouseEvent.ROLL_OUT, manageMouseOut, false, 0, true);
function manageMouseOut(event:MouseEvent):void{
TweenLite.to(portfolio_mc, 0.5, {scaleY:0,ease:Bounce.easeOut, removeTint:true});
TweenLite.to(seperator_mc, 0.5, {removeTint:true});
TweenMax.to(dot_mc, 0.5, {removeTint:true});
}

[Carl]

in general terms you need to do the following:

 

when each button is clicked record somewhere which button has been clicked

when you roll_out of each button ask "am I the button that has most recently been clicked? if yes, than I won't play my out animation. If no, then play my out animation.

 

the same thing will apply when you roll over each button. if the button you are rolling over is the most recently clicked... then do nothing. if you are rolling over a button that isn't in its clicked/active state then it can perform its animation.

 

This principle is illustrated in this tutorial here:

http://www.snorkl.tv/2010/11/create-a-s ... y-clicked/

 

here is a sample of the code.

t

 

import com.greensock.*;

nav_mc.buttonMode=true;
nav_mc.addEventListener(MouseEvent.MOUSE_OVER, navOver);
nav_mc.addEventListener(MouseEvent.MOUSE_OUT, navOut);
nav_mc.addEventListener(MouseEvent.CLICK, navClick);

nav_mc.nav1_mc.mouseChildren=false;
nav_mc.nav2_mc.mouseChildren=false;
nav_mc.nav3_mc.mouseChildren=false;
nav_mc.nav4_mc.mouseChildren=false;

//the variable currentNav is used to hold a reference to the most recently clicked button/MovieClip
var currentNav:MovieClip;

function navOver(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
trace(navItem.name);
//when you roll over the currently selected nav item you probably don't want it to animate
if (navItem!=currentNav) {
	TweenMax.to(navItem.dot_mc, .5, {tint:0x00CCFF});
}
}

function navOut(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
//when you mouse out ask "hey, am I the most recently clicked button?"
if (navItem!=currentNav) {
// if I'm not the most recently clicked button than play my "out" animation, or else do nothing
	TweenMax.to(navItem.dot_mc, .2, {tint:null});
}
}

function navClick(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
//disable the previously clicked button
if (currentNav!=null) {
	TweenMax.to(currentNav.dot_mc, 0, {tint:null});
}
//activate the currently clicked button
TweenMax.to(navItem.dot_mc, .2, {tint:0xFF6600});
currentNav=navItem;
}

 

there is a sample file to download from the link above as well.

 

My file may be set up a bit differently than yours but the concepts you will need to apply are the same.

by applying my eventListeners to the MovieClip that holds all the nav items (nav_mc), I don't have to apply eventListeners to each item individually

 

Carl

[ariekstins]

thank you so much for fast reply. It really seems to solve my problem. let me try to "swallow" all this now.. thanks again!

[ariekstins]

sadly, but I can`t get it to work. All the time I`m getting error "TypeError: Error #1009: Cannot access a property or method of a null object reference.

at navigation_fla::MainTimeline/portOver()"

I think your given example is not 100% the same as mine, cause in my case, I have 3 different movieclips (due to colors). and i`m using button over each movieclip (its because the animation is expanding, transforming - at the beginning we can`t see it). In fact, my movieclips are not inside another movieclip. That`s why I don`t know how to correctly adjust the code..

Oh, it`s not that easy as I thought.. Any suggestions, please?

code

portfolio_btn.addEventListener(MouseEvent.MOUSE_OVER, portOver);
portfolio_btn.addEventListener(MouseEvent.MOUSE_OUT, portOut);
portfolio_btn.addEventListener(MouseEvent.CLICK, portClick);


var currentNav:MovieClip;

function portOver(e:MouseEvent):void {
  var navItem:MovieClip=e.target as MovieClip;
  trace(navItem.name);
  if (navItem!=currentNav) {
      TweenMax.to(navItem.portfolio_mc, 0.5, {scaleY:10, ease:Bounce.easeOut, tint:0x0099CC});
   }
}

function portOut(e:MouseEvent):void {
   var navItem:MovieClip=e.target as MovieClip;
   if (navItem!=currentNav) {
       TweenMax.to(navItem.portfolio_mc, 0.5, {scaleY:10, ease:Bounce.easeOut, removeTint: true});
   }
}

function portClick(e:MouseEvent):void {
   var navItem:MovieClip=e.target as MovieClip;
   if (currentNav!=null) {
       TweenMax.to(currentNav.portfolio_mc, 0.5, {scaleY:10, ease:Bounce.easeOut, tint:0x0099CC});
   }
   TweenMax.to(navItem.portfolio_mc, 0.2, {scaleY:10, ease:Bounce.easeOut, tint:0x0099CC});
   currentNav=navItem;
}

At least now i`m on the right track, I`ll continue testing to adjust it correctly..

[ariekstins]

Ran thru the tutorial for a couple of times. I think I understand the structure (and why you did so), but still I can`t get this thing to work. Really, driving me nuts. No matter what I do, I`m getting - "TypeError: Error #1009: Cannot access a property or method of a null object reference.

at navigation_fla::MainTimeline/navOver()" Kind a stuck right now.. Any clues, guys?

 

code..

import com.greensock.*;
import com.greensock.easing.*;


portfolio_btn.addEventListener(MouseEvent.MOUSE_OVER, navOver);
portfolio_btn.addEventListener(MouseEvent.MOUSE_OUT, navOut);
portfolio_btn.addEventListener(MouseEvent.CLICK, navClick);


var currentNav:MovieClip;

function navOver(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
trace(navItem.name);
if (navItem!=currentNav) {
	TweenLite.to(navItem.portfolio_mc, 0.5, {scaleY:10, ease:Bounce.easeOut, tint:0x0099CC});
}
}

function navOut(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
if (navItem!=currentNav) {
	TweenLite.to(navItem.portfolio_mc, 0.5, {scaleY:0,ease:Bounce.easeOut, removeTint:true});
}
}

function navClick(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
if (currentNav!=null) {
	TweenLite.to(currentNav.portfolio_mc, 0, {tint:null});
}
TweenLite.to(navItem.dot_mc, .2, {scaleY:10, tint:0x0099CC});
currentNav=navItem;
}

[Carl]

there are a few errors in the way you are incorporating the code from the tutorial.

 

every where I use the var navItem it is to determine which button is being clicked on as I applied my MOUSE_OVER eventListeners to a movieclip that contains all my buttons.

this approach allows me to apply eventListeners to many objects without having to code them all individually.

more here: http://www.snorkl.tv/2010/08/assign-eve ... enttarget/

 

since you are applying your listeners diretly to each buttons such as portfolio_btn.addEventlistener it is going to work differently.

 

furthermore, in the tutorial each button contains a dot_mc which has its tint changed. in your file your buttons are effecting movieclips that live outside the buttons and have unique instance names such as portfolio_mc.

 

 

 

 

with your current implementation navItem.portfolio_mc is what is throwing the error as portfolio_mc probably doesn't live inside portfolio_btn or whatever navItem is referring to.

 

if you upload a simplified fla file I will take a look at it. Being a holiday I may not get to it until tomorrow.

 

thanks and Happy New Year

 

Carl

[ariekstins]

Thank you very much again, indeed! It cleared my mind a bit and I`ll try to fix it by my own.

But just in case here I have attached link to my navigation fla file. Hopefully you will be able to look at it.

Of course, happy new year! Enjoy this celebration. I wish all the best to this community and people who are around us! Cheers!

http://uploading.com/files/89ca6c4c/navigation.fla/

[Carl]

i went to download your file yesterday. uploading.com asked me to wait a minute before it would allow me to download. i switched to another tab and got distracted.

went to retrieve the file today and the link expired or uploading.com was inaccessible.

 

perhaps you can zip the fla and upload it here using the "upload attachment" option when you post.

 

hope you made some progress in the interim.

 

Carl

[ariekstins]

Yes, the link might not work. Here I have attached zip file. Still I haven`t made any progress.. I think you are my only hope.

[Carl]

I couldn't open the latest file. I'm working with Flash Pro CS4

 

anyway I made my file work like yours. view the swf here:

 

http://snorkl.tv/dev/stickyNav_special/

 

you can download the fla here

 

http://snorkl.tv/dev/stickyNav_special/ ... pecial.fla (use your own greensock classes)

 

the code looks like this

import com.greensock.*;

nav_mc.buttonMode=true;
nav_mc.addEventListener(MouseEvent.MOUSE_OVER, navOver);
nav_mc.addEventListener(MouseEvent.MOUSE_OUT, navOut);
nav_mc.addEventListener(MouseEvent.CLICK, navClick);

nav_mc.nav1_mc.mouseChildren=false;
nav_mc.nav2_mc.mouseChildren=false;
nav_mc.nav3_mc.mouseChildren=false;
nav_mc.nav4_mc.mouseChildren=false;

//give each button a special tint color
nav_mc.nav1_mc.tintValue=0xff0000;
nav_mc.nav2_mc.tintValue=0xffff00;
nav_mc.nav3_mc.tintValue=0x00ff66;
nav_mc.nav4_mc.tintValue=0x6600ff;

//give each button a reference to the rectangle box thing that grows
nav_mc.nav1_mc.box=boxGrow1_mc;
nav_mc.nav2_mc.box=boxGrow2_mc;
nav_mc.nav3_mc.box=boxGrow3_mc;
nav_mc.nav4_mc.box=boxGrow4_mc;



var currentNav:MovieClip;

function navOver(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
trace(navItem.name);
if (navItem!=currentNav) {
               //tween the bar
	TweenMax.to(bar_mc, .5, {tint:navItem.tintValue});
	//tweeen the little circle
              TweenMax.to(dot_mc, .5, {tint:navItem.tintValue});

             //tween the box that grows
	TweenMax.to(navItem.box, .5, {tint:navItem.tintValue});
	TweenMax.to(navItem.box, .5, {height:50});
}
}

function navOut(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
if (navItem!=currentNav) {


	TweenMax.to(navItem.box, .5, {height:10, tint:null});


// if a button has already been clicked then reset the bar and dot to the colors of the currently clicked item
	if (currentNav) {
		TweenMax.to(bar_mc, .5, {tint:currentNav.tintValue});
		TweenMax.to(dot_mc, .5, {tint:currentNav.tintValue});

// or else if no button has been clicked yet, set things back to white or normal color
	} else {
		TweenMax.to(bar_mc, .5, {tint:null});
		TweenMax.to(dot_mc, .5, {tint:null});
	}


}
}

function navClick(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;

if (currentNav!=navItem) {
	if (currentNav!=null) {
		currentNav.useHandCursor=true;

		TweenMax.to(currentNav.box, .5, {height:10, tint:null});
	}

	trace("play some animation");

	navItem.useHandCursor=false;
	currentNav=navItem;
}
}

 

hopefully this gets you closer. good luck with your project!

 

Carl

[ariekstins]

I`m not even able to say how pleased and happy I`m now! I really appreciate what you have done! It works, I adjusted it without any problems. All thanks to you!

[Carl]

very glad to hear it. it is a neat effect you were going for.

you're welcome.

Carl

[AniMi]

Hello, i'm new here. i want to ask you how to make these buttons to load and unload external swf? I know hot to do this with with usual buttons, but not with movie clips ;\ I tried and tried but nothing helps... Please answer me...

[Carl]

a simple yet maybe not the most elegant way would be to tell each button what image it needs to load like:

 

nav_mc.nav1_mc.imageToLoad = "images/pig.jpg";

nav_mc.nav2_mc.imageToLoad = "images/hamster.jpg";

 

then on your click event do something like this:

 

 

function navClick(e:MouseEvent):void {

var navItem:MovieClip=e.target as MovieClip;

 

if (currentNav!=navItem) {

if (currentNav!=null) {

currentNav.useHandCursor=true;

 

TweenMax.to(currentNav.box, .5, {height:10, tint:null});

loadImage(currentNav.imageToLoad);

}

 

trace("play some animation");

 

navItem.useHandCursor=false;

currentNav=navItem;

}

}

 

 

and then create a function that loads a particular image:

 

function imageToLoad(imageURL:String):void{

 

//place code here to load your image

 

 

}