Flash MX I and II -- Professor Carlotta Eaton
VBEA Summer Conference -- August 2004

Button Exercise

• Open new Flash document 800 x 100 pixels and name it NavButtons.fla.
• Plan the buttons you need. Let's do:
  • Home
  • About
  • Assignments
  • Lectures & Lessons
  • Classmates
• Create a button symbol - Insert ... New Symbol
  Name: PrimaryButton
  Behavior: Button
  Click OK
• You are now in the Button's Timeline - Notice Scene1
• Choose View ... Grid ... Show Grid
• In the toolbox, change the fill color paint bucket to #33FFFF (light aqua), change the stroke color pencil to black
• Click the rectangle tool, change rounded corner to 10.
• Center the button. Use the alignment panel.
• Ensure the longest text will fit on the button. "Lectures & Lessons". Create a temporary 2nd layer and put the text on it. Make the button bigger or smaller if needed to fit the text.
• Create the Rollover effect. Click in the Over frame/state and hit F6. Change the rectangle color using the fill color paint bucket to #FF9933 (light orange).
• Add sound to the button when clicked. Add a new layer and call it sound. In the layer, on the Over frame, press F7 to add a blank keyframe.
• Open the Sounds library. Window ... Common Library ... Sounds
• Drag and Drop "Breaker Switch" to the stage. You just added sound.
• Return to Scene1. Drag an instance of the button to the stage and test it. You should see the text disappear and color change to orange when you rollover it.
• Return to the button edit. Drag the text layer to the trash can to delete.
• Return to Scene1. Drag 4 more instances to the stage. Align with Distribute Horizontal Centers.
• Add a text layer for the buttons. Use the text tool, black, Arial, 10, Bold.
• Add text for the buttons from our plan:
  • Home
  • About
  • Assignments
  • Lectures & Lessons
  • Classmates
• Align each button with text. Align Panel: Unclick "To Stage". Hold down shift click a button and it's text. Align using "Align vertical center" and "Align horizontal Center".
• Add a new layer and call it "Actions".
• Add a link to the home button. Select the Home button and press F9 to open the Actions panel. Click Actions ... Browser/Network ... GetURL.
• In the parameters panel type http://www.nr.edu/eaton/flash and _top.
• Test the button using Ctrl+Enter. This also creates a swf file.
• In Dreamweaver, create a new document. Insert the NavButtons.swf at the top of the file and add a heading at the top.
• Test the html file.
• You can create several web pages and then add actions to the flash navigation file to match.
• This is an easy way to add a navigation bar to all pages in your web site with a single file to update if your navigation bar changes.