AS Function Code Tutorial: fish eye magnifiers

Next, we will use the graphic method to explain this instance.

Ideas:
1. The fish eye magnifiers are composed of several gradually smaller circles;
2. Enable each circle to mask an increasing Image. The inner circle mask is larger than the image, and the outer circle mask is smaller than the image;
3. the last important step is "focus". Because the image is getting bigger, the point where the mouse is located may be the head of the thumbnail, but the big image may be out of the room, the displayed result is incorrect. The use of "Focus" allows you to place the cursor on the small graph as the head and the big image as the head. This gives you an impression. See the illustration below.

 

1. first, put two video clips on the stage, one of which is an image, the instance name is "pic", and the registration point is on the top left (0, 0); the other is a circle, the size is 200*200, the instance name is "ball". The registration point is in the center;

 

2. A fish eye magnifier is composed of several gradually smaller circles. These circles overlap as lenses and are simultaneously imaged. The larger the number of circles (lenses), the finer the imaging effect, the number in the figure is 3. The code is as follows:

Var Count: Number = 3;
// Copy the number of circles (lenses)
For (var I = 0; I <Count; I ++ ){
Var B = ball. duplicateMovieClip ("B" + I, I * 2 + 1 );
// Copy the circle
B. _ xscale = B. _ yscale = (1-i/Count) * 100;
// Scale the circle = (1-The number of I-th circles/circles) * 100, for example: 100 ~ 90 ~ 80 ~ 70
}

 

 

3. Each circle is loaded with an increasing Image. First, create these images. The number of images is 3. The code is as follows:

Var Count: Number = 3;
// Copy the number of circles (lenses)
Var Zoom: Number = 0.08;
// Increment of image enlargement
For (var I = 0; I <Count; I ++ ){
Var dif = 1 + I * Zoom;
// The scaling ratio (dif) is incremental, for example, 1.00 ~ 1.08 ~ 1.16 ~ 1. 24...
Var p = pic. duplicateMovieClip ("P" + I, I * 2 );
// Copy the image
P. _ xscale = p. _ yscale = dif * 100;
// Image scaling = incremental x 100, for example, 100 ~ 108 ~ 116 ~ 124...
}&

4. Based on the above implementation, the inner circle mask is larger than the image, the outer circle loads smaller images, and then adds a statement to save the initial scaling ratio.

Var Count: Number = 30;
// Copy the number of circles (lenses)
Var Zoom: Number = 0.08;
// Increment of image enlargement
For (var I = 0; I <Count; I ++ ){
Var dif = 1 + I * Zoom;
// Dif is the incremental value, for example, 1.00 ~ 1.08 ~ 1.16 ~ 1. 24...
Var B = ball. duplicateMovieClip ("B" + I, I * 2 + 1 );
// Copy the circle
B. _ xscale = B. _ yscale = (1-i/Count) * 100;
// Scale the circle = (1-The number of I-th circles/circles) * 100, for example: 100 ~ 90 ~ 80 ~ 70
B. Zoom = dif;
// Save the scaling ratio of the image
Var p = pic. duplicateMovieClip ("P" + I, I * 2 );
// Copy the image
P. _ xscale = p. _ yscale = dif * 100;
// Image scaling = incremental x 100, for example, 100 ~ 108 ~ 116 ~ 124...
P. setMask (B );
// Mask
}
Take a look at the demo animation below, which may help you understand its meaning.

These are two images without "focus". You should note that if you place the cursor on the red star of a small image, it may be the face of a person rather than the red star of a big image.

 

These are the two images after "focus". If you place your cursor on the red star of a small image, you need to place the cursor on the red star of a large image. For how to implement the "focus" function, see the following code:

_ Root. onMouseMove = function (){
For (var I = 1; I <= Count; I ++ ){
Var Bils = this ["B" + I];
Bils. _ x = _ xmouse;
Bils. _ y = _ ymouse;
// Move each lens with the mouse
This ["P" + I]. _ x = _ xmouse-(_ xmouse-pic. _ x) * Bils. Zoom;
This ["P" + I]. _ y = _ ymouse-(_ ymouse-pic. _ y) * Bils. Zoom;
// Adjust the position of each copied image
// New Position = mouse position-(mouse position-image position) * zoom ratio
 }
};

According to the "focus" formula:
New position = mouse position-(mouse position-image position) * zoom ratio
In this example, the position of the source image pic is (0, 0) on the top left. Therefore, the formula can be changed:
New position = mouse position-mouse position * zoom ratio

This formula is also difficult in this section. Taking the source image position on the top left (0, 0) as an example, if the cursor is on the right, the new position is a negative number, and the new position is shifted to the left, because the scaling ratio is greater than 1.00; otherwise, the two negative numbers are added, and the new position is shifted to the right. Okay. The entire process is as follows.

Step 1:
First, put two video clips on the stage, one of which is an image, the instance name is "pic", and the registration point is on the top left (0, 0); the other is a circle, the size is 200*200, instance name "ball". The registration point is in the center.

Step 2: Add the AS code to the first frame:

Var Count: Number = 30;
// Copy the number of circles (lenses)
Var Zoom: Number = 0.08;
// Increment of image enlargement
For (var I = 0; I <Count; I ++ ){
Var dif = 1 + I * Zoom;
// Dif is the incremental value, for example, 1.00 ~ 1.08 ~ 1.16 ~ 1. 24...
Var B = ball. duplicateMovieClip ("B" + I, I * 2 + 1 );
// Copy the circle
B. _ xscale = B. _ yscale = (1-i/Count) * 100;
// Scale the circle = (1-The number of I-th circles/circles) * 100, for example: 100 ~ 90 ~ 80 ~ 70
B. Zoom = dif;
// Save the scaling ratio of the image
Var p = pic. duplicateMovieClip ("P" + I, I * 2 );
// Copy the image
P. _ xscale = p. _ yscale = dif * 100;
// Image scaling = incremental x 100, for example, 100 ~ 108 ~ 116 ~ 124...
P. setMask (B );
// Mask
}
_ Root. onMouseMove = function (){
For (var I = 1; I <= Count; I ++ ){
Var Bils = this ["B" + I];
Bils. _ x = _ xmouse;
Bils. _ y = _ ymouse;
// Move each lens with the mouse
This ["P" + I]. _ x = _ xmouse-(_ xmouse-pic. _ x) * Bils. Zoom;
This ["P" + I]. _ y = _ ymouse-(_ ymouse-pic. _ y) * Bils. Zoom;
// Adjust the position of each copied image
// New Position = mouse position-(mouse position-image position) * zoom ratio
 }
};