In this tutorial, we’re going to create a menu with a bar underneath it that moves left and right based on which button the user is hovering over. This tutorial is created with Flash CS3 and ActionScript 3. Here’s what it will look like when you’re done:
Notice that as you hover over each button, the red bar under the menu moves to the button your mouse cursor is hovering over. Let’s get started:
1. Create your graphics. For the background of the menu, I simply created a rectangle that was the same width as the stage and gave it a black-to-dark-gray gradient fill. Leave this on a layer by itself.
Create a new layer and type in the text for all your buttons in separate static text fields. Name this layer Buttons. Select each of your text fields and hit F8 to convert them to symbols. Choose Movie Clip and set the registration point of each of these movie clips to the center, as shown below:
The registration must be set to the center, otherwise this effect won’t work. When we move the red bar around with ActionScript, we want it to end up centered underneath the appropriate button. This will work best if we set all of our buttons’ registration points to center, as well as the registration point of the red bar.
Give each of your movie clip buttons an instance name. The instance names I used are home_mc, about_mc, products_mc, and contact_mc. We will point to our movie clip buttons in our ActionScript using these instance names.
Create a new layer above the Buttons layer and call it Reflection. In this layer, I drew another rectangle that covered up the top half of the background rectangle. For this new rectangle, I used a linear gradient that faded from white at 70% opacity to white at 0% opacity (check the source file for details).
Create another layer that contains a small, red rectangle. The one I created was 80 pixels wide and 3 pixels tall. Place this rectangle directly under the menu. Then select it, hit F8 to convert it to a symbol, and (as mentioned before) set its registration point to the center. Give this rectangle an instance name of bar_mc. Place this bar under the home button by default.
2. Create your ActionScript layer. Create a new layer on your timeline, lock it, and name it Actions. We will attach all ActionScript to this layer.
3. Enter your code. Click on frame 1 of the Actions layer, hit Opt+F9 (or just F9 on PC) to open up your Actions Panel, and enter the following code:
import fl.transitions.Tween;
import fl.transitions.easing.*;
home_mc.buttonMode = true;
about_mc.buttonMode = true;
products_mc.buttonMode = true;
contact_mc.buttonMode = true;
home_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
about_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
products_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
contact_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
function hover(e:MouseEvent):void
{
new Tween(bar_mc,"x",Strong.easeOut,bar_mc.x,e.currentTarget.x,1,true);
}
In lines 1 and 2, we’re importing the classes we need in order to use the Tween class. The Tween class and the associated easing classes will allow us to animate our sliding bar.
Lines 4-7 are simply turning on buttonMode for all of our movie clip buttons. Since our buttons are actually movie clips, we need this code in order to make sure that the mouse cursor turns into a hand cursor when hovering over the buttons.
In lines 9-12, we’re adding the usual ROLL_OVER event listeners to each of our buttons. When we hover over our buttons, we’re going to call on the hover function, which we created in lines 14-17. On line 16, we’re creating a Tween that causes the bar_mc movie clip to animate from its current position (wherever it may be at the time) to the same x coordinate as the movie clip that triggered the hover function (indicated by e.currentTarget).
Hope this made sense! ENJOY!
Source file: menubar.zip
