How do you make these buttons???

[Froth23]

I am baffled by the way the author has made his splash page buttons on this website: http://www.billybussey.com/

I have never been able to script a button to act this way. What I am talking about is where you hover your mouse over the button, then take it off before it finishes its "over" animation, it dosent go immediatly to the "up" position, it simply reverses its animation, making a very smooth transition, no matter the location of the clip. I usually make a button by creating a movie clip, and then in action script telling it to play where I want the "over" animation to start, and the "up" animation to start. For example:

on (rollOver) {
_root.pics.play();
gotoAndPlay(2);
}
on (rollOut) {
_root.pics.play();
gotoAndPlay(21);
}

Is there some sort of modification I can make to this script so it will act the way the buttons do on http://www.billybussey.com?

Thanks,
Dylan

[Genesis F5]

It's not really so much the code as it is the frames/animation that does it. From what I see, it looks like he changes the brightness depending on what frame the animation's on. The code is a major part of it though.

I'll have an example for you in a second.

-genesis f5 (mx)

[Froth23]

If you see the distortion around the edges, it looks like he rendered that clip in some 3d program, then brought the animation into flash and scripted it up like mad..

Thanks for a fast reply!

[hijkee]

There are Two MC's that make up this button. The Black one and the Blue one. The black one is under the Blue one. The blue one is just fading its _alpha on rollover. This is done with actionScript. Somthing like:

// CONTORLS MC1'S FADE
easeRate = 5;
UP_alpha = 100;
DOWN_alpha = 0;
mc1.onRollOver = function() {
	tween_DOWN = function () {
		var v1 = this;
		v1._alpha += (DOWN_alpha-v1._alpha)/easeRate;
		if (DOWN_alpha+v1._alpha<1) {
			v1._alpha = end_alpha;
			v1._alpha;
			delete v1.onEnterFrame;
		}
	};
	mc1.onEnterFrame = tween_DOWN;
};
mc1.onRollOut = function() {
	tween_UP = function () {
		var v2 = this;
		v2._alpha += (UP_alpha-v2._alpha)/easeRate;
		if (UP_alpha+v2._alpha<1) {
			v2._alpha = end_alpha;
			v2._alpha;
			delete v2.onEnterFrame;
		}
	};
	mc1.onEnterFrame = tween_UP;
};

Info on how to create the hovering text can be found here:
http://www.kirupa.com/developer/mx/captions.htm



Hijkee

[Genesis F5]

Nope , if you take a close look at the button while it's animating, you can see the rendered lighting on it. It's a 3D animation broken apart into frames, and then dealt with like in my example. Your way would work too, though.

I hope this helps.

-genesis f5 (mx)

[Froth23]

Thanks a lot guys!! I must say that I like genesis' script better since its about 20 lines shorter haha, but both are good methods! My questions are finally answered!

[jlwood]

Here is an even easier way:

1. create the button as a movie clip;
2. make it animate from normal to rollover state;
3. place the movie clip on stage;
4. add this script to movieclip instance;

if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
this.nextFrame();
} else {
this.prevFrame();
}
}

I hope that helps.