Animated Navbar

Learn how to make a highlight follow your mouse in this interesting navbar tutorial...

Welcome to the first flash tutorial at Robouk. I, the creator, am known as Bernie. I hope to be bringing you many more tutorials about flash. This tutorial will cover the creation of a mouse following smart navigation. Let's break down what I mean by "mouse following smart navigation". First, "mouse following" means that the high lighter will move because of the mouse's movement. Second, "smart navigation" means that the navigation will know when to move and when to stay still even if the mouse is moving.

Type 1:

The first navigation I will show you does not meet the "smart" standard that I wanted, but this is by far the easiest to create.

Create your new flash movie.
Make buttons for all the sections of your website.
Now, make a bar the same height as your navigation and the width can be as long as you want, I suggest just a little more than needed to cover your largest button.
Convert your bar into a movie clip. Name it 'mask'. Make sure you give it that instance name in the main timeline.
Go back to your main timeline and set the opacity of the 'highlight' mc to at most 50% and at least 25%.
Now go into the actions of your 'highlight' and add this to your actions.
```
onClipEvent (mouseMove) {
_x = _xmouse+_x;
}
```
Now test your movie, and if all went well then you should have something around the lines of this.

Type 2:

Follow the first 5 steps of Type 1.
Now go into the actions of your 'highlight' and add these actions.
```
onClipEvent (enterFrame) {
_x = _xmouse/4+_x;
}
```
Test your movie, and it should look something like this.

Type 3:

This navigation, unlike the other 2, is smart. This navigation takes more time than the other two to create, because you have to explain to flash when and when not to move the high lighter. If you except the challenge, continue with me into the world of good navigation's in flash.

Follow the first 5 steps of Type 1.
Now begins the fun part. Add a new layer, and name it "Actions". Add another layer, and name it "Junk".
Add three key frames in the "Actions" layer.
Create 3 dynamic text boxes in the "Junk" layer. Their variable names are "xt", "xm", "xmt", respectively. Don't worry this will make sense later.

Now, go to the actions for the second frame on the "Actions" layer. Add this bit of code to it.

xt = _xmouse;
xmt = getProperty("/mask", _x);
xmt = xmt + ((xm-xmt)/6);
setProperty("/mask", _x, xmt);

Now, go to the actions for the third frame on the "Actions" layer. Add this bit of code.
```
gotoAndPlay(2);
```

Now to explain the code.

xt = _xmouse; --------------------------------- Sets the variable "xt" to the numerical value of the x location of the mouse.
xmt = getProperty("/mask", _x); ------------- Sets the variable "xmt" to the numerical value of the x location of the movie clip named "mask".
xmt = xmt + ((xm-xmt)/6); -------------------- Sets the variable "xmt" to the numerical value of one sixth the difference between the xm and xmt plus xmt.
setProperty("/mask", _x, xmt); ---------------- Sets the property of the x location for the movie clip named "mask" to the numerical value of the variable xmt.

Now you should be asking what is the "xm" variable? Well this is the part where you have to do some thinking for the movie. Preview your movie, and the "mask" movieclip will go to the right, but it will not respond to your mouse. Don't worry that's ok for now. While you're previewing your movie you should see that one of our text boxes is changing. That box is the location of your mouse.
Move your mouse so that it is in the middle of each button, and when the mouse is in the middle of the button, look at the number in the text box. Write the number down. Do this for all of your buttons.
Once you're done getting your numbers, close out of the previewing of your movie.
Now go into the actions of your first button. Add this bit of code and substitute your number with my number.
```
on (rollOver) {
xm = 45;
}
```
Repeat this for all of your buttons.
Preview your movie, and now when you put your mouse over a button the "mask" movie clip should slide over to that button.

Tips and Advice:

To change the speed of the mask movie clip change the dividing number from 6 to whatever you would like. Lower = slower. Higher = faster.

This tutorial was by Bernie, brought to you by Robouk, please post any questions in the forum. Thank you.

‹ BACK TO TUTORIALS