Making a Flash Button


You will learn how to create your own button and add a URL to it so it becomes a link. Start by opening a new Flash File (Actionscript 2.0).

Example

Step 1
Choose Insert > New Symbol from the top menu.

Step 2
Name the symbol "button1", choose Button from the Behavior list and click OK. In the Timeline area, you will now see the four states of a button: up, over, down, hit.

Step 3
Name the layer "Button Shapes", select the Rectangle tool, pick a light red Fill Color and draw a rectangle in the work area. 

Step 4
Open the Align Panel and click on the three icons shown here:

align panel

Step 5
Add a keyframe to the Over State in the Timeline. The Over State indicates what should happen when you mouse over the button.

Step 6
Select the Rectangle, change the Fill color to a light green. 

Step 7
Add a keyframe to the Down State in the Timeline. The Over State indicates what should happen when you click on the button.

Step 8
Select the Rectangle, change the Fill color to a light blue.

Step 9
Add a keyframe to the Hit State in the Timeline. The Hit State indicates the area where the viewer will be able to click on the button to activate the link. (The shape in this frame does not have to have a fill color because you will not be able to see it in the finished button
.)

Step 10
Insert a new layer above the layer containing the rectangles and name it "text"

Step 11
Select the Text tool, pick a dark Fill Color and write "Click Me" over the rectangle.  You can add text to the Over and Down frames if you want different words to appear at those points.

Step 12
Center the text by clicking on the Align horizontal center and Align vertical center icons on the Align panel. Your timeline should look like this now:

  button timeline

Step 13
Click on "Scene 1" on the Edit bar just above the stage to return to the movie.
The button will not be on the stage at this point.

Step 14
Choose Window > Library to locate the button. Drag the button into the work area. 

Step 15
Select the button and then open the Actions panel (F9)
.

Step 16
In the left side of the Actions panel, click on Global Functions > Movie Clip Control and then double-click the "on" option. Click on the Script Assist button on the upper right side of the actions panel to see the options available for each command.

Step 17
On the left side of the Actions panel, click on Global Functions > Browser/Network and double-click "getURL"

Step 18
Enter a full URL in the URL field (like http://www.w3schools.com).
You can copy the address for a web page (the URL) you want to use, then paste it in the URL box.

Step 19
Choose target in the Window field -- _blank will open the web page in a new window, _self will open it in the same window that is open. Close the Actions panel.

Step 20
Press Control +Enter to test your Flash movie. Click on the button to see if the link to a web page works.