Flash Buttons

Making a flash button

Let's start with a simple one.

1. Create a new Flash document (use Actionscript 2). Save it into your site's root folder.
2. Go to Modify-Document
3. Change the document size to 130 pixels by 130 pixels. Click OK.
4. Using the Oval shape tool, shift-click and draw a circle on the stage.

Now you will select this graphic and make it into a symbol.

5. Using the select tool, drag a rectangle around your circle
6. Go to Modify- Convert to Symbol. Choose 'Button' as the type and click OK.

Insert the states of the button symbol

7. Double click the button symbol. This opens the timeline view to the four states of the button- Up, Over, Down, and Hit.

Notice the circle is on the stage in a keyframe in the Up state.

8. Right Click (or control-click) on the 'Over' state, and insert a Keyframe. This duplicates the keyframe from the Up state into the Over state.
9. Do this one more time in the Down state.

The Hit state is an invisible fill area that you must define so that the browser can recognize it as a button. Cursers will respond to this fill area in the Hit state.

10. Insert a frame, or another keyframe, into the Hit State. Remember, this only needs to be a solid fill that defines the active area of the button. Note: Text buttons especially require a solid rectangular fill shape to work properly.

Edit the states of the button

Now that we have the basic circle shape in all states of our button, we can edit them so that they have different properties for the up, over, and down states.

12. Select the keyframe for the Over state, and click the circle on the stage. Double-click the fill to select it, and then use the color picker to change it to a new color or gradient.
13. Do the same for the Down state.

Example: Make the Up state red, the over state green, the down state blue.

Save your file, and choose File- Publish Preview- Flash to examine your work.

Making the button function with Actionscript

In your timeline, return to 'Scene 1' by clicking it at the beginning of the nested list of symbols just under the timeline on the left.

Note: YOU CANNOT assign a function to the button in an edit view for that button... you must be 'outside' of it to do so.

Select your button on the stage with a SINGLE click.

Open the Behaviors panel from the Window menu.

Alt 1: Go to Web Page

From the Plus sign (+), select 'Web- Go to Web Page'

In the dialog box that opens, enter the absolute URL to a website address, or a filename from inside your root folder, and set a target if needed.

Save, and go to File- Publish. This creates an SWF file, an HTML file, and a file called "AC_RunActiveContent.js". Do not remove any of these files from the root folder.

Alt 2: Go to and play from, or stop on, a named frame in the timeline

In this case, we select a frame in our scene timeline and then give it an instance name in the Properties panel.

If we then select our button, and click the + sign in the Behaviors panel and choose 'Movieclip- Go to and play at frame or label' or '...stop at frame or label', we can enter the name of our named frame in the dialog box that opens.

Place the button into your Dreamweaver page

Select where you wish your button to go in your HTML document.

Choose 'Insert- Media- Flash' from the menu.

Select the SWF file you have published.

The flash file will appear in your document (displayed as a grey box with an 'f' symbol unless 'play' is clicked in the properties panel), and can be previewed in a browser.

PS: The HTML document that is published from Flash contains the embedded button. You can discard this file.

Note: Flash security may stop URLs from working until the pages have been uploaded to a server.