Be a Supporter!

AS: Animated Buttons

  • 7,896 Views
  • 31 Replies
New Topic Respond to this Topic
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
AS: Animated Buttons 2005-08-28 17:29:24 Reply

AS: Main, CHEESESTEAK!!!!

TUTORIAL MX 2004+ complaint, uses symbols and you should also know how to use simple frame actions explained here

Hey, this has been asked several times before so I figured I'll explain it this will cover simple AS used to create animated buttons that play an animation when you roll out of them, and one when you press them

for starters, use a movieclip insead of a button, this is because movieclips let us manipulate frames better then buttons

create 4 frames in this movieclip you have created:

frame 1 is a static image containing how the button looks when there is nothing associated with it happening
frame 2 is an animation (movieclip) of it when you rollOver it, (like "over" in buttons)
frame 3 is an animation (movieclip) of it when you rollOut (this is the part buttons don't have)
frame 4 is an animation of it when you press it (like "down" in buttons)

after all your animations is set, go to the animation in frame 2 (the "over") and on it's last frame put the following actions:

stop();

this is to stop it from constantly playing, repeat this process for the animation in frame 4

now go to the animation in frame 3 (the "rollOut" part) and go to the last frame, put these actions in it:

_parent.gotoAndStop(1);

then give it (the main movieclip) these actions
onClipEvent(load){
stop();
}
on(rollOver){
gotoAndStop(2);
}
on(rollOut){
gotoAndStop(2);
}
on(press){
gotoAndStop(4);
}

hope this helped :)

Denvish
Denvish
  • Member since: Apr. 25, 2003
  • Offline.
Forum Stats
Member
Level 46
Blank Slate
Response to AS: Animated Buttons 2005-08-28 17:32:44 Reply

Yup. I've always used MCs in preference to buttons, they're just a lot more versatile. Probably comes from starting out using Flash to build websites.


- - Flash - Music - Images - -

BBS Signature
Mogly
Mogly
  • Member since: Sep. 5, 2004
  • Offline.
Forum Stats
Member
Level 25
Animator
Response to AS: Animated Buttons 2005-08-28 19:08:23 Reply

your tutorials never stop amazing me : )


WEBSITE
BLOG ~ Dont fuck around with my dog. All that I can see I steal. ~
NG FFR ~ Automatic for the people.

BBS Signature
Glaiel-Gamer
Glaiel-Gamer
  • Member since: Dec. 28, 2004
  • Offline.
Forum Stats
Member
Level 28
Game Developer
Response to AS: Animated Buttons 2005-08-28 19:16:55 Reply

mmmmmmm......... as main cheesesteak........

ReNaeNae
ReNaeNae
  • Member since: Sep. 1, 2004
  • Offline.
Forum Stats
Supporter
Level 29
Blank Slate
Response to AS: Animated Buttons 2005-08-28 19:35:50 Reply

...so, say you have a button set up the way you described... on over you want a long box to slide out from behind it... and when you move away from the button, the long box would retract. How would you get it to retract smoothly... from any point... if the viewer moves the mouse away before the long box is fully out? ...I know I didn't explain that very well, but hopefully you get what I mean!

Denvish
Denvish
  • Member since: Apr. 25, 2003
  • Offline.
Forum Stats
Member
Level 46
Blank Slate
Response to AS: Animated Buttons 2005-08-28 19:43:32 Reply

At 8/28/05 07:35 PM, ReNaeNae wrote: ...so, say you have a button set up the way you described... on over you want a long box to slide out from behind it... and when you move away from the button, the long box would retract. How would you get it to retract smoothly... from any point... if the viewer moves the mouse away before the long box is fully out? ...I know I didn't explain that very well, but hopefully you get what I mean!

You're getting a little more complex there. I'd probably have a slider MC inside the 'button', and use something like this:

onClipEvent(rollOver){
slidingout=1;
}
onClipEvent(rollOut, dragOut, releaseOutside){
slidingout=0;
}
onClipEvent(enterFrame){
if(!slidingout){
if(slider._x >0){ slider._x-=3;}
}else{
if(slider._x <100){ slider._x+=3;}
}
}

Haven't tested it.


- - Flash - Music - Images - -

BBS Signature
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Animated Buttons 2005-08-28 19:49:03 Reply

At 8/28/05 07:35 PM, ReNaeNae wrote: but hopefully you get what I mean!

I did, it IS a bit more complex, you can give all the movies instance names and play with _currentframe and _totalframes or you could make it reverse instaed of stopping it
instead of putting the actions on the movieclip do the following:

only have 1 movieclip
in it have only the rollOver animation,
(I'm assuming the over and out animations are reversed to eachother)
use this code

onClipEvent(load){
stop();
}
onClipEvent(enterFrame){
if(dir=="over"){
nextFrame();
}else if(dir=="out"){
prevFrame();
}
}
on(rollOver){
dir="over";
}
on(rollOut){
dir="out";
}

with this script I'm actually reversing the playback instead of having different movieclips for over and out

Mogly
Mogly
  • Member since: Sep. 5, 2004
  • Offline.
Forum Stats
Member
Level 25
Animator
Response to AS: Animated Buttons 2005-08-29 04:28:05 Reply

i just noticed you made a mistake (inglors first post i mean), on the final script bit instead of

on roll out goto and stop (3)

you had (2)

nothing much really but newbies wont notice this and think theres just a problem, or am i just getting something wrong?


WEBSITE
BLOG ~ Dont fuck around with my dog. All that I can see I steal. ~
NG FFR ~ Automatic for the people.

BBS Signature
Rhinan
Rhinan
  • Member since: May. 19, 2005
  • Offline.
Forum Stats
Member
Level 15
Game Developer
Response to AS: Animated Buttons 2005-12-03 14:35:04 Reply

At 8/28/05 05:32 PM, Denvish wrote: Yup. I've always used MCs in preference to buttons, they're just a lot more versatile. Probably comes from starting out using Flash to build websites.

yeah i guess that's true, but here's two things:
1) The only positive change with normal buttons, is that you have a RollOut fuctions, but that's not so important is it?
2) MY BUTTON WON'T WORK!!! When i hold my mouse over it, it goes to the fourth animation and stops at his first frame.

Please, anyone give an answer to the second note (i was so kind not making another topic just for this, and avoid irritating people =D).

hoping for response,
--Rhinan

Xolo
Xolo
  • Member since: Sep. 29, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Animated Buttons 2005-12-05 18:19:36 Reply

this dosent make any sense! how teh hell are u suppost to animate it in one frame!?

authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: Animated Buttons 2005-12-05 18:26:31 Reply

At 12/5/05 06:19 PM, Bounty-Hunter-Clock wrote: this dosent make any sense! how teh hell are u suppost to animate it in one frame!?

put an animated MC in that one frame...


BBS Signature
Madferit
Madferit
  • Member since: Jul. 29, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Animated Buttons 2005-12-05 19:11:03 Reply

At 12/5/05 06:26 PM, authorblues wrote:
At 12/5/05 06:19 PM, Bounty-Hunter-Clock wrote: this dosent make any sense! how teh hell are u suppost to animate it in one frame!?
put an animated MC in that one frame...

lol, n00b

Rhinan
Rhinan
  • Member since: May. 19, 2005
  • Offline.
Forum Stats
Member
Level 15
Game Developer
Response to AS: Animated Buttons 2005-12-13 11:51:52 Reply

then give it (the main movieclip) these actions
onClipEvent(load){
stop();
}
on(rollOver){
gotoAndStop(2);
}
on(rollOut){
gotoAndStop(2);
}
on(press){
gotoAndStop(4);
}

hope this helped :)

shouldn't it be:

onClipEvent(load){
this.stop();
}
on(rollOver){
this.gotoAndStop(2);
}
on(rollOut){
this.gotoAndStop(2);
}
on(press){
this.gotoAndStop(4);
}

huh? please tell me, 'cause it ain't workin' now

Johnny
Johnny
  • Member since: Apr. 17, 2004
  • Offline.
Forum Stats
Member
Level 24
Blank Slate
Response to AS: Animated Buttons 2005-12-15 02:43:39 Reply

At 8/28/05 07:35 PM, ReNaeNae wrote: ...so, say you have a button set up the way you described... on over you want a long box to slide out from behind it... and when you move away from the button, the long box would retract. How would you get it to retract smoothly... from any point... if the viewer moves the mouse away before the long box is fully out? ...I know I didn't explain that very well, but hopefully you get what I mean!

Someone correct me, but could you use

CurrentFrame --

I know the syntax is screwy, and no MC is referenced, but would that work?


Perpetually looking for time to return to the arts.

BBS Signature
Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Animated Buttons 2005-12-15 05:45:00 Reply

At 12/15/05 02:43 AM, Johnny_Krysys wrote: CurrentFrame --
I know the syntax is screwy, and no MC is referenced, but would that work?

No. _currentframe is read only. But you can use it like this:

gotoAndStop (_currentframe-1);

But in that case, you would rather use:

prevFrame ();

In the sense that Renae asked, a valid way could be having this on the movie clip:

on (rollOver, dragOver) {
delete onEnterFrame;
play ();
}
on (rollOut, dragOut) {
stop ();
this.onEnterFrame = function () {
prevFrame ();
};
}

Then on the first frame of the movie clip, you would have:

delete onEnterFrame;

And on the last:

stop ();


BBS Signature
Goldencat
Goldencat
  • Member since: Aug. 2, 2005
  • Offline.
Forum Stats
Member
Level 03
Blank Slate
Response to AS: Animated Buttons 2006-01-14 13:58:03 Reply

At 8/28/05 05:29 PM, Inglor wrote:
then give it (the main movieclip) these actions

What do you mean by "the main movieclip"? I just opened up the movieclip that has all of the other movieclips and I put it on the first frame of that movieclip, as I can see nowhere else to put it. When I do that it messes up.

Here are the errors:

**Error** Symbol=Button, layer=Layer 1, frame=1:Line 2: Clip events are permitted only for movie clip instances
onClipEvent(load){

**Error** Symbol=Button, layer=Layer 1, frame=1:Line 5: Mouse events are permitted only for button instances
on(rollOver){

**Error** Symbol=Button, layer=Layer 1, frame=1:Line 8: Mouse events are permitted only for button instances
on(rollOut){

**Error** Symbol=Button, layer=Layer 1, frame=1:Line 11: Mouse events are permitted only for button instances
on(press){

Total ActionScript Errors: 4 Reported Errors: 4

Goldencat
Goldencat
  • Member since: Aug. 2, 2005
  • Offline.
Forum Stats
Member
Level 03
Blank Slate
Response to AS: Animated Buttons 2006-01-14 14:35:06 Reply

Okay, I've fixed the problem I was having earlier by clicking on my button while in the main timeline, selecting "actions", and copying and pasting. I was messing up because of a typo that was listed in another post. Now I'm wondering how I can make my button into a button, that is, how can I make it go somewhere? I changed the part where the original topic starter put:

on(press){
gotoAndStop(4);
}

into:

on(press){
gotoAndPlay("Scene 1",2);
}

and I'm having no luck in making it work. I went to the link that the topic starter gave (the one about the gotoAndPlay commands) and that thread said that gotoAndPlay commands won't work within movie clips. So it seems like I'm totally screwed. I would appreciate help on this.

Devenger
Devenger
  • Member since: Dec. 24, 2004
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Animated Buttons 2006-01-14 14:44:18 Reply

Why not try replacing the gotoAndPlay(4) with

on(press){
_root.gotoAndPlay("Scene 1",2);
}

Otherwise you are telling the movieclip to go to a different scene, which won't at all work. :\


I'm back! on a temporary basis. No-one can remember who I am! but I don't really mind.

Claxor
Claxor
  • Member since: Oct. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: Animated Buttons 2006-01-14 17:39:53 Reply

If you name the frame labels "_up", "_over" and "_down", adding an on(press) or an action at the like will make it automaticly go to the right frame (I think). I didn't read through the whoe tutorial properly, so exuse me if im off subject :/


BBS Signature
Rookie209
Rookie209
  • Member since: Feb. 20, 2006
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to AS: Animated Buttons 2006-03-05 00:54:01 Reply

I keep getting an error message that's telling me that these actions belong to a button instance clip.

BlackmarketKraig
BlackmarketKraig
  • Member since: Dec. 8, 2004
  • Offline.
Forum Stats
Member
Level 32
Artist
Response to AS: Animated Buttons 2006-03-05 02:23:16 Reply

At 3/5/06 12:54 AM, Rookie209 wrote: I keep getting an error message that's telling me that these actions belong to a button instance clip.

Did you change anything? They should be applicable to any movie clip.


This sig is 100% effective protection from all hexes, curses, evil spirits and bad karma. Guaranteed.

BBS Signature
Rookie209
Rookie209
  • Member since: Feb. 20, 2006
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to AS: Animated Buttons 2006-03-05 03:56:45 Reply

At 3/5/06 02:23 AM, BlackmarketKraig wrote:
At 3/5/06 12:54 AM, Rookie209 wrote: I keep getting an error message that's telling me that these actions belong to a button instance clip.
Did you change anything? They should be applicable to any movie clip.

No.

Goldencat
Goldencat
  • Member since: Aug. 2, 2005
  • Offline.
Forum Stats
Member
Level 03
Blank Slate
Response to AS: Animated Buttons 2006-03-11 19:03:49 Reply

At 1/14/06 02:44 PM, Devenger wrote: Why not try replacing the gotoAndPlay(4) with

on(press){
_root.gotoAndPlay("Scene 1",2);
}

Otherwise you are telling the movieclip to go to a different scene, which won't at all work. :\

I've tried that and it doesn't work. Whenever I click on my button it just sits there looking stupid even if I explicitely add code that makes it go somewhere.

I tried putting these codes on frame four of my button movie-clip and none of them work:

gotoAndPlay("Scene 1", 434);

_root.gotoAndPlay("Scene 1", 434);

_parent.gotoAndPlay("Scene 1", 434);

this._parent.gotoAndPlay("Scene 1", 434);

I've tried adding these codes to the entire movie clip in the place of " on(press){
gotoAndStop(4);
} "
that inglor had as his last code thing:

on(press){
_root.gotoAndPlay("Scene 1", 434);
}

on(press){
_parent.gotoAndPlay("Scene 1", 434);
}

on(press){
this._parent.gotoAndPlay("Scene 1", 434);
}

Absolutely nothing works. I don't know what to do. I've tried everything and flash doesn't want to acknowledge any of my code and do what I want it to do.

Goldencat
Goldencat
  • Member since: Aug. 2, 2005
  • Offline.
Forum Stats
Member
Level 03
Blank Slate
Response to AS: Animated Buttons 2006-03-11 19:19:35 Reply

At 3/11/06 07:03 PM, SugarHill wrote:
At 1/14/06 02:44 PM, Devenger wrote:
Absolutely nothing works. I don't know what to do. I've tried everything and flash doesn't want to acknowledge any of my code and do what I want it to do.

Okay, I've got it to work now. My problem was that I was using:

on(press){
_root.gotoAndPlay("Scene 1", 434);
}

when I should've been using:

on(press){
_root.gotoAndPlay(434);
}

Apperently if you put the scene in with the frame, then it doesn't work. That is incredibly fucking stupid on the part of flash, but at least I got it to work.

ChocloMan
ChocloMan
  • Member since: Dec. 17, 2003
  • Offline.
Forum Stats
Member
Level 14
Blank Slate
Response to AS: Animated Buttons 2006-03-11 19:24:20 Reply

Why, thanks. I've always wanted to know how to do that...


Egotist, n. A person of low taste, more interested in himself than in me.
-Ambrose Bierce
"This sig, is fucking cool."

BBS Signature
BlackmarketKraig
BlackmarketKraig
  • Member since: Dec. 8, 2004
  • Offline.
Forum Stats
Member
Level 32
Artist
Response to AS: Animated Buttons 2006-03-12 23:31:38 Reply

I've been using this tutorial for animated buttons for quite some time and have been pleased with the results. Using MC's as a replacement for buttons adds a lot of funcionality that wouldn't be availible otherwise.

However, I'd like to know if there is an easy way (there must be) to define the hit area for the main MC. I have always used a shape on the top layer with 0% alpha fill to be my hit area and use it on all frames of the MC, but now I would like some of the MC's animation to go beyond the defined hit area and not have it as part of the button. The only way I know how to do this is by having two separate MC's, one for the hit area and another for the animation linked with action script, but it just seems kind of clunky and inefficient. Is there an easier way?


This sig is 100% effective protection from all hexes, curses, evil spirits and bad karma. Guaranteed.

BBS Signature
Kawawawa
Kawawawa
  • Member since: Mar. 14, 2003
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS: Animated Buttons 2006-03-22 02:43:37 Reply

Ok, now what exactly do you do to make it go somewhere? Do you have to animate that in the 'Down' frame as well? And what about going back to a main screen? Sorry, I'm new to AS.

DeltaSt0rm
DeltaSt0rm
  • Member since: Jul. 29, 2006
  • Offline.
Forum Stats
Member
Level 04
Blank Slate
Response to AS: Animated Buttons 2006-10-14 09:50:07 Reply

Nice tut :)

howelone
howelone
  • Member since: Jun. 15, 2004
  • Offline.
Forum Stats
Member
Level 14
Blank Slate
Response to AS: Animated Buttons 2006-10-23 01:53:39 Reply

The button works great; the animations play smoothly and it looks great. But I don't know how to make the button do stuff. Like where would I put the play(); command to make the button a start/stop button?

Sorry for the noob question

Mike

zjD
zjD
  • Member since: Oct. 22, 2006
  • Offline.
Forum Stats
Member
Level 02
Blank Slate
Response to AS: Animated Buttons 2006-10-23 03:17:24 Reply

@ReNaeNae (and others):

I'm new here, so I don't want to intrude... but here's a timeline-less AS2 approach.

1- Make your graphic; turn it into a movieclip. Right-click on it in the library, select "Linkage...", select Export for Actionscript, and fill in the AS 2.0 Class with "BounceBox." Identifier doesn't really matter.

2- Make your slider inside that movieclip. Make it a movieclip as well; give it an instance name of "bar". Line up the centers of the two movieclips.

3. Now make an external AS file called BounceBox (in the same folder), and put this code in it:

class BounceButton extends MovieClip{

var bar:Object;
var over:Boolean = false;

// play with these three to get the effect you want
var speed:Number = .15
var extendTo:Number = 50;
var retractTo:Number = 0;

function onRollOver(){over = true;}
function onRollOut(){over = false;}

function onEnterFrame(){
var target = over ? extendTo : retractTo;
var dist:Number = target - this.bar._x;
if (dist > 1 || dist < -1){
this.bar._x += (target - this.bar._x) * speed;
}
}
}

4- Save.

5. Test.

6. Voila. No timelines. Now mess with all those number values at the top of the class and see what happens.