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
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! If you're having trouble, be sure to view our example or download our raw flash document.
Found Something Wrong in this Lesson?
Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!