Custom Search

Wednesday, November 21, 2007

Flash Button

Creating a Flash Button

Start with a clean slate by going to File <>

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 <>

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 <>

Right click our button and choose "Actions" from the pop up menu if it is not already selected. Within the Actions Toolbar select: Action <>

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 < href="http://www.tizag.com/pics/flash/button1easy.swf">example or download our raw flash document.

No comments: