Wonderful dynamic navigation menu making detailed

Menu | navigation | news |

Formulas are useful in making special effects, and the famous Samsung navigation menu uses this formula. Now a lot of South Korea's Web site out of the limelight, of which the buffer navigation is a big bright spot. This paper takes the navigation of a German website as an example to explain the production of buffer navigation. Thanks for the coordinate algorithm provided by the solvent.

This example effects preview:

Production ideas

1, Picture Zoom control
Use the buffer formula to set the zoom ratio of the picture, if the mouse slides over a picture, magnified 1.8 times times. If the number of other pictures and the number of this picture is 1, is the picture on both sides of the image, magnified 1.4 times times, the other is the original size.
2. Picture Coordinate control
When a picture is enlarged, the coordinates of the adjacent picture are equal to the coordinates of the picture, plus half the width of the two pictures, to achieve the image without spacing.
3, line and text control
Lines are implemented with line functions, and the coordinates and scaling of the text are the same as the corresponding pictures.
Production process
1, start flash, create a new movie, set the movie size for 600px*200px.
Prepared as the material in the picture, the image of the instance name is Zjs0 to Zjs4, the text of the instance name is z0 to Z4 respectively.
The middle of the picture coordinates set to (300,130), select all the pictures, press Ctrl+k to bring up the arrangement panel, set to the top alignment, so that the image of the y coordinates, the image of the x coordinates through as to control. Use the same method to make the y-coordinate of the square word the same, and adjust the spacing between the text and the picture.
2. Add the following code to the first frame of the home scene

var myx = this["Zjs" +2]._x;　 Gets the X coordinate for the middle picture for (var i = 0; i<5; i++) {this["zjs" +I].N = i;　　 Each picture MC defines a variable this["zjs" +i].onrollover = function () {control = true;　 True when the mouse slides over the picture;　　 this["Zjs" +i].onrollout = function () {control = false; When the mouse moves out of the picture is false};　　 } onenterframe = function () {for (var k = 0; k<5; k++) {this["z" +k]._x = this["Zjs" +k]._x;　　 Descriptive text of the x-coordinate is equal to the image of the X coordinate this["z" +k]._xscale = this["Zjs" +k]._xscale;　　 This["Z" +k]._yscale = this["Zjs" +k]._yscale;　 The description text has the same scaling ratio as the picture} if (control) {mouse_in ();　 else {mouse_out (); }//Condition True or false call function};　　 Coordinates set function SetX () {for (var k =-2; k<3; k++) {this["Zjs" + (k+2)]._x = myx+this["Zjs" +2]._WIDTH*K;　 The middle picture is aligned without spacing} for (var k = number (TEMP1) +1; k<5; k++) {//TEMP1 is the variable value under the picture with the largest zoom ratio var MC1 = this["Zjs" +k];　 var mc2 = this["Zjs" + (k-1)];　 Other pictures to the right of this picture mc1._x = mc2._x+ (mc2._width+mc1._width)/2-1; Set the x coordinates of these pictures, 1 to eliminate the gap between the pictures for (var k = number (TEMP1)-1; k>-1;　 k--) {var mc1 = this["Zjs" +k];　 var mc2 = this["Zjs" + (k+1)]; mc1._x = mc2._x-(mc2._width+mc1._width)/2+1; ///Zoom to the top of the picture's left picture of the X coordinate set myline ();　 The line below the picture}//Scaling functions function Move_scale (x, obj) {speed = (X-obj._xscale) *.65+speed*0.6;　 Obj._xscale + = speed;　 Obj._yscale + = speed; Buffer formula, X for picture scaling, obj for MC}//mouse over picture, zoom of picture, X coordinate set function functions mouse_in () {for (var i = 0; i<5; i++) {var mc = Thi　 s["Zjs" +i];　　 Gets the instance name if (Mc.hittest (_xmouse, _ymouse, True)) {Move_scale (180, MC);　　 If the mouse is positioned above the picture, enlarge the picture 1.8 times times Temp1 = MC.N;　　 Assign the variables under this picture to the variable Temp1} else if (Math.Abs (MC.N-TEMP1) = = 1) {Move_scale (140, MC);　　 On both sides of the picture scale magnified 1.4 times times} else {Move_scale (MB, MC); Other pictures are original size}} SetX (); Set the X coordinate of the picture///mouse to move out of the picture, the picture's zoom, x coordinates set function functions Mouse_out () {for (var i = 0; i<5; i++) {Move_scale (this["Z　　 JS "+i]);　 The scaling ratio is 1, restoring the original Size} SetX ();　 Coordinate recovery}//Line functions function Myline () {Createemptymovieclip ("lines", 1); Create an empty movie with (lINE) {LineStyle (0.1, 0xff9933, 100);　　 MoveTo (ZJS0._X-ZJS0._WIDTH/2, zjs0._y+10);　　 LineTo (ZJS4._X+ZJS4._WIDTH/2, zjs4._y+10);　　 Below the picture horizontal straight line MoveTo (ZJS0._X-ZJS0._WIDTH/2, zjs0._y+5);　　 LineTo (ZJS0._X-ZJS0._WIDTH/2, zjs0._y+15);　　 Vertical Straight line MoveTo (ZJS4._X+ZJS4._WIDTH/2, zjs4._y+5) on the right;　　 LineTo (ZJS4._X+ZJS4._WIDTH/2, zjs4._y+15); Vertical line on left}}

According to Ctrl+enter test, this example is completed. After mastering the principle, plus good ideas, I believe you can make better effects.

　　SOURCE download