Flash Button

This lesson will walk you through the process of creating a button in Macromedia Flash. Remember, Macromedia has included a large number of premade buttons in the common libraries. Access them by going to the menu and selecting Windows < Common Libraries < Buttons!

Creating a Flash Button

Start with a clean slate by going to File < New and select Flash Document.
From the Tools window select the Oval shape tool.

Select the red fill and the black stroke from the Properties window:

Hold shift and left click on the stage and drag to create a circle like the one we have below.

Select the arrow tool from the Tools menu and double click the circle to select both the red fill and the black stroke. Right click the circle and choose Convert to Symbol
Name: My_Button, Behavior: Button, Registration: Center/Center

Press OK
With the arrow tool, double click My_Button to bring up the symbol edit mode for My_Button. We are now going to change the behavior when the user mouses over the button. Choose the Over column from the timeline for My Button.
Insert KeyFrame in the Over state. (A shortcut for inserting KeyFrames is the F6 key)

With frame Over still selected, double-click the circle to select it and choose a blue fill from the Properties window.

Select Down in the Timeline for My_Button and insert a KeyFrame for Down.
With frame Down still selected, double-click the circle to select it and give it a yellow fill using the Properties window.

Testing Out Button States

We have completed altering all the different button states we will need for this lesson, so let's try them out to see that they work. Go to the Flash menu and navigate to: Control < Test Movie. Mouse over and click your button. Notice that it changes colors!

Adding a Button Action: GetURL

Now we want our button to actually do something, so let's make it so when you click the button it loads up Tizag.com. From the menu choose: Edit < Document
Right click our button and choose "Actions" from the pop up menu if it is not already selected. Within the Actions Toolbar select: Action < Browser/Network < getURL. Be sure that your Script Assist is enabled.

Double click getURL to create a new getURL action, which also brings up the text fields you will need to manipulate. In the URL field type in: http://www.tizag.com In the Window field type or select: _blank

Finish Button Creation!

You're done creating a fully function Flash Button! From the menu choose: Control < Test Movie to test out your flash button. When you click the button it now launches a website!

Posted in: Flash