Printer Friendly Version

BellaOnline's Flash and Animation Editor

How to Make Buttons for a Flash Website From A Button Symbol

In the last tutorial we created a button symbol template that we will now use as the starting point for making the buttons on your website. Starting from this template each time, we will make the individual buttons for the Company (Artist, Author, XYZ Co., etc), Contact, Products, Weblog and Portfolio webpages. Of course, these buttons won't have much to do yet because we still need to create the individual pages for your website that correspond to these buttons. We will do that in the next tutorial. But first we need to make these buttons. Open your .fla file into Flash and let's get to work.

Step 1. The Home Button. When you created the Nav_Button symbol in the last tutorial you labeled it Home. Therefore we don't need to change the label when we make the Home button. We just need to duplicate the symbol template and rename the duplicate from Nav_Button to Home_Button. So go to the Library Panel and right click on the Nav_Button and then choose Duplicate from the pop-up menu. In the Duplicate Symbol dialog box name the symbol Home_Button. That's it. You should have two symbols in the Library Panel -- one called Nav_Button and one called Home_Button.

Now click on the Home_Button and drag a instance (copy) on to the menu area of the website.

Website Menu with Home Button

Step 2. The Contact Button. Repeat the previous step to create another duplicate of the Nav_Button symbol and this time name the new symbol Contact_Button. But do not drag it on to the menu area yet.

First we need to change the label from Home to Contact. Double click on the Contact_Button symbol that is in the Library Panel and you will enter the Symbol-Edit mode. Go to the Timeline, click on the Up frame in the Label layer. Now click on the Text Tool icon. Click and drag over the Home text to select it. Change the text to Contact. Repeat this for the Over and Down frames in the Label layer.

Free Transform Tool Icon
The last thing we need to do is change the size of the gray rectangle that represents the clickable area for the button.

Click on the Hit frame in the Shapes layer and then click on the Free Transform Tool icon. You will see the bounding box and the transformation handles that you will use to reshape the rectangle.

Click on the middle handle on the right side of the rectangle and pull it to expand the rectangle to cover all of the word. That's it. The Contant_Button is now ready for the website.

To exit the Symbol-Edit mode click on Scene 1. When you are back to the stage, drag an instance of this button on to the menu area. You can use the directional arrows on your keyboard or the X and Y Location values in the Property Inspector to make find adjustments to the position of the buttons. Do not overlap the clickable areas of the buttons.

Step 3. The Other Buttons. Repeat the last step to make the other buttons for your site. You will need a button for the Company, Products, Weblog and Portfolio webpages. For the Company button you may want to use a more descriptive label such as Artist, Author, Counselor, Teacher or Staff.

Step 4. Test The Buttons. You will want to test the rollover effect for all of the buttons on your menu. Click Ctrl and Enter on your keyboard to view a preview of your website. Move your mouse over each button to view the rollover effect and then close the preview window.

Website Menu with Buttons

Step 5. Save Your Flash Movie. You can now save the new additions to your movie. Click File> Save.

Macromedia Flash MX 2004 Workspace

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor