download mcb.fla

This article shows how to create a MovieClip symbol that behaves like a button. Why would you want to do this? Well, for one thing, the Button symbol is very limited, especially when it comes to actionscript. To put it bluntly, you can't use actionscript to tell anything inside a button symbol instance what to do. The good news, though, is that the MovieClip symbol can do anything that the Button symbol can do, and then some!

The Elusive Name for it (what to call it???)

For the longest time now, I've realized that MovieClip symbol instances are far superior to Button symbol instances. You can make MovieClips that behave like buttons. Also for the longest time, I've realized that I have been calling my MovieClip instances "buttons" for lack of a better word, and wondering if there is a better word. What I came up with was "mcb" for movie clip/button. That's not bad, but another convention that works is to say that button with lowercase "b" can mean a MovieClip being used as a button, but when you say Button with an uppercase "B" you always mean the Button symbol. Anyway, in my articles, I often call something a button when I actually mean "movie clip being used as a button." Now you know.

So in this article, I'm going to show you how to design a cool movie clip button! It will be basic and nothing fancy, but if you'd like yours to be fancier, feel free! My main objective is to demonstrate how to structure it and apply the actionscript, so I will just use a rectangle, a textfield, and a couple of different colors for rollover effects. Consider it a framework or a starting point, if you would.

Building a Better Button. Follow these steps:

Create a new fla file (Actionscript 3.0). Choose the rectangle tool. Choose black for a stroke color, give the stroke a width of 3, then choose red for a fill color. Now draw a rectangle on the stage, literally any size. Now grab the arrow (selection) tool. Select the rectangle you just drew, and in the properties panel give it a width of 150, and a height of 32.

Now double click the rectangle you just drew to select the entire thing. Press F8 to convert it to a symbol. Choose MovieClip for a symbol, give it a symbol name of MCB, and make sure the registration point is upper-left. Press the OK button. It should look like this:

Next, double click the instance on the stage to go into the edit mode for the symbol. We're going to customize the inside of this MovieClip to cause it to behave like a button. It's important to realize that when you edit a symbol, you are editing the template for all instances of the symbol. Regardless of whether you double clicked an instance on the stage, or a symbol in the library you are editing the template or master copy of the symbol. There is no such thing as editing the inside of just one instance.

Double clicking an instance on the stage, and going into its edit mode, is known as "edit in place." Apparently the authors of Flash figured it would be handy to edit a symbol and still be able to see it in its context on the stage. And it is! When you double click the symbol in the library, you go into "edit" mode, but you see only the insides of the symbol, with nothing else on the staqe. This is known as just "edit." And that's the difference between "edit" and "edit in place."

Now that we're inside the symbol, let's do some editing to its timeline:

Double click Layer 1 to change its name, and name it "Background." On this layer, click on frame 10 and press F6 to create a new keyframe. Click on frame 20 and press F6. Click on frame 30 and press F5 to fill the remaining space with ordinary frames.

Now click on the Background layer, so that the layer is selected. Click the "new layer" button to create a new layer. Here's a tip: When you create a new layer, the new layer will appear directly above whatever layer is currently selected. Another tip (unrelated to the current operation): To change their stacking order, you can simply drag them around and drop them in a new place.

Double click this layer's name and name it "text." This layer is fine as is. The only keyframe it needs is the one already on frame 1.

With the text layer selected, click the "new layer" button again, creating another layer. Double click this new layer's name and name it labels. On this new layer, click on frame 10 and press F6. Click on frame 20 and press F6. Click on frame 30 and press F5.

Finally, press the "new layer" button again, creating a new layer, and name it "actions." Lock this layer. That way, no graphics can be accidentally placed there. But locking the layer does not prevent putting actions in the frame.

Now we have our basic structure. Your screen should look something like this:

Next, click on frame 10 of the background layer. The stroke and fill of the rectangle will highlight and be selected. But we only want to select the fill, so click somewhere else on the screen to deselect the entire thing, then click once on the fill to select it. Choose a different color for the fill by clicking on the fill color selector in the toolbox. I chose a light blue color:

Next, click on frame 20 of the background layer. Repeat the process of selecting a different color for the fill. This time I chose a dark blue color. Go ahead and lock the background layer, as we are done editing it.

Next, click on the text layer. Choose the text tool from the toolbox. Click once somewhere on the stage to put a new textfield out there. In the properties panel, choose dynamic text from the dropdown menu. Just to the right of that, choose Arial from the font dropdown, and then choose a size of 14 from the field immediately to the right of that. Moving to the right, choose a color of black, and then from the various align buttons to the right of that choose "Align Center."

Moving down one row (still in the properties panel) give this textfield an instance name of myText. In this same row, choose "Anti-alias for readability." On the next row, give the textfield a width of 150, and a height of 22. In the X field, enter 0 (zero) and in the Y field enter 7. Now we are finished with the text layer, so go ahead and lock it.

Click on frame 1 of the labels layer. In the properties panel,click in the frame label field, and type in _up. Click on frame 10. Give this frame a label of _over. Click on frame 20. Give this frame a label of _down. Be sure when you type in these frame labels you include the leading underscore. Now your screen should look something like this:

Now, what is really not all that well known is that when you define the frame labels _up, _over, and _down, Flash will automatically make your MovieClip symbol act like a button. That means that when the mouse rolls over the button, it will automatically go to the frame labeled "_over." When the mouse rolls out, it will automatically go to the frame labelled "_up." When the button gets a mouse down (or press), it will automatically go to the frame labelled "_down." All this without defining any listeners at all! However, in AS3, you must define buttonMode as true in order for all of this to work.

Next, click on the first frame of the actions layer. Press F9 to get the actions panel. On the first line, type a stop() command. Obviously, without this command, the timeline will play and loop repeatedly. On the next line, set buttonMode to true. Setting buttonMode to true is necessary, as already stated, to make the automatic frame switching work, but also it gives each instance a hand cursor on roll over. On the third line, set mouseChildren to false. Your list of actions should look like this:

stop();
buttonMode = true;
mouseChildren = false;

By setting mouseChildren to false, we are saying that we don't want anything inside this MovieClip to react to the mouse. This is necessary for the sake of the textfield we built in, which would ordinarily receive mouse events. But we are just using the textfield for a label, so we don't need to have the user interact with it, like an ordinary textfield might allow.

Remember that everything we define inside here on this timeline will be true for all instances of this symbol. So we want to define only common behavior in here, that is, whatever traits we want all the instances to share. So anything that's unique to a particular button (for example, what it does when you click it) won't be defined here, but rather from outside code. This is very object-oriented stuff here! It's exactly as though we were writing a class! Basically our symbol extends the MovieClip class, and now we are making a custom MovieClip symbol. Every instance will get this same timeline, with these same actions, all built-in.

Now go back to scene 1. Click on the instance that's on the stage to select it. In the properties panel, give it an instance name of b1. Drag out another instance from the library and give it an instance name of b2. Double click the one layer and give it a layer name of buttons. Create a new layer above this and call it actions. In the actions layer, type in this code:

b1.myText.text = "Button One";
b2.myText.text = "Button Two";
 
b1.addEventListener(MouseEvent.CLICK, clickHandler);
b2.addEventListener(MouseEvent.CLICK, clickHandler);
 
function clickHandler(event:MouseEvent):void {
	trace("You clicked " + event.currentTarget.name);
}
 

Note that unlike Button symbol instances, we can address everything inside our MovieClip button with actionscript. In this case, we give the button a label by setting the text of the dynamic textfield inside. I would also like to note that in addition to enjoying the benefits of the automatic frame changing like instances of the Button symbol can do, you can also do something like this manually from outside code (which is impossible to do with Button symbol instances):

b1.gotoAndStop("_down");

Press CTRL-ENTER to run the file. You will notice the automatic rollover, rollout, and mouse down behavior I mentioned. You can drag out as many copies from the library as you want, and they will all exhibit this same common behavior. Here's the working application, and a download link for you. Note: this online version won't trace out any messages, but you can see the rollover and mouse down behavior in it:

download mcb.fla