Creating Vertical Mouse Over Menu

New Flashers often go overboard on the flash effects. Subtle button effects tend to give an elegant or professional look to your site. In this exercise we will work with simple mouse over effects

1. Open a new movie. Set the stage properties to 230 wide by 250 hight. Click View=> Grid=> Edit Grid. Set the grid to 10 pixel wide by 10 pixel high. Check Show Grid. Click OK.

2. Click Insert=> New Symbol. Call the symbol homebutton. Give it the behavior of a button. Click OK. This opens the button symbol timeline.

3. Zoom in to at least 400x. Select your oval tool. Set the stroke to no stroke and the fille to black.

4. On the homebutton symbol, start at the registration point and drag down and to the right one block and release.

5. Click in the over frame of the button timeline. Hit your F6 key to add a key frame. Use your arrow tool to select the circle on the stage in the new keyframe. Change the color of the circle to red.

6. Click in the down frame of the button timeline. Hit your F6 key to add a key frame. Use your arrow tool to select the circle on the stage in the new keyframe. Change the color of the circle to dark grey. Rename layer one "dot".

7. Add a Layer by clicking the icon on the bottom of then Time line to add a layer. Name this layer "text".

8. Select your text tool from the tool box. In the property inspector set the following:

• Text type = static text
• font = Georgia
• size = 27
• color = black
• alignment = left

9.  Click to the right of your dot and Type in the word HOME. Lock the dot and the test layer.

10. Add a layer. Call the layer "hit". Click in the hit frame and hit your F6 key. Turn on the edit multiple frames at once, andmake sure you onion all frames. In the hit frame of the hit layer, draw a rectangle that covers the dot and the text, not worrying about what color.

11. Click back on your scene 1. Click view=> grid=> showgrid to turn off the grid. Open your library and drag one instance of your homebutton onto your stage.

12. In your Library, right click on your homebutton symbol and select duplicate symbol. Name the new symbol aboutus with the properties of a button. Double click aboutus from the library. Lock the dot and hit layers and unlock the text layer.  Edit the text to say ABOUT US. Then lock that layer and unlock the hit layer. Click in the hit frame and adjust the hit area to the size of the text.

13. Click back on your scene 1. Open your library and drag one instance of your aboutus onto your stage.

14. Repeat the steps to create new buttons that say NEWS, CONTACT US, INFORMATION and drag them out onto the stage back on scene 1.

15. Click on frame 1 of the layer 1 which will highlight all the buttons on the stage. Open your align panel. Click align left. Select the to stage option and click distribute vertical centers. While they are still highlighted, use your arrow tool to nudge the buttons several clicks to the right so they are not on the edge of the canvas.

16. Test and publish your movie. Next step is to script the buttons, covered in a different tutorial.