help making animated buttons stay clicked?

emeyer · 11-24-2009, 06:07 PM

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:

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

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

emeyer · 11-25-2009, 05:22 PM

Please, can somebody help?

I'm sure it's not complicated at all for an experienced coder, but I just really don't know what needs to be done to make this work.

I just need to either modify the first code so the buttons stay clicked, or modify the second code so that when clicked, the buttons also go to a specific frame label in a movie clip.

I would really appreciate any help that anybody can give.

emeyer · 11-25-2009, 06:02 PM

Okay, nevermind, I figured it out! I was making it way more complicated in my mind for some reason, thinking I needed to change the whole var buttonNum code to make the buttons go to a different section, but really I was able to just add the same type of function from the original code I was using, and it works just fine. Yay!

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");
}

emeyer · 11-25-2009, 06:10 PM

Oh crap, no, it doesn't work, now the button doesn't stay clicked. I'm losing my mind!

emeyer · 11-25-2009, 07:03 PM

So once again I'm in the same boat where I started, I have 2 codes (one to go to specific frame label, and one to make the buttons stay clicked) and I don't know how to combine them while keeping the functionality of both.

Could somebody please help me with this?

I'm sure it's a simple fix for anybody who really understands this stuff?

emeyer · 11-25-2009, 09:46 PM

Okay! I found a way to make both the the clicking stay clicked, and to go to a specific frame label when clicked as well. But I think there should be a way to do this without repeating so much of the same code? If somebody could please take a look at this and let me know if there's a better way to do this, I would really appreciate it.

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.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");
	};


}

NamikazeMinato · 11-26-2009, 05:01 AM

Go to this thread ...
http://www.kirupa.com/forum/showthread.php?t=339338

I think it will help you remove repetetive code in button actions..

glosrfc · 11-26-2009, 11:45 AM

I would also suggest that you don't use a string to indicate if a button has been clicked or not, but to use Booleans instead.
So, rather than this.clicked = "yes"; use this.clicked = true;
You can then use if (!this.clicked) instead of if (this.clicked != "yes") and if (this.clicked) instead of...well, you get the idea

emeyer · 11-26-2009, 05:04 PM

Quote:

Originally Posted by NamikazeMinato

Go to this thread ...
http://www.kirupa.com/forum/showthread.php?t=339338

I think it will help you remove repetetive code in button actions..

I didn't really understand what to do with that (though I do really appreciate the tip).

I was finally able to get the code simplified thanks to some help on Flashkit. Well basically somebody simplified it for me. But anyway, I thought I'd post the updated code just in case anybody else was curious.

Code:

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;
		content.gotoAndPlay(this._name);
	};
}

emeyer · 11-26-2009, 05:11 PM

Quote:

Originally Posted by glosrfc

I would also suggest that you don't use a string to indicate if a button has been clicked or not, but to use Booleans instead.
So, rather than this.clicked = "yes"; use this.clicked = true;
You can then use if (!this.clicked) instead of if (this.clicked != "yes") and if (this.clicked) instead of...well, you get the idea

You mean like this?

Code:

var buttonNum:Number = 4;

for (i=1; i<=buttonNum; i++) {
	this["button"+i].onRollOver = function() {
		if (!this.clicked) {
			this.gotoAndPlay("over");
		}
	};
	this["button"+i].onRollOut = function() {
		if (!this.clicked) {
			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 = true;
		this.enabled = false;
		content.gotoAndPlay(this._name);
	};
}

Everything seems to work the same when I do it that way... what makes it better?

(I really am curious to know, I'm not doubting your suggestion or anything, I just don't know what makes one way better than the other).

Thanks and I appreciate the help.

glosrfc · 11-26-2009, 05:31 PM

A number of reasons make it better although, as you say, both do work. I feel that using Boolean values from the start is less prone to introducing errors. These are some of the reasons off the top of my head:

Firstly, Boolean values can only be in one of two states...true or false. Or, like your buttons, on or off. It's the same way that computers work. Another benefit is that the default state of an undefined Boolean value is false. So it's more logical to use Boolean values.

Secondly, it's possible to introduce errors when you're using strings. Imagine if you put this.clicked = "Yes" in your code...when you try to compare it with "yes", the if statement would fail.

Thirdly, you have to consider how Actionscript treats strings as Booleans, should you want to use them. You might think this is okay:
myVar = "yes";
trace(Boolean(myVar)); // outputs true

Seem's to be fine, right? Now try changing the value of myVar to "no" or "false" or any other string.

Fourthly, it's a lot less to type which can make a difference if you have a load of conditions that you want to check.

Fifthly, most people accustomed to writing, and reading, code are more likely to use the method I've suggested.

emeyer · 11-26-2009, 05:36 PM

Thanks, that was very informative!

So is the way I changed it correct, or did I miss anything?

glosrfc · 11-26-2009, 06:02 PM

Yup, looks like you made the boolean changes correctly.

Interestingly enough, the code you found used this method anyway. See this line:
this._parent[_root.clickedButton].clicked = false;