The buffer formula is useful in making special effects, and the famous Samsung navigation menu uses this formula. Now many sites out of the limelight, which 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. This effect is I and the solvent together, he provides the coordinates of the algorithm, I provide scaling algorithm.
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.
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.
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
Get the x-coordinate of the middle picture
for (var i = 0; i<5; i++) {
this["Zjs" +I].N = i;
Define a variable in each image MC
this["Zjs" +i].onrollover = function () {
Control = true;
True when the mouse is over the picture
};
this["Zjs" +i].onrollout = function () {
Control = false;
False when mouse moves out of picture
};
}
Onenterframe = function () {
for (var k = 0; k<5; k++) {
This["Z" +k]._x = this["Zjs" +k]._x;
The X coordinate of the description text equals the x coordinate of the picture
This["Z" +k]._xscale = this["Zjs" +k]._xscale;
This["Z" +k]._yscale = this["Zjs" +k]._yscale;
Description text has the same scaling ratio as the picture
}
if (control) {
Mouse_in ();
} else {
Mouse_out ();
}
Call a function when the condition is true or false
};
Coordinate set function
function SetX () {
for (var k =-2; k<3; k++) {
this["Zjs" + (k+2)]._x = myx+this["Zjs" +2]._WIDTH*K;
Arrange without spacing in middle picture
}
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;
}
The x-coordinate settings for the picture on the left of the picture with the largest zoom ratio
Myline ();
The line underneath the picture
}
Proportional scaling function
function Move_scale (x, obj) {
Speed = (X-obj._xscale) *.65+speed*0.6;
Obj._xscale + = speed;
Obj._yscale + = speed;
Buffer formula, X is the zoom ratio of the picture, obj is MC
}
When the mouse over the picture, the picture's zoom, x-coordinate set function
function mouse_in () {
for (var i = 0; i<5; i++) {
var mc = this["Zjs" +i];
Get Instance Name
if (Mc.hittest (_xmouse, _ymouse, True)) {
Move_scale (180, MC);
If the mouse is over the picture, the picture is magnified 1.8 times times
Temp1 = MC.N;
Assign variables under this picture to the variable Temp1
else if (math.abs (MC.N-TEMP1) = = 1) {
Move_scale (140, MC);
The picture on both sides is magnified 1.4 times times
} else {
Move_scale (MC);
Other pictures are of the original size
}
}
SetX ();
Set the x coordinate of a picture
}
When the mouse moves out of the picture, the picture's zoom, x-coordinate set function
function Mouse_out () {
for (var i = 0; i<5; i++) {
Move_scale (this[, "Zjs" +i));
Zoom to 1, restore original size
}
SetX ();
Coordinate recovery
}
Line function
function Myline () {
Createemptymovieclip ("line", 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);
Horizontal line below the picture
MoveTo (ZJS0._X-ZJS0._WIDTH/2, zjs0._y+5);
LineTo (ZJS0._X-ZJS0._WIDTH/2, zjs0._y+15);
Vertical straight line to the right
MoveTo (ZJS4._X+ZJS4._WIDTH/2, zjs4._y+5);
LineTo (ZJS4._X+ZJS4._WIDTH/2, zjs4._y+15);
Vertical straight line to the left
}
}
According to Ctrl+enter test, this example is completed. After mastering the principle, plus good ideas, I believe you can make better effects.