Help making animated buttons stay clicked?

Okay, I know this isn’t the first thread on this subject… I think I even made a similar one a year ago but I never got a response, and I really would like to get this working this time around.

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 the same way is in the original version.

This is the original code I was using:

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 Google 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:

// 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!!