Flash: Creating Buttons

**chili5** · 08-30-2009 04:06 AM

Flash: Creating Buttons

I know that the button included with Flash works well. It has a simple interface. What if you want a button with a cooler interface?

This is what we are going to do, make a button that has a better interface.

Go to the insert menu, and click new symbol. You will see a form like the image below.

We need to do a few things, rename the symbol, change the type of symbol and export for ActionScript.

In the name text field, change the name to "new button". This isn't a very descriptive name but we are just demonstrating how to create new buttons. In the combo box, below the text field name change that to say Button.

The last thing you need to do is check the checkbox that says "export for ActionScript". This will let us program the button in ActionScript code.

Your form should now look this:

Notice, that the class name doesn't have any spaces? It can't have any spaces for use in the ActionScript code.

Now you can click okay.

The flash environment will now look like this:

This is where you are going to design your button. Notice, that the timeline has changed. There are four frames:

Up
Over
Down
Hit

Each of these frames is one state of the button. The up frame runs when the mouse is not on the frame. This for the most time, will do very little (if anything). The over frame runs when the mouse is moved over the button. You might want to change the color of the button when the user puts the mouse over. The down frame runs when the user presses the mouse on the button and holds the mouse down.

The hit frame runs when the user clicks the button.

We aren't going to use the hit frame in this tutorial.

Drawing the Up Frame

We are going to make a button in the shape of an oval. So using the oval tool, draw a circle on the stage.

The stage should look like this:

Notice, on the picture how there is a crosshair? The cross hair should be relatively close to the center of your image. Now, let us add some text to the button using the text tool. We want to make it a dynamic text field also. Change the instance name of the dynamic text field to "theText". This will eventually allow us to change the text on the button.

Drawing the Over Frame

In the time line for the button, click on the over frame. This is the frame that will run when we put the mouse over the button. What we need to do is insert a new keyframe on this frame. Right click on the frame, and go to "Insert Keyframe". Now on this frame, we are going to change the background color of the frame.

In the toolbox, look for the bucket tool. Click on the rectangle below the bucket. Now you can find a color that you like. Consider changing the text color also.

Have fun with this, you can do anything that you want. I'm even going to change the size of the button and the size of the text.

This is what my over state looks like:

Drawing the Down Frame

We now need to add a keyframe on the down frame in the timeline. This is the frame that runs when the user presses down on the button and holds the mouse down.

When this happens, I am going to make the button move. I'm also going to change the button back to the state it was in when the mouse wasn't over it. I just copied the keyframe from the up frame and pasted it on the down frame.

You can do this by right clicking on a frame, and going to copy frames. Then on the down frame, right click and press paste frames. Move it slightly but the crosshair still has to be on the image.

Using ActionScript

Since, we checked export for ActionScript we can use code to create instances of are button and do all sorts of things. We can even program events on our own button.

Back on the main timeline, open the actions window for frame 1.

Code:

var btnOne:newbutton = new newbutton();

This code creates an instance of the button that we just created.

Code:

btnOne.x = 50;
btnOne.y = 100;

stage.addChild(btnOne);

This code sets the location of our button and adds it to the stage.

Code:

btnOne.addEventListener(MouseEvent.CLICK,yo);

function yo(e:MouseEvent):void {
	trace("Yo! You clicked me!");
}

The addEventListener sets up a callback function yo that is called everytime the button is clicked.

Next steps?

First, hope this is a useful start for creating your own buttons. There are still a few things that I have to figure out. Just remember that this is an extension of SimpleButton so anything you can do with SimpleButton you can do with your button as well. This includes using ActionScript code. This is just an intro, you can do more with them.

I have to find out how to do things with my button at runtime. Things like changing the text, and changing color. Though I think it would be simple.

When I do this:

Code:

btnOne.theText.text = "HAI!";

I get this message:

Code:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
	at button_fla::MainTimeline/frame1()

So obviously, I am doing something wrong since I am getting a null reference. I will assess this issue for the next tutorial.

You can see the SWF here. Note: you won't see any output from the trace statement. Since it displays to the output that you can't see in a web browser.