Flash Example Learning: Basic navigation bar Production

Navigation

First of all, we do the animation of the arrow, do a good job. I have a poor ability to produce animation, this aspect will take some time, we should not be so tired, so finally I found the production method.
1. Create a new graphic symbol. Named allow
2. Select the arrow tool on the toolbar, change the stroke thickness to 3, solid line
3. Enlarge the scene to 400%, in order to draw a good arrow animation.
4. Draw a vertical line first, and then use any deformation tool, the registration point to move up, the registration point to the top of the line, the following figure

5.ctrl+t Open the Transform panel settings as shown in the diagram, and then reset again to deform again.

6. The arrow is finished, the following figure

Of course, you can adjust the size according to the actual situation. And then do the animation
7. Create a new movie clip named Allowmove, drag into the Allow component, insert keyframes in frame 15th, frame 30th. Adjust the component tones of the 15th frame, color set, and finally create a motion tween.
8. Create a new layer, drag the sound component in frame 15th, and frame 16th to insert a blank keyframe. The final layer effect is as follows. This makes the animation of the Arrow finished.

Navigation Bar Each method of making the same, so first make the same navigation bars, then the other navigation bar is repetitive work.
The following explains how to make.
1. Create a new movie clip menu1
2. Input navigation bar text conversion to graphic components (easy to modify later, because the following to make a frame animation), color is gray, the layer named text (attention layer and the name of the MC, because too many components and layers, it is easy to mistake, to develop such a habit)
3. Make text by frame animation, the effect for the font color change, the font in the jitter. Two effects combined. Two effects are done by two frames-by-frame animation.
In the text layer 2nd frame, change the text to white, 9th frame changed back to gray color, and then blank Keyframe, then to key frame, font color is white, repeat, the effect of the following figure

4. Create a new layer, named Textmove, insert a text symbol in frame 3rd, and the color is gray. Then creates a frame-by-step animation. A slightly altered (x,y) coordinate for each frame. Effect as shown below

5. Such text jitter effect on the production completed, and then a new layer named Allowmove, the above made the arrow animation dragged into the 9th frame, the location of the navigation bar under the font. Figure below

6. Create a new layer named number, enter the text "01", located on the left side of the text. This layer can add can not add, play a cosmetic role.
7. Create a new layer named action, written on the first and last frame

Stop ();

Prevents the animation from beginning to play.
8. One more new layer, named BG, draw a rectangle that is about the size of the navigation bar, and then put this layer in the bottom. Because such a movie clip is to be used as a button, the meaning of this layer is the same as the last frame of the button. Meaning is the range of button clicks.
OK, the navigation bar is finished. A total of 6 layers, as shown below

The next step is to write a simple mouse pass, leave, press the event.

1. Back to the scene, first adjust the frame frequency to 40. And then put the just made when the row bar to drag to the scene. Name the movie clip instance named MENU01_MC
2. In the first frame enter as:

Mouse Past Events
Menu01_mc.onrollover = function () {
The movie clip starts to jump to frame 2nd and starts playing
This.gotoandplay (2);
};
Events when the mouse moves out of the range of the movie clip and presses the mouse out of the movie clip range
Menu01_mc.onrollout = Menu01_mc.ondragout=function () {
The movie clip starts to jump to frame 1th and stops playing
This.gotoandstop (1);
};
Events when the mouse is pressed and released
Menu01_mc.onrelease = function () {
Jump to URL address
GetURL ("
};

I think it should be read, I have added a note. The same as the button, as follows

On (release) {
GetURL ("http://www.flash8.net/bbs/");
}

It's all done here. A navigation bar is just like that. Then you can repeat your work.
Everyone look at the effect. Just do it if you like.

If more than one navigation column, the above code is too annoying to write, you can change to this, you should first change the name of the navigation bar to
Menu1,menu2,menu3,menu3,menu4,menu5

Myurl = ["Http://bbs.flash8.net", "http://bbs.flash8.net", "http://bbs.flash8.net", "http://bbs.flash8.net", "http:/ /bbs.flash8.net "];
Number of navigation bars
Numofmenu = 5;
For (I=1 i<=numofmenu; i++) {
Mouse Past Events
menu = eval ("menu" +i);
MENU.I = i;
Menu.onrollover = function () {
The movie clip starts to jump to frame 2nd and starts playing
This.gotoandplay (2);
};
Events when the mouse moves out of the range of the movie clip and presses the mouse out of the movie clip range
Menu.onrollout = Menu.ondragout=function () {
The movie clip starts to jump to frame 1th and stops playing
This.gotoandstop (1);
};
Events when the mouse is pressed and released
Menu.onrelease = function () {
Jump to URL address
GetURL (Myurl[this.i-1]);
};
}

Click here to download the source file