Creating Simple Buttons in Flash MX

At first glance Flash MX may look pretty difficult. But Flash MX is one of those programs that you need to take step by step and eventually you will get the swing of it. So let me show you how to make a simple button in Flash MX. Go ahead and open up your Flash MX program.

Step 1 – Create a New Flash MX Document about 400 x 150 pixels.

Step 2 – Select the rectangle tool and draw a rectangle for the button.

Step 3 – In your Tools bar select the black arrow (selection tool).

Step 4 – Click on the rectangle to select it. Make sure you click in the middle of the rectangle so that the whole thing is selected.

Step 5 – Once you have selected the rectangle click Modify > Convert to Symbol at the top of your window.

Step 6 – Now you will see the “Convert to Symbol” dialog box. In the Name Field, Type in a name for your button. Select Button under Behavior. Then Click OK.

Step 7 – Double Click on your rectangle. Notice at the top of your window it has changed to “Up, Over, Down, Hit”.
Up – Shows how your button will look while it is sitting on your page.
Over – Shows how the button will look when you mouse over it.
Down – Shows how your button will look when you click on it.
Hit – This is never seen, so no need to mess with this one.
See Image 1

Step 8 – Now lets preview the button. Press F6 on your keyboard so that you can preview them.

Now we need to edit the buttons.

We will start with the Up button.

Step 1 – Click on the word up in your timeline.

Step 2 – Click on your button.

Step 3 – You can change the color of the button by selecting the color fill button in the properties window.

Step 4 – Now we will add text. Select the text tool in the tools panel.

Step 5 – Draw a box on your button so you can type your text. Type your text in that box and then select the black arrow in the tools panel.

Step 6 – Click on your text with the black arrow and choose your choice of font, font size, font color, etc. in the properties window.

Now let’s edit the Over Button.

Step 1 – Click on the word Over in your timeline.

Step 2 – Click on your button.

Step 3 – You can change the color of the button by selecting the color fill button in the properties window.

Step 4 – Now we will add text. Select the text tool in the tools panel.

Step 5 – Draw a box on your button so you can type your text. Type your text in that box that you want to display when the mouse rolls over it and then select the black arrow in the tools panel.

Step 6 – Click on your text with the black arrow and choose your choice of font, font size, font color, etc. in the properties window.

Now we need to edit the Down Button.

Step 1 – Click on the word Down in your timeline.

Step 2 – Click on your button.

Step 3 – You can change the color of the button by selecting the color fill button in the properties window.

Step 4 – Now we will add text. Select the text tool in the tools panel.

Step 5 – Draw a box on your button so you can type your text. Type your text in that box that you want to display when the button is clicked and then select the black arrow in the tools panel.

Step 6 – Click on your text with the black arrow and choose your choice of font, font size, font color, etc. in the properties window.
See Image 2

Once you are finished with those three buttons, you can preview your button by going to Control > Test Movie in the top of your Flash MX window.

You can go back and play around with the colors and stuff by clicking the Up, Over, or Down buttons in your timeline. Also when you are typing the text on the buttons, you may need to drag the text around to get it in the center of the button. Flash Mx is an awesome animation and graphic program but I think it was the hardest out of all the programs that I have learned.