• Articles and Tutorials
• Contact

Use movieclips as buttons in flash

In this Flash tutorial I will tell/show you to stop using the buttons symbol in flash, in previous versions of flash, the buttons symbol was often used, maybe even as often as the movieclip, but now a days, when flash has become more of an object oriented programming language and we do almost everything by coding actionscript, the buttons symbol has some lack of functionality, and I will explain you why you should start using movieclips as buttons and show you how to do it.

first thing with buttons symbols is, your have 4 mouse states to use, a mouse over, mouse down, mouse up and mouse hit. These four states act like frame on the timeline, you can alter the graphics of the button so its shape changes when the mouse moves over etc. And all that is great, but you have the same possibilities with movieclips and even more flexibility. You have all the same functionality as a buttons symbol plus the functionally of the movieclip class.

Now enough trying to convince you to use a movieclip as a button, now I will show you how to do it. It might seem a bit confusing with all the code you have to type, but try to read along, and understand, when you understand, you will never turn your back to it.

First we have to set up a button (movieclip) so draw some graphic, right click and convert it to a movieclip.

Now double click your movieclip and in the timeline insert a new key frame at frame to, here you can alter the appearance of the button, so you have two button states, one "normal" state, and one when the mouse is pressing the button.

Remember in the button, go to the actionscript panel and type in stop(); this is to make sure flash does not loop from frame 1 to 2 all the time.

Go back to the main stage, and go to the actionscript panel, here type in the following code, I have commented for each line to explain what happens so you can understand it. (comments are made with //)

//First we need some eventlisteners, these eventlisteners will "listen" for if the button is is down or up, then if one of these states is true, it will call the functions bOut(); and bDown.
button1.addEventListener(MouseEvent.MOUSE_UP, bOut);
button1.addEventListener(MouseEvent.MOUSE_DOWN, bDown);

//This line is for the function we want the button to do, we want it to go to my website, therefore we need to create an instance of the URLRequest and define the url like so.
var link:URLRequest = new URLRequest("http://blog.0tutor.com");

//This is a function, the function is called by the eventlistener which listens if the button is clicked (mouse is down), one thing will happen if the button is down, we will use the gotoAndStop(2); to go to frame 2 in the buttons movieclip so the buttons state changes.
function bDown(event:MouseEvent):void {
	button1.gotoAndStop(2);
}

//This is the function for when the button is up, (mouse released), the buttons movieclip will go back to frame 1, and we will use the navigateToURL(link); to navigate to my website.
function bOut(event:MouseEvent):void {
	button1.gotoAndStop(1);
	navigateToURL(link);
}

//This last thing is just to show you that you can even make a movieclip act like a button, so when your mouse is over the button, the mouse cursor will change, just as it would on a buttons symbol.
button1.buttonMode = true

You can download the flash buttons project here to help you understand what I did.

Download button