how to make animated buttons?

2003-10-04

Hi, people.

I am new to this community, but I am also glad to have met, people who like webdesign as much as I do.

I have a question, I was wondering how do you make animated buttons?
I know how to make simple buttons and all kinds of them, the problem is how do you animate them so that they do something like the Ultra Shock, Navigation Bar,
/\
|
|
|- up there.

Thx, in advance.

//Ren

pastapuck · 2003-10-04 #2

Before you learn something as advanced as the Ultrashock navigation bar, I suggest you learn the basic animated button. I created a tutorial on it, why don't you check it out: http://www.oriongraphix.com/html/animatedbuttons.html

Renjamin · 2003-10-04 #3

Thank you, man!, although I will one day do the ultrashock bar, but thx.

Renjamin · 2003-10-04 #4

thank you man, I didn't even break a sweat.

pastapuck · 2003-10-04 #5

Well, if you feel comfortable with that, you can always try to do the Ultrashock bar now. It involves some good old fashioned actionscript. You need to learn how to do rollouts. You can search google for rollouts using telltarget, and then rollouts using a gotoAndPlay action. Either way, that's what you need to learn. Good luck

www.oriongraphix.com/misc/rollout.fla - Here's an old rollout I did, you should take a look at the actions and such

Renjamin · 2003-10-04 #6

Thank you, once again.. I really appreciate it.

Renjamin · 2003-10-04 #7

I have another question for ya, I am working on designing a logo, I was wondering how would you be able to make that effect... when you put your mouse over my logo that it does the same thing as, Ultrashock LOGO.?

I hope I am not bothering ya... and thx again for that rollout .fla file.

pastapuck · 2003-10-05 #8

No problem, Renjamin.

I am guessing that the US logo is a movie clip. Inside the movie clip the first frame has a stop action so it does not continuousley play the highlight animation. From maybe frame 2-30, you have the masking effect (highlight effect). If you do not know how to do this effect I also made a tutorial on text masking. http://www.oriongraphix.com/html/textmasking.html

Once you have created your text mask from frame 2-30, apply another stop action at frame 30 (end of the animation). So, now you just need to make it so when the user rolls over the movie clip it goes to frame 2 and plays the animation. However notice since we applied the stop actions at frame 1 and 30 it will not keep playing the animation - only once.

To do the rollover effect you would need to write some simple actionscript. You will need it so when the user rolls over the logo, it goes to frame 2 and plays. This probably isn't exactly how they did it, but relatively close. Hope this helps.

Renjamin · 2003-10-05 #9

Thank you once again.

Renjamin · 2003-10-05 #10

I did it a little differently, but it worked. Anyways, I cannot thank you enough... *if we ever meet man, I'm buying the beer*

Renjamin · 2003-10-05 #11

I guess since we're buddies, I wanted to ask you, how would you be able to make those, music selection menus in flash, so that people can stop, play, and switch different music.

I know how to stop it.... in actionscript its <stop all sounds>, but when I want to play something, what do I put in the play(), or when I want to cycle through different tracks... and also how do you do, that animation, where it shows you the music, beat and stuff...?

Thx man, you're really good Pal.

pastapuck · 2003-10-05 #12

No problem once again

Being able to switch through tracks is a much more complicated issue. I found this link to be very informative: http://www.kennybellew.com/

Good luck

Renjamin · 2003-10-05 #13

Thx, dude. Heh, you're like a teacher.

Goten · 2003-10-05 #14

Originally posted by Renjamin
Thx, dude. Heh, you're like a teacher.

Pasta is a good boy

Renjamin · 2003-10-06 #15

hehe...

JMark · 2003-10-06 #16

Yea, but where's the yogurt. He gave NO yogurt during his instruction!

Renjamin · 2003-10-06 #17

should he?..

k1lo · 2003-10-07 #18

Even though I didn't ask any questions, I learned some stuff. Newbies like me really look up to people like you, pasta, when you help out like that

.

jingledale · 2009-06-30 #19

Mr. Puck, if you're still in the room would you have a second to look at my question (about animated navigation) and see if you could guide me, please?

I think my problem is a simple one but I can't manage to fix it. Would someone take a look and teach me to fish?

I have four items in a vertical nav bar (Home, About, Portfolio, Contact), the words are all flush left and green in color. All I want is for each of them to slide to the right and turn white upon MOUSE_OVER, then slide back to the left, where they began, upon MOUSE_OUT.

When they're at the right and White, I want them to bring up their corresponding page when clicked. But if they're not clicked, I just want them to stay to the right as long as the visitor is mousing over them and then return to the left upon MOUSE_OUT.

I'm close but I can't quite finish it right. I've attached the FLA file. For simplicity I only have the HOME button in there. Hopefully I can just apply the right code the the other three buttons once I know what it is.

Thanks to all of you who're willing to share your knowledge.

"Why is this so dang difficult?!" he said, hands raised in supplication.

Thanks,

Jingledale
Attached Files
File Type: zip nav2.fla.zip (15.4 KB, 0 views)

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Flash > Flash Newbie • how to make animated buttons?


		You are currently viewing our website as a guest which gives you limited access to forums, files and other resources. Click here to join now for free, and start interacting with our members, download files and much more! Click here if you are looking for our Flash files and other professional assets.

	pastapuck	2003-10-04 #2
	Before you learn something as advanced as the Ultrashock navigation bar, I suggest you learn the basic animated button. I created a tutorial on it, why don't you check it out: http://www.oriongraphix.com/html/animatedbuttons.html

	Renjamin	2003-10-04 #3
	Thank you, man!, although I will one day do the ultrashock bar, but thx.

	Renjamin	2003-10-04 #4
	thank you man, I didn't even break a sweat.

	pastapuck	2003-10-04 #5
	Well, if you feel comfortable with that, you can always try to do the Ultrashock bar now. It involves some good old fashioned actionscript. You need to learn how to do rollouts. You can search google for rollouts using telltarget, and then rollouts using a gotoAndPlay action. Either way, that's what you need to learn. Good luck www.oriongraphix.com/misc/rollout.fla - Here's an old rollout I did, you should take a look at the actions and such

	Renjamin	2003-10-04 #6
	Thank you, once again.. I really appreciate it.

	Renjamin	2003-10-04 #7
	I have another question for ya, I am working on designing a logo, I was wondering how would you be able to make that effect... when you put your mouse over my logo that it does the same thing as, Ultrashock LOGO.? I hope I am not bothering ya... and thx again for that rollout .fla file.

	pastapuck	2003-10-05 #8
	No problem, Renjamin. I am guessing that the US logo is a movie clip. Inside the movie clip the first frame has a stop action so it does not continuousley play the highlight animation. From maybe frame 2-30, you have the masking effect (highlight effect). If you do not know how to do this effect I also made a tutorial on text masking. http://www.oriongraphix.com/html/textmasking.html Once you have created your text mask from frame 2-30, apply another stop action at frame 30 (end of the animation). So, now you just need to make it so when the user rolls over the movie clip it goes to frame 2 and plays the animation. However notice since we applied the stop actions at frame 1 and 30 it will not keep playing the animation - only once. To do the rollover effect you would need to write some simple actionscript. You will need it so when the user rolls over the logo, it goes to frame 2 and plays. This probably isn't exactly how they did it, but relatively close. Hope this helps.

	Renjamin	2003-10-05 #10
	I did it a little differently, but it worked. Anyways, I cannot thank you enough... if we ever meet man, I'm buying the beer

	Renjamin	2003-10-06 #15
	hehe...

	Renjamin	2003-10-05 #11
	I guess since we're buddies, I wanted to ask you, how would you be able to make those, music selection menus in flash, so that people can stop, play, and switch different music. I know how to stop it.... in actionscript its <stop all sounds>, but when I want to play something, what do I put in the play(), or when I want to cycle through different tracks... and also how do you do, that animation, where it shows you the music, beat and stuff...? Thx man, you're really good Pal.

	pastapuck	2003-10-05 #12
	No problem once again Being able to switch through tracks is a much more complicated issue. I found this link to be very informative: http://www.kennybellew.com/ Good luck

	Renjamin	2003-10-05 #13
	Thx, dude. Heh, you're like a teacher.

	Goten Creative Assets	2003-10-05 #14
	Originally posted by Renjamin Thx, dude. Heh, you're like a teacher. Pasta is a good boy

	JMark	2003-10-06 #16
	Yea, but where's the yogurt. He gave NO yogurt during his instruction!

	k1lo	2003-10-07 #18
	Even though I didn't ask any questions, I learned some stuff. Newbies like me really look up to people like you, pasta, when you help out like that .

	jingledale	2009-06-30 #19
	Mr. Puck, if you're still in the room would you have a second to look at my question (about animated navigation) and see if you could guide me, please? I think my problem is a simple one but I can't manage to fix it. Would someone take a look and teach me to fish? I have four items in a vertical nav bar (Home, About, Portfolio, Contact), the words are all flush left and green in color. All I want is for each of them to slide to the right and turn white upon MOUSE_OVER, then slide back to the left, where they began, upon MOUSE_OUT. When they're at the right and White, I want them to bring up their corresponding page when clicked. But if they're not clicked, I just want them to stay to the right as long as the visitor is mousing over them and then return to the left upon MOUSE_OUT. I'm close but I can't quite finish it right. I've attached the FLA file. For simplicity I only have the HOME button in there. Hopefully I can just apply the right code the the other three buttons once I know what it is. Thanks to all of you who're willing to share your knowledge. "Why is this so dang difficult?!" he said, hands raised in supplication. Thanks, Jingledale Attached Files File Type: zip nav2.fla.zip (15.4 KB, 0 views)