help making animated buttons stay clicked?

Okay, I know this isn't the first topic on this subject… I've been Googling all day and I know there are various ways to go about this, but I am really struggling with implementing them.

Currently, I have a website with a very simple code that gives all the buttons in the menu an animated rollover and rollout state. When the buttons are clicked, I have a movie clip with all the content which goes to a specific frame label depending on which button is clicked. Very simple, no problems there.

But what I can't figure out how to do, is to add a variable so that when each button is clicked, it stays in the over state until another button is clicked (at which point I'd like it to go to the out state, while the new button would go to the over state.)

I found several examples of codes that do this, but I can't figure out how to modify them so that when a button is clicked, it also goes to a specific frame label in the content movie clip, so that the content for each section can be displayed.

This is the original code I was using:

Code:

---

home.onRollOver = over;
home.onRollOut = out;
home.onRelease = function() {
        content.gotoAndPlay("home");
}

about.onRollOver = over;
about.onRollOut = out;
about.onRelease = function() {
        content.gotoAndPlay("about");
}

services.onRollOver = over;
services.onRollOut = out;
services.onRelease = function() {
        content.gotoAndPlay("services");
}

gallery.onRollOver = over;
gallery.onRollOut = out;
gallery.onRelease = function() {
        content.gotoAndPlay("gallery");
}

testimonials.onRollOver = over;
testimonials.onRollOut = out;
testimonials.onRelease = function() {
        content.gotoAndPlay("testimonials");
}

contact.onRollOver = over;
contact.onRollOut = out;
contact.onRelease = function() {
        content.gotoAndPlay("contact");
}


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

---

and then here is a code I found through Googling that does work to make buttons stay pressed, but I don't know how to edit it so that whenever a button is clicked it still goes to a specific frame label in the timeline of a movie clip, the way I have it in the original code:

Code:

---

// script by http://onestoptutorial.com

this.button1.textBTN_txt.text = "ABOUT US";
this.button2.textBTN_txt.text = "SERVICE";
this.button3.textBTN_txt.text = "PORTFOLIO";
this.button4.textBTN_txt.text = "CONTACT";

var buttonNum:Number = 4;

for (i=1; i<=buttonNum; i++) {
        this["button"+i].onRollOver = function() {
                if (this.clicked != "yes") {
                        this.gotoAndPlay("over");
                }
        };
        this["button"+i].onRollOut = function() {
                if (this.clicked != "yes") {
                        this.gotoAndPlay("out");
                }
        };
        this["button"+i].onRelease = function() {
                this.gotoAndStop("out");
                this._parent[_root.clickedButton].gotoAndPlay("out");
                this._parent[_root.clickedButton].clicked = false;
                this._parent[_root.clickedButton].enabled = true;
                _root.clickedButton = this._name;
                this.clicked = "yes";
                this.enabled = false;
                _root.on_txt.text=this._name +" in "+this.textBTN_txt.text;
        };
}

---

Could somebody please help me? I'm really very remedial when it comes to coding, I'm much more of a designer/animator but I really would like to get this to work.

Any help would be very much appreciated!!

//These lines gives the buttons' names.
this.button1.textBTN_txt.text = "ABOUT US";
this.button2.textBTN_txt.text = "SERVICE";
this.button3.textBTN_txt.text = "PORTFOLIO";
this.button4.textBTN_txt.text = "CONTACT";

//This gives the menus' quantity
var buttonNum:Number = 4;

//With this for cycle, the program will enable the scirpt for button[1,2,3,4].
for (i=1; i<=buttonNum; i++) {
this["button"+i].onRollOver = function() {
//This will check, that menu doesn't enabled yet. '!=' means, not equal.
if (this.clicked != "yes") {
this.gotoAndPlay("over");
}
};
//Same script, for the rollOut function on the four buttons.
this["button"+i].onRollOut = function() {
if (this.clicked != "yes") {
this.gotoAndPlay("out");
}
};
//Same for release function.
this["button"+i].onRelease = function() {
this.gotoAndStop("out");
//the other buttons will be 'enabled' for click, and doesn't 'click'-ed and this will be the clicked one, without function('enabled = false').
this._parent[_root.clickedButton].gotoAndPlay("out");
this._parent[_root.clickedButton].clicked = false;
this._parent[_root.clickedButton].enabled = true;
_root.clickedButton = this._name;
this.clicked = "yes";
this.enabled = false;
//Your mc got named, by the pressed menu's name. (textBTN_txt.text)
_root.on_txt.text=this._name +" in "+this.textBTN_txt.text;
};
}

If you want to use this script, just rewrite your menus button1, button2..etc. And give the right number for

Quote:

---

var buttonNum:Number = 4;

---

Thank you so much for replying, I really appreciate it. And I also appreciate you breaking down the different parts of that code, that is helpful.

But the thing that I'm not understanding, is how to modify that code so that when clicked, while staying down, the buttons also go to a specific frame label in a specific movie clip. I tried combining the 2 different codes I had, but when I do that, it makes the button stop staying down after being clicked.

Do you know what I need to do to make both work? (Again, any help is very much appreciated!)

Code:

---

this.button1.textBTN_txt.text = "ABOUT US";
this.button2.textBTN_txt.text = "SERVICE";
this.button3.textBTN_txt.text = "PORTFOLIO";
this.button4.textBTN_txt.text = "CONTACT";

var buttonNum:Number = 4;

for (i=1; i<=buttonNum; i++) {
        this["button"+i].onRollOver = function() {
                if (this.clicked != "yes") {
                        this.gotoAndPlay("over");
                }
        };
        this["button"+i].onRollOut = function() {
                if (this.clicked != "yes") {
                        this.gotoAndPlay("out");
                }
        };
        this["button"+i].onRelease = function() {
                this.gotoAndStop("out");
                this._parent[_root.clickedButton].gotoAndPlay("out");
                this._parent[_root.clickedButton].clicked = false;
                this._parent[_root.clickedButton].enabled = true;
                _root.clickedButton = this._name;
                this.clicked = "yes";
                this.enabled = false;
                _root.on_txt.text=this._name +" in "+this.textBTN_txt.text;
        };
}



button1.onRelease = function() {
        content.gotoAndPlay("A");
}


button2.onRelease = function() {
        content.gotoAndPlay("B");
}


button3.onRelease = function() {
        content.gotoAndPlay("C");
}


button4.onRelease = function() {
        content.gotoAndPlay("D");
}

---

Here's a test Fla if that makes it easier to troubleshoot. The buttons stay clicked if I delete this stuff:

Code:

---

button1.onRelease = function() {
        content.gotoAndPlay("A");
}

button2.onRelease = function() {
        content.gotoAndPlay("B");
}

button3.onRelease = function() {
        content.gotoAndPlay("C");
}

button4.onRelease = function() {
        content.gotoAndPlay("D");
}

---

But then... I don't know how else to make the buttons go to different sections in the content mc.

Okay, I got it working! But I'm sure there must be a way to do it without repeating so much of the same code. I just can't get it to work any other way though. This is what I have so far, and it does work (which is the most important thing), but if there's a better way I can do it, I would really appreciate it if somebody could point me in the right direction!

Code:

---

this.button1.textBTN_txt.text = "ABOUT US";
this.button2.textBTN_txt.text = "SERVICE";
this.button3.textBTN_txt.text = "PORTFOLIO";
this.button4.textBTN_txt.text = "CONTACT";

var buttonNum:Number = 4;

for (i=1; i<=buttonNum; i++) {
        this["button"+i].onRollOver = function() {
                if (this.clicked != "yes") {
                        this.gotoAndPlay("over");
                }
        };
        this["button"+i].onRollOut = function() {
                if (this.clicked != "yes") {
                        this.gotoAndPlay("out");
                }
        };
        this.button1.onRelease = function() {
                this.gotoAndStop("out");
                this._parent[_root.clickedButton].gotoAndPlay("out");
                this._parent[_root.clickedButton].clicked = false;
                this._parent[_root.clickedButton].enabled = true;
                _root.clickedButton = this._name;
                this.clicked = "yes";
                this.enabled = false;
                content.gotoAndPlay("A");
        };

this.button2.onRelease = function() {
                this.gotoAndStop("out");
                this._parent[_root.clickedButton].gotoAndPlay("out");
                this._parent[_root.clickedButton].clicked = false;
                this._parent[_root.clickedButton].enabled = true;
                _root.clickedButton = this._name;
                this.clicked = "yes";
                this.enabled = false;
                content.gotoAndPlay("B");
        };

this.button3.onRelease = function() {
                this.gotoAndStop("out");
                this._parent[_root.clickedButton].gotoAndPlay("out");
                this._parent[_root.clickedButton].clicked = false;
                this._parent[_root.clickedButton].enabled = true;
                _root.clickedButton = this._name;
                this.clicked = "yes";
                this.enabled = false;
                content.gotoAndPlay("C");
        };

this.button4.onRelease = function() {
                this.gotoAndStop("out");
                this._parent[_root.clickedButton].gotoAndPlay("out");
                this._parent[_root.clickedButton].clicked = false;
                this._parent[_root.clickedButton].enabled = true;
                _root.clickedButton = this._name;
                this.clicked = "yes";
                this.enabled = false;
                content.gotoAndPlay("D");
        };


}

---

Like I was thinking it should be something similar the this:

Code:

---

// script by http://onestoptutorial.com

this.button1.textBTN_txt.text = "ABOUT US";
this.button2.textBTN_txt.text = "SERVICE";
this.button3.textBTN_txt.text = "PORTFOLIO";
this.button4.textBTN_txt.text = "CONTACT";

var buttonNum:Number = 4;

for (i=1; i<=buttonNum; i++) {
        this["button"+i].onRollOver = function() {
                if (this.clicked != "yes") {
                        this.gotoAndPlay("over");
                }
        };
        this["button"+i].onRollOut = function() {
                if (this.clicked != "yes") {
                        this.gotoAndPlay("out");
                }
        };
        this["button"+i].onRelease = function() {
                this.gotoAndStop("out");
                this._parent[_root.clickedButton].gotoAndPlay("out");
                this._parent[_root.clickedButton].clicked = false;
                this._parent[_root.clickedButton].enabled = true;
                _root.clickedButton = this._name;
                this.clicked = "yes";
                this.enabled = false;
                if (_root.clickedButton=button1) {content.gotoAndPlay("A");}
                if (_root.clickedButton=button2) {content.gotoAndPlay("B");}
                if (_root.clickedButton=button2) {content.gotoAndPlay("C");}
                if (_root.clickedButton=button2) {content.gotoAndPlay("D");}
        };
}

---

but this doesn't actually work, so I'm wondering what the correct syntax would be.

Once again any help is very much appreciated!

maybe if you can save your *fla into a Flash 8 format I can solve it to you.

Sure, here it is! (And as of now it does work, but I'm sure I'm making it overly complicated by repeating so much of the code 4 times.)

So if you know a better way I would be very happy to learn it!

Thank you again for helping...

*fla

(I changed in content the menu names) + made a shorter script. :)
I hope it helps.

Quote:

---

Originally Posted by Creephun

*fla

(I changed in content the menu names) + made a shorter script. :)
I hope it helps.

---

That is awesome! Thank you! :D

Okay, so there's just one more thing I'm wondering about... (Sorry!)

I was just wondering if there's a simple way to modify that code again, this time so that when people first open the file, the first button has already been selected (so they're already on what will be the home page, and the button will already be down?).

I think I know a way to fake it, but it would be great to know how it's properly done...

Sorry if I'm asking too much... Again I really really appreciate you being so helpful!

*fla

I made it, and it's makes a bit longer your script but I think there aren't any other ways for this, with that 'for' cycle, that you want to use for menus.

Thank you so much, that's perfect! I really appreciate all the help. :)

Your welcome:) I like to help.

Okay, sorry, I have one more question. This is the last one, I promise!

I was just wondering...

How would I modify that code if I wanted to show the rollover animation on entering the frame? (so instead of already being clicked, it would show the rollover animation first and then stay down, as if somebody had rolled over it and then clicked it).

I tried just changing it to

Code:

---

if (!firstclick) {button1.gotoAndPlay("over");

---

but that didn't work so I'm not sure what I would need to change...

Again I really really appreciate you taking the time to help me with this. I'm great when it comes to design and animation but with coding I don't really know much at all.

If you can't help with that I understand though, you've already helped immensely.

Quote:

---

// script by http://onestoptutorial.com
this.button1.textBTN_txt.text = "A";
this.button2.textBTN_txt.text = "B";
this.button3.textBTN_txt.text = "C";
this.button4.textBTN_txt.text = "D";
var buttonNum:Number = 4;
firstclick = false;
for (i=1; i<=buttonNum; i++) {
this["button"+i].onRollOver = function() {
if (this.clicked != "yes") {
this.gotoAndPlay("over");
}
};
this["button"+i].onRollOut = function() {
if (this.clicked != "yes") {
this.gotoAndPlay("out");
}
};
this["button"+i].onRelease = function() {
this.gotoAndStop("out");
this._parent[_root.clickedButton].gotoAndPlay("out");
this._parent[_root.clickedButton].clicked = false;
this._parent[_root.clickedButton].enabled = true;
_root.clickedButton = this._name;
this.clicked = "yes";
this.enabled = false;
content.gotoAndPlay(this._name);
firstclick = true;
};
button1.onEnterFrame = function() {
if (!firstclick) {
button1.gotoAndPlay(12);
button1._parent[_root.clickedButton].gotoAndPlay(12);
button1._parent[_root.clickedButton].clicked = false;
button1._parent[_root.clickedButton].enabled = true;
_root.clickedButton = button1._name;
button1.clicked = "yes";
button1.enabled = false;
content.gotoAndPlay(this._name);
firstclick = true;
}
};
}

---

Just 1 plus line :)

And if you want to delay the opening here is a script for that:

Quote:

---

// script by http://onestoptutorial.com
this.button1.textBTN_txt.text = "A";
this.button2.textBTN_txt.text = "B";
this.button3.textBTN_txt.text = "C";
this.button4.textBTN_txt.text = "D";
var buttonNum:Number = 4;
firstclick = false;
for (i=1; i<=buttonNum; i++) {
this["button"+i].onRollOver = function() {
if (this.clicked != "yes") {
this.gotoAndPlay("over");
}
};
this["button"+i].onRollOut = function() {
if (this.clicked != "yes") {
this.gotoAndPlay("out");
}
};
this["button"+i].onRelease = function() {
this.gotoAndStop("out");
this._parent[_root.clickedButton].gotoAndPlay("out");
this._parent[_root.clickedButton].clicked = false;
this._parent[_root.clickedButton].enabled = true;
_root.clickedButton = this._name;
this.clicked = "yes";
this.enabled = false;
content.gotoAndPlay(this._name);
firstclick = true;
};
}
//This part, won't let the buttons being used when the site is opening.
onEnterFrame = function () {
for (i=1; i<=buttonNum; i++) {
if (!firstclick) {
this["button"+i].enabled = false;
} else {
this["button"+i].enabled = true;
}
}
};
function openup() {
button1.onEnterFrame = function() {
if (!firstclick) {
button1.gotoAndPlay(12);
button1._parent[_root.clickedButton].gotoAndPlay(12);
button1._parent[_root.clickedButton].clicked = false;
button1._parent[_root.clickedButton].enabled = true;
_root.clickedButton = button1._name;
button1.clicked = "yes";
button1.enabled = false;
content.gotoAndPlay(this._name);
firstclick = true;
}
};
}
//This will delay the opening, you can change the interval as you want.
setInterval(openup, 1000);

---

Awesome, thank you so much! This is great. Thank you.

Okay, one slight issue I just noticed...

On the version with the delay, the buttons are still clickable once they've already been clicked; if you click them again, it plays the rollout animation. Is there a way to prevent this?

The previous version works perfectly, but I would like to use the delay also, so if I could fix that one little bug it would be perfect...

Can you help with that? (Thank you again.)

PHP Code:

---

onEnterFrame = function () {
    for (i=1; i<=buttonNum; i++) {
        if (!firstclick) {
            this["button"+i].enabled = false;
        } else {
            this.button2.enabled = true;
            this.button3.enabled = true;
            this.button4.enabled = true;
            delete this.onEnterFrame;
        }
    }
}; 


---

Just change this part, and sorry, I didn't see it :)

Thank you!

That almost totally fixes it but I noticed for the button1/A, it still has the same issue until another button has been clicked... is there a fix for that?

Thanks so much, again...

Oh! It works perfect now, I think you edited it while I was posting. Thanks again, I really appreciate all the help.

Your welcome :)
Yes I edited it, cuz I discovered that too.

And something that you should use.

Quote:

---

for (i=1; i<=buttonNum; i++) {
this["button"+i].useHandCursor = false;
this["button"+i].onRollOver = function() {
if (this.clicked != "yes") {
this.gotoAndPlay("over");
}
};
this["button"+i].onRollOut = function() {
if (this.clicked != "yes") {
this.gotoAndPlay("out");
}
};
this["button"+i].onRelease = function() {
this.gotoAndStop("out");
this._parent[_root.clickedButton].gotoAndPlay("out");
this._parent[_root.clickedButton].clicked = false;
this._parent[_root.clickedButton].enabled = true;
_root.clickedButton = this._name;
this.clicked = "yes";
this.enabled = false;
content.gotoAndPlay(this._name);
firstclick = true;
};
}

---

Add that line. I think it looks better without that ugly hand cursor :)