How to Make Buttons for a Flash Website
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.
Continue
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.
Continue
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Follow @ArtAnimationTut
Tweet
Content copyright © 2023 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.