Buttons sticking on the over state

[jsfaulds]

On the stage, I have four buttons called, b1,b2,b3 b4 In the Library, I have four movie clips called, page1 page2 page3 page4.
When the movie loads page1 is loaded and when you click on another button the current page fades out before the next page fades in.
This part of the code works fine thanks to the help of JAQUAN.
The problem I now have is the buttons.
When you rollOver a button, the button animates to frame 10 and stops and when you rollOut the button plays frame 11 and eventualy back to frame 1 to finish the animation.
But if you click on a button and leave the cursor over that button
the button sticks when the page has finished fading in, on the over state frame 10, and then if you go and click on another button, and leave the cursor on that button it also stickes. so you end up with all your buttons on the over state

here is the code help please





import mx.transitions.Tween;
import mx.transitions.easing.*;
//set currentPage to some arbitrary value
var currentPage = 1;
b1.onRelease = function() {
if (currentPage != page1) {

var fadeout:Tween = new Tween(currentPage, "_alpha", Strong.easeOut, 100, 0, .5, true);
fadeout.onMotionFinished = function() {
var page1:MovieClip = _root.attachMovie("page1", "page1", 10);
page1._x = Stage.width/2;
page1._y = Stage.height/2;
page1._alpha = 0;
var fadein:Tween = new Tween(page1, "_alpha", Strong.easeOut, 0, 100, .5, true);
currentPage = page1;

b1.onRollOver = over;
b1.onRollOut = out;
b1.buttext.buttontext.text ="HOME";
b1.enabled = false;
b1._alpha = 50;
b2.enabled = true;
b2._alpha = 100;
b3.enabled = true;
b3._alpha = 100;
b4.enabled = true;
b4._alpha = 100;
}

}
}


b2.onRelease = function() {
if (currentPage != page2) {
var fadeout:Tween = new Tween(currentPage, "_alpha", Strong.easeOut, 100, 0, .5, true);
fadeout.onMotionFinished = function() {
var page2:MovieClip = _root.attachMovie("page2", "page2", 10);
page2._x = Stage.width/2;
page2._y = Stage.height/2;
page2._alpha = 0;
var fadein:Tween = new Tween(page2, "_alpha", Strong.easeOut, 0, 100, .5, true);
currentPage = page2;
b1.enabled = true;
b1._alpha = 100;
b2.enabled = false;
b2._alpha = 50;
b3.enabled = true;
b3._alpha = 100;
b4.enabled = true;
b4._alpha = 100;
}

}
}


b3.onRelease = function() {
if (currentPage != page3) {
var fadeout:Tween = new Tween(currentPage, "_alpha", Strong.easeOut, 100, 0, .5, true);
fadeout.onMotionFinished = function() {
var page3:MovieClip = _root.attachMovie("page3", "page3", 10);
page3._x = Stage.width/2;
page3._y = Stage.height/2;
page3._alpha = 0;
var fadein:Tween = new Tween(page3, "_alpha", Strong.easeOut, 0, 100, .5, true);
currentPage = page3;
b1.enabled = true;
b1._alpha = 100;
b2.enabled = true;
b2._alpha = 100;
b3.enabled = false;
b3._alpha = 50;
b4.enabled = true;
b4._alpha = 100;
}

}
}


b4.onRelease = function() {
if (currentPage != page4) {
var fadeout:Tween = new Tween(currentPage, "_alpha", Strong.easeOut, 100, 0, .5, true);
fadeout.onMotionFinished = function() {
var page3:MovieClip = _root.attachMovie("page4", "page4", 10);
page4._x = Stage.width/2;
page4._y = Stage.height/2;
page4._alpha = 0;
var fadein:Tween = new Tween(page3, "_alpha", Strong.easeOut, 0, 100, .5, true);
currentPage = page4;
b1.enabled = true;
b1._alpha = 100;
b2.enabled = true;
b2._alpha = 100;
b3.enabled = true;
b3._alpha = 100;
b4.enabled = false;
b4._alpha = 50;
}

}
}


//trigger button1's onRelease.
b1.onRelease();




//button code.


function over() {
this.gotoAndPlay(2);
}
function out() {
this.gotoAndPlay(11);
}

b1.onRollOver.gotoAndStop(s2);
b1.onRollOut = out;
b1.buttext.buttontext.text ="HOME";


b2.onRollOver = over;
b2.onRollOut = out;
b2.buttext.buttontext.text ="ABOUT";


b3.onRollOver = over;
b3.onRollOut = out;
b3.buttext.buttontext.text ="PHOTOS";


b4.onRollOver = over;
b4.onRollOut = out;
b4.buttext.buttontext.text ="CONTACT";

[jAQUAN]

I need to look at one of your buttons. Please attach an .fla or host it for download.
The code I provided forces each button to stay on once it's been clicked one time. I wasn't sure how you wanted to show that a page has already been visited.

Correct me if I'm wrong but you want a movie as follows:
contains four buttons.
Each button will only load a corresponding movie the first time it is clicked.
Please fill in these blanks.
Once the button has been clicked for the first time it should _________.
After the first time, the rollover should __________.
After the first click, clicking again should ____________.

[jsfaulds]

Thanks for the help.
I've attached the Fla.

Once the button has been clicked for the first time it should _disable and fade to 50%________.

After the first time, the rollover should __go back to the out state__

After the first click, clicking again should __do nothing if your on that page of the site as it should be disabled_

[jAQUAN]

please address the rest of my post.

[jsfaulds]

Here is an example with four buttons and four pages, when you click on a button keep your mouse over that button untill the page has finished fading in, and you'll see that it is sticks on the over state. Then if you go to another button and click you'll see that the first button is still stuck untill you roll over it again