Flash dynamic buffering picture navigation production detailed

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.