The basic button element in Flash can be rather limiting at times, but with the help of a movie clip and a bit of Actionscript, you can create some very interactive buttons for your Flash projects.
Rather than just having a normal up state and an over state like the default button elements, you can also add a rollout, down, and release outside state. This allows you to have buttons with complex animations that will increase the visual appeal of your Flash project.
The button you are going to make will just be a template that you can re-skin and use in any of your projects. It doesn’t look pretty yet, but it will give you a great foundation to work from. Beneath the template button is a skinned button that looks a bit nicer. It’s a small example of the kind of things you can do with it.
The first step is to make the button. If you are going to make a template like this tutorial, then a simple rectangle will do for your button. Then when you use this button in your projects, just change the elements inside the button to make it look like you want. No re-coding required! If you’re going to make a nice looking button from the get go, then create the graphics you need for your button and continue on.
Once you have created your button graphics, turn it into a movie clip by selecting it and pressing F8. Give the new symbol a name, I used ‘btn’.
Inside the button, you will now need to create the 5 states of your button. These states are outlined below:
- Up State
- Default view of the button
- Shows when no user interaction is happening
- Down State
- Shows when the left mouse button is pressed while the cursor is over the button.
- Over State
- Shows when the mouse is over the button
- Out State
- Shows when the mouse moves off of the button
- Outside State
- Shows when the left mouse button has been pressed while the mouse is over the button, then the mouse is moved off of the button and the left mouse button is released
- The end of this state should return you to the up state
- If you do not want an outside state, you should point it to the up state, because when the mouse button is pressed and released outside of the button, the roll out state is never triggered.
As you can see in the screenshot below, I have given each state its own section of frames on the timeline and a corresponding frame label for each state. At the end of the state, there is a stop action on the actions layer. This prevents the play head in Flash from progressing to the animation of the next state. The only exception to this is at the end of the out state. After you roll out, you want the button to go back to the up state, so this frame contains the code:
-
-
this.gotoAndPlay("up");
-
To show variations in my states, I just added a text field on my button and changed what the text said for each state. In your final product, you can put complex animations in for each state, just be sure that the stop action falls on the last frame of the animation for that state.
The actions on the first frame contain the code that controls the playback of the states. This would also be where you would add any other functionality to your buttons. The way this works is pretty simple, whenever the button is interacted with, it will start sending out events. The following code listens for those events and then tells the button what to do for each event. It is very basic right now, just telling it to play the frame label that corresponds to the state. It is best to use frame labels rather than frame numbers so that you can easily change the animations without having to go back and alter the code.
-
-
this.onRollOver = function(){
-
this.gotoAndPlay("over");
-
}
-
this.onRollOut = function(){
-
this.gotoAndPlay("out");
-
}
-
this.onPress = function(){
-
this.gotoAndPlay("down");
-
}
-
this.onRelease = function(){
-
this.gotoAndPlay("over");
-
/* add code here if you would like your button to have greater functionality on release. For example, you could call getURL() to open up another web page.
-
*/
-
}
-
this.onReleaseOutside = function(){
-
this.gotoAndPlay("outside");
-
}
-
And there you have it! Five states in your button template that you can easily drop into any Flash project.
Update for Actionscript 3.0!
Here is a slightly simplified version of the above code to work in Actionscript 3.
-
-
this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
-
this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
-
this.addEventListener(MouseEvent.CLICK, onRelease);
-
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
-
-
function onMouseOver(e:MouseEvent){
-
e.target.gotoAndPlay("over");
-
}
-
function onMouseOut(e:MouseEvent){
-
e.target.gotoAndPlay("out");
-
}
-
function onRelease(e:MouseEvent){
-
e.target.gotoAndPlay("over");
-
}
-
function onMouseDown(e:MouseEvent){
-
e.target.gotoAndPlay("down");
-
}
-
RSS/Atom
Subscribe by Email
27 responses so far
1 Lena // Jun 8, 2007 at 3:08 pm
It is not exactly clear to me either you are using button instance in this example or movie clip. How do you connect the code with the button instance?
Thank you,
Lena
2 Alex // Jun 8, 2007 at 5:09 pm
Lena, you will be putting this code inside of a movie clip, not a button. Is what this code will do is give a movie clip the same kind of abilities that a standard button element has.
All you need to do is put the code on the first frame of your movie clip.
3 Lena // Jun 11, 2007 at 2:33 pm
Thank you!
4 Nike // Jun 27, 2007 at 8:38 am
Hi, where can I find fla file?
5 Alex // Jun 27, 2007 at 10:03 am
I’ll post an fla to the downloads section later on today.
Update:
An fla has been added to the downloads section, for you, so go have a look. You’ll also be able to find source files for other tutorials there.
6 Nike // Jun 28, 2007 at 1:30 am
Thank u Alex. All the best!
7 lou // Jul 13, 2007 at 1:02 pm
i added “gotoAndPlay( frame number of the frame that i want);” at the onRealse function after the comment that u did but it didn’t work. can u help me? thanks! Great tutorial by the way! Very helpful!
8 Alex // Jul 13, 2007 at 1:09 pm
Hey Lou, is the frame you want to play inside the button movie clip? Or is it on the parent timeline? You might need to use _parent.gotoAndPlay(frame#)
FYI, its generally a better idea to use a frame label, and have the gotoAndPlay point to that label. That way if you add more frames in for whatever reason (like changing an animation) it won’t throw off you gotoAndPlay, since the label would move along as well.
9 lou // Jul 14, 2007 at 8:14 am
I got it. thanks Alex! you’ve been a great help!
10 deeq // Jul 28, 2007 at 9:58 am
i have a question how do you create a simple timeline for actionscipt 3 ….please help me
11 Alex // Aug 5, 2007 at 9:49 pm
deeq, what do you mean by creating a simple timeline for Actionscript 3? Do you want to create a similar button in Actionscript 3 rather than in 2?
12 Gena // Nov 5, 2007 at 3:28 pm
i want to create an advanced button in AS3…i need the following states:
-up
-down
-over
-active
-inactive
the active state should play when a sound completes…
the inactive state should play WHILE i’m waiting fo the sound to finish playing…
the up state will play when i have a certain variable = a certain value…
any suggestions??
13 Jonathan // Nov 12, 2007 at 4:15 pm
Hi Alex,
I have the same question. How do you do the exact same thing in Actionscript 3.0?
Thanks in advance.
14 Alex // Nov 23, 2007 at 4:26 pm
I’ve updated the post to include code for multi-state buttons in Actionscript 3.
15 Scott // Nov 26, 2007 at 7:27 pm
I am trying to get button(s) sound(s) to stop if the mouse is no longer hovering over the given button, could I use what you have here to do so or is there an easier/simpler way? Thanks
16 Scott // Nov 26, 2007 at 7:28 pm
the sounds/buttons are on my site at http://www.belmultimedia.com
17 Alex // Nov 27, 2007 at 9:11 am
Scott, if you put the audio clip in the button state (after the label and before the stop action) and set it to stream, it will stop playing when you roll off of the button.
Hope that helps.
18 Scott // Nov 27, 2007 at 8:12 pm
I ended up using:
on (release) {
gotoAndPlay(47);
}
on (rollOver) {
link = new Sound()
link.attachSound(”026″)
_root.link.start()
}
on (rollOut) {
stopAllSounds();
}
I am now working on a way of controlling a clip within a clip pausing and then starting again from the same frame (I am using actionscript 1.0
in version 6) Thanks!
19 Alex // Nov 28, 2007 at 8:48 am
Scott, glad you got it working. Sorry I didn’t know you were using AS1, would have given you different code in that case.
I’m not sure if you’re planning to do this for your site or not, but I would recommend that you also add text below your buttons at least on rollover, just in case people don’t have sound on. If you don’t do that they wont be able to navigate your site very well.
20 Bart // Dec 4, 2007 at 3:30 pm
Hi guys, does anyone know how to extend this script in AS3 and implement an active state PLUS something similar to the “HIT”-Button layer? I have been playing around a while now and did not come to a solution concerning the “HIT” area. I would like to be able to draw a mask or just a rectangle and define this as the valid HIT-Area. Any ideas?
21 Cass // Feb 22, 2008 at 3:49 pm
treid to work through your file the inculded as3, and i still couldnt figure it out, could you possibly point me in another direction or thread for deatil instrauctions how to make this.
22 marin // Mar 14, 2008 at 8:59 pm
i don’t know if it is just me, but i can not get this to work in AS3. Can you please help me out?
23 pAUL // Apr 9, 2008 at 6:39 pm
Genius, select the button, actions, on, roll out, stop all sounds. Duh.
24 Cristi // Apr 20, 2008 at 8:45 am
Thanks for this great script, but how do I add a link to the finished button?
25 Cristi // Apr 20, 2008 at 8:53 am
Bart, just make a new layer (you can call it hit area) on which you draw your “hit area” then aply 0 (zero) alpha to it. (Insert new layer, draw let’s say a rectangle to cover your desired hit area, click your drawn rectangle and select 0 (zero) from the alpha opacity slider)
26 James // May 12, 2008 at 4:16 am
Hi Alex, I have a similar problem as lou, only I’ve tried using _parent.gotoAndPlay(frame#) but it’s not happening. I’ve made a five state button, but when I add it to the main timeline and put an action to gotoandplay scene 2 frame 1 nothing happens.
Please help.
27 James // May 12, 2008 at 5:27 am
Hi Alex, I can’t add an action that takes me to the beginning of the next scene to an instance of my movie clip button. Or any other action. Do I need to convert it to a button? Do I need to add code to the button it’s self? Can you help?
Leave a Comment