Navigational Issue Using Simple Frame Label Buttons with a Twist

Hello everyone :hugegrin:

Wanted to see if someone could shed some light on a small problem with this navigation idea I had.

I designed a navigation menu that has 4 buttons. When you rollOver btn1 it goes to a nested movie clip and plays the frame label “a1” which changes its color. On rollOut it plays the “a2” which restores it to its original color. Very easy so far and common. onRelease the button is instructed to stay a a1 to indicate its on.

Here is the twist. When you roll over btn1 part of the animation covers up the other buttons. Same thing is you roll on btn2 for example, it colors the buttons accordingly.

So I started off by creating a variable and setting it to 0. Then I built my rollOver, rollOut, & onRelease code for each button and said if the variable is not != to whatever number then play the frame label using that logic but it has failed to fully work. The other button even though its covered up with a different color still works so it just makes a sort of glitch.

Here is my code and the attachment has the .fla and even a jpeg of what I trying to achieve.


var link = 0;

stop();

nav.nav1_btn.onRollOver = function() {
	if (link != 1) {
		nav.gotoAndPlay("a1");
		updateAfterEvent();
	}
};
nav.nav1_btn.onRollOut = function() {
	if (link != 1) {
		nav.gotoAndPlay("a2");
		updateAfterEvent();
	}
};
nav.nav1_btn.onRelease = function() {
	if (link != 1) {
	//	_root["nav.nav1_btn"+_root.link].gotoAndPlay("a2"); 
		//trace ((_root["nav.nav1_btn"+_root.link]));
		_root.link = 1;
	}
};

nav.nav2_btn.onRollOver = function() {
	if (link != 2) {
		nav.gotoAndPlay("b1");
		updateAfterEvent();
	}
};
nav.nav2_btn.onRollOut = function() {
	if (link != 2) {
		nav.gotoAndPlay("b2");
		updateAfterEvent();
	}
};
nav.nav2_btn.onRelease = function() {
	if (link != 2) {
	//	_root["item"+_root.link].gotoAndPlay("b2");
		_root.link = 2;
	}
};