14 replies to this topic

[cupaball]

Hi All,

I completed a animated button tut found on another forum and I have a question. How can I get the button to stay on the over state when click and when another is clicked the out animation plays? Here is the code I have so far:

Code:

b1.onRollOver = over; 
b1.onRollOut = out; 
b1.buttText.buttonText.text = "News" 

b2.onRollOver = over; 
b2.onRollOut = out; 
b2.buttText.buttonText.text = "Music" 

b3.onRollOver = over; 
b3.onRollOut = out; 
b3.buttText.buttonText.text = "Photos" 

b4.onRollOver = over; 
b4.onRollOut = out; 
b4.buttText.buttonText.text = "Contact" 

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

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

hope someone can help!

[Ben]

Thats a really bad way of making roll over buttons. It looks choppy if you roll over it for a second. Use this method:

1. Draw your button - convert to a movieclip.
2. Animate it the way you want - this will be the rollover (and out) animation
3. Name the movieclip myBtn
4. On the first frame from the main stage, add this code:

myBtn.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onRelease = function() {
//Add what you want to do here
}

This will fix any problems you have currently.

[cupaball]

Thanks, will I have to do this for each button? Or can i use the same button and give it a different instance name?

[funkysoul]

How dark scripted it, you have to do it for each button.

[cupaball]

funkysoul, on Oct 5 2006, 10:18 AM, said:

How dark scripted it, you have to do it for each button.

Is there a better way, or a way to do it with my orginal script?

[funkysoul]

nah, dark's script is fine..

[Ben]

cupaball, on Oct 5 2006, 10:51 PM, said:

Thanks, will I have to do this for each button? Or can i use the same button and give it a different instance name?

You dont have to, for example, I could put it inside a for loop:

stop();
var totalBtn:Number = 1;
var runNum:Number;
for(var i = 1; i <= totalBtn; i++) {
myBtn = _root["btn"+i];
var btnArray:Array = new Array(btnFunc1);
myBtn.i = i;
myBtn.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onRelease = function() {
runNum = this.i;
if(this.i == 1) {
_root.play();
}
}
}

[funkysoul]

d4rkst0n3, on Oct 5 2006, 11:47 PM, said:

cupaball, on Oct 5 2006, 10:51 PM, said:

Thanks, will I have to do this for each button? Or can i use the same button and give it a different instance name?

You dont have to, for example, I could put it inside a for loop:

stop();
var totalBtn:Number = 1;
var runNum:Number;
for(var i = 1; i <= totalBtn; i++) {
myBtn = _root["btn"+i];
var btnArray:Array = new Array(btnFunc1);
myBtn.i = i;
myBtn.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onRelease = function() {
runNum = this.i;
if(this.i == 1) {
_root.play();
}
}
}

Are you sure that thing works?
myBtn would be called myBtn.i or even just i...

[PixelHiveDesign]

Your buttons would be named:
btn1
btn2
btn3
btn#..

Change totalBtn variable to the number of buttons you have.

[cupaball]

d4rk/funky,

thanks, I used the first example that d4rk used (i just copied the script four times and changed the instance names) but what about my inital question?

How do I get the button to stay on the over state when clicked?

By the way thanks for all the help so far!

When I get home, I will post my code.

Edited by cupaball, 06 October 2006 - 01:40 PM.

[cupaball]

and here's the code

myBtn.textMc.stext.text = "News"

myBtn.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onRelease = function() {
//Add what you want to do here
}

myBtn2.textMc.stext.text = "Gallery"

myBtn2.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn2.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn2.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn2.onRelease = function() {
//Add what you want to do here
}

myBtn3.textMc.stext.text = "Music"

myBtn3.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn3.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn3.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn3.onRelease = function() {
//Add what you want to do here
}

myBtn4.textMc.stext.text = "Contact"

myBtn4.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn4.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn4.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn4.onRelease = function() {
//Add what you want to do here
}

Let me know what you think.

[Ben]

Oh, now I finally get what your saying, lol. Alright, on the onRelease function, add this:

myBtn.onRelease = function() {
btnClicked = 1;
//Add anything else here
}

Add that to all the buttons.
Then, add before all the code, this:

var btnClicked:Number = 1;

This will set the first button to the over state automatically. If you dont want that, just set it to this:

var btnClicked:Number;

Then, after all the code, add this:

onEnterFrame = function() {
  if(btnClicked == 1) {
	delete myBtn.onEnterFrame;
	myBtn.gotoAndStop(TOTALFRAMENUM);
  } else if(btnClicked == 2) {
	delete myBtn2.onEnterFrame;
	myBtn2.gotoAndStop(TOTALFRAMENUM);
  } else if(btnClicked == 3) {
	delete myBtn3.onEnterFrame;
	myBtn3.gotoAndStop(TOTALFRAMENUM);
  } else if(btnClicked == 4) {
	delete myBtn4.onEnterFrame;
	myBtn4.gotoAndStop(TOTALFRAMENUM);
  }
}

There could possibly be some glitches, I havent checked the code, just off the top of my head. Hope it works.

Edited by d4rkst0n3, 06 October 2006 - 07:47 PM.

[cupaball]

That almost worked! You are good (especially for going off the top of your head)

It looks like:

1 - the first button did not begin in the over state
2 - when you click another button, the rollout for the overstate does not happen (did not that make sense)

I add the code to transition from one external swf to another.

//load intial movie
_root.currMovie = "news"; 
container.loadMovie(_root.currMovie+".swf");

//click news button
var btnClicked:Number = 1;

//buttons script
myBtn.textMc.stext.text = "News"

myBtn.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onRelease = function() {
btnClicked = 1;
if (_root.currMovie == undefined) { 
_root.currMovie = "news"; 
_root.container.loadMovie("news.swf"); 
} else if (_root.currMovie != "news") { 
if (_root.container._currentframe >= _root.container.midframe) { 
_root.currMovie = "news"; 
_root.container.play(); 
} 
} 
} 
myBtn2.textMc.stext.text = "Gallery"

myBtn2.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn2.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn2.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn2.onRelease = function() {
btnClicked = 2;
if (_root.currMovie == undefined) { 
_root.currMovie = "gallery"; 
_root.container.loadMovie("gallery.swf"); 
} else if (_root.currMovie != "gallery") { 
if (_root.container._currentframe >= _root.container.midframe) { 
_root.currMovie = "gallery"; 
_root.container.play(); 
} 
} 
}

myBtn3.textMc.stext.text = "Music"

myBtn3.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn3.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn3.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn3.onRelease = function() {
btnClicked = 3;
//Add what you want to do here
}

myBtn4.textMc.stext.text = "Contact"

myBtn4.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn4.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn4.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn4.onRelease = function() {
btnClicked = 4;
//Add what you want to do here
}

onEnterFrame = function() {
  if(btnClicked == 1) {
	delete myBtn.onEnterFrame;
	myBtn.gotoAndStop(TOTALFRAMENUM);
  } else if(btnClicked == 2) {
	delete myBtn2.onEnterFrame;
	myBtn2.gotoAndStop(TOTALFRAMENUM);
  } else if(btnClicked == 3) {
	delete myBtn3.onEnterFrame;
	myBtn3.gotoAndStop(TOTALFRAMENUM);
  } else if(btnClicked == 4) {
	delete myBtn4.onEnterFrame;
	myBtn4.gotoAndStop(TOTALFRAMENUM);
  }
}

Edited by cupaball, 06 October 2006 - 08:55 PM.

[Ben]

//load intial movie
_root.currMovie = "news"; 
container.loadMovie(_root.currMovie+".swf");

//click news button
var btnClicked:Number;

//buttons script
myBtn.textMc.stext.text = "News"

myBtn.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn.onRelease = function() {
btnClicked = 1;
if (_root.currMovie == undefined) { 
_root.currMovie = "news"; 
_root.container.loadMovie("news.swf"); 
} else if (_root.currMovie != "news") { 
if (_root.container._currentframe >= _root.container.midframe) { 
_root.currMovie = "news"; 
_root.container.play(); 
} 
} 
} 
myBtn2.textMc.stext.text = "Gallery"

myBtn2.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn2.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn2.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn2.onRelease = function() {
btnClicked = 2;
if (_root.currMovie == undefined) { 
_root.currMovie = "gallery"; 
_root.container.loadMovie("gallery.swf"); 
} else if (_root.currMovie != "gallery") { 
if (_root.container._currentframe >= _root.container.midframe) { 
_root.currMovie = "gallery"; 
_root.container.play(); 
} 
} 
}

myBtn3.textMc.stext.text = "Music"

myBtn3.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn3.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn3.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn3.onRelease = function() {
btnClicked = 3;
//Add what you want to do here
}

myBtn4.textMc.stext.text = "Contact"

myBtn4.onRollOver = function() {
this.onEnterFrame = function() {
this.nextFrame();
}
}
myBtn4.onRollOut = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn4.onReleaseOutside = function() {
this.onEnterFrame = function() {
this.prevFrame();
}
}
myBtn4.onRelease = function() {
btnClicked = 4;
//Add what you want to do here
}

onEnterFrame = function() {
  if(btnClicked == 1) {
	delete myBtn.onEnterFrame;
	myBtn.gotoAndStop(10);
	if(myBtn2._currentframe > 1) {
	myBtn2.prevFrame();
	}
	if(myBtn3._currentframe > 1) {
	myBtn3.prevFrame();
	}
	if(myBtn4._currentframe > 1) {
	myBtn4.prevFrame();
	}
  } else if(btnClicked == 2) {
	delete myBtn2.onEnterFrame;
	myBtn2.gotoAndStop(10);
	if(myBtn._currentframe > 1) {
	myBtn.prevFrame();
	}
	if(myBtn3._currentframe > 1) {
	myBtn3.prevFrame();
	}
	if(myBtn4._currentframe > 1) {
	myBtn4.prevFrame();
	}
  } else if(btnClicked == 3) {
	delete myBtn3.onEnterFrame;
	myBtn3.gotoAndStop(10);
	if(myBtn2._currentframe > 1) {
	myBtn2.prevFrame();
	}
	if(myBtn._currentframe > 1) {
	myBtn.prevFrame();
	}
	if(myBtn4._currentframe > 1) {
	myBtn4.prevFrame();
	}
  } else if(btnClicked == 4) {
	delete myBtn4.onEnterFrame;
	myBtn4.gotoAndStop(10);
	if(myBtn2._currentframe > 1) {
	myBtn2.prevFrame();
	}
	if(myBtn3._currentframe > 1) {
	myBtn3.prevFrame();
	}
	if(myBtn._currentframe > 1) {
	myBtn.prevFrame();
	}
  }
}

its not perfect, but its the best i could do. Sorry.

[cupaball]

actually, it did work perfectly for me! Except the mouseover did work. But thanks for all your help. I will just go with the rollover effect.

Thanks alot, I appreciate everything.

Edited by cupaball, 13 October 2006 - 08:41 PM.