Flash makes a tutorial on refraction and full reflection of light

Tutorial

This is a reflection of the refraction of light and reflection of the law of Flash animation, the effect is mainly achieved by programming, we can first look at the effect:

Click here to download the source file

As you can see, the entire Flash animation consists of three parts:

First, basic components: reflected light, refraction light, normal (and the vertical value of the interface), light source, sub-interface
Second, the display of various angles
Third, the realization of animation

In these three sections, the tutorial will focus on the third part, the whole programming ideas will be explained in detail, okay, cut the crap, start now.

　　First, the production of basic components

This step is mainly the use of flash drawing tools to complete the reflection of light, refraction of light, normal, interface of the painting is the same, so only one example is enough, such as drawing the demarcation surface:

1, select the tool area line tool, line thickness default, in the home scene hold down the Shifi key to draw a line of the appropriate length of segments.

2. Select line segment, right key-convert to component-movie clip, its parameters are set in figure, turn it into movie clip

3, double-click the interface components, into the editing state, select the tool bar Text tool, in the appropriate position of the interface element to add text description as shown

The other representations are consistent, and the difference is:

1, the normal according to the physical drawing is dashed, this can be in the scene below the property bar settings, in the stroke style selection as shown

2, refraction of light and reflect the light of the registration point selected in the left middle position, the components have been painted well? Here are the names of the various components, this name and conversion to the component when the naming function is different, this time the name will be used in the script. Drag the components to the scene, select the component separately, then select the properties below the scene-clip name, named after the Chinese phonetic custom, such as the interface named FJM

The other name, reflected light named FS, refraction light named Zs, normal named FX, as for that luminous light source, I am using the tool bar Rectangle tool to draw, is too ugly, you should draw is better than me, likewise, draws well, selects it, the right key-transforms the component-movie clip, named JG (Laser). Perhaps you will ask, the incident light, do not worry, this light is a script to achieve

　　Second, the production of display text

This step involves the use of dynamic text and static text in the Text tool

1, select the Text tool, at this time the text tool by default is static text, click on the scene in the upper right corner, in the click of a text box, where the input "angle of incidence" three words

2, the same choice of text tool, select the scene below the Properties dialog box, click on the text Type Drop-down menu, there will be three options, static text, dynamic text, input text, here Select dynamic text, used to dynamically display the value of incident angle, in the previous step of the text "angle of incidence" after holding down the left mouse button pull a text box, select the text box, Select the properties below and name the RSJ at the variable (angle of incidence) as shown

Finally, in the dynamic text after the static text input unit "degree", the basic practice is so, followed by the refraction angle (ZSJ), Reflection angle (FSJ), Critical angle (LJJ) of the production of the text, the effect is as shown

　　Third, the realization of animation

1. Theoretical analysis

This part is mainly the script, we first familiar with some refraction laws, high school physics tells us that when a beam of light from a light dense medium to a light hydrophobic medium (such as from water or glass enters the air), it is possible to have total reflection (at this time only reflected light), provided that the incident angle of light in the optical dense medium is greater than the critical angle ( Can look at the physics textbook Oh, I'm basically just giving the conclusion that the critical formula sinc=1/n (n is the refractive index), that is, the C=arcsin (1/n), and the angle of light in the air to the normal and the angle of the light in the medium to the normal. R satisfies the Refraction law formula N=sin (i)/ Sin (r), so there is I=arcsin (R), as the other reflected light is simple, the angle of incidence equals the angle of reflection, and according to the conservation of energy, the total energy of the incident light = The energy of the reflected light, which is reflected by their transparency (alpha value).

2, Code Analysis

The complete code is as follows

fjm._y = 200;
fx._x = 250;
zs._x = 250;
zs._y = 200;
fs._x = 250;
fs._y = 200;
n = 1.5;
Onenterframe = function () {
Jg.onmousedown = function () {
This.startdrag (True, 0, 200, 500, 500);
};
Jg.onmouseup = function () {
This.stopdrag ();
};
This.createemptymovieclip ("MC", 100);
Mc.linestyle (2, 0xff0000, 100);
Mc.moveto (250, 200);
x = jg._x;
y = jg._y;
Mc.lineto (x, y);
A = Math.atan2 (y-200, x-250);
Jg._rotation = a*180/math.pi+180;
C = Math.asin (1/n);
LJJ = Math.Round (C*180*10/MATH.PI)/10;
if (x<250) {
R = A-MATH.PI/2;
if (r<c) {
i = Math.asin (N*math.sin (R));
Zs._rotation = -90+i*180/math.pi;
Zs._alpha = 100-i*60;
} else {
Zs._alpha = 0;
}
else if (x>250) {
R = math.pi/2-a;
if (r<c) {
i = Math.asin (N*math.sin (R));
Zs._rotation = -90-i*180/math.pi;
Zs._alpha = 100-i*60;
} else {
Zs._alpha = 0;
}
}
Fs._rotation = 180-a*180/math.pi;
RSJ = Math.Round (R*180*10/MATH.PI)/10;
if (r<c) {
ZSJ = Math.Round (I*180*10/MATH.PI)/10;
} else {
ZSJ = "full reflection";
}
FSJ = Math.Round (R*180*10/MATH.PI)/10;
Fs._alpha = i*60;
};

Okay, now let's start analyzing how the code is written, look at a graph

I can see that I have divided the scene into 4 regions using the interface and normal, which is equivalent to the first to the Forth quadrant in mathematics, which is initialized in code as follows

fjm._y = 200;
fx._x = 250;
The above mentioned intersection point is equivalent to the coordinate origin (250,200)
The x and Y coordinates of refraction light and reflected light are 250,200 (i.e. coordinate origin).
zs._x = 250;
zs._y = 200;
fs._x = 250;
fs._y = 200;

By the above initialization, refraction of light, the registration point of reflection light must be on the left (see component making) at the same time from the diagram that the incident light can only in 3, 4 quadrant, means that the light source can only be moved in the 3, 4 quadrant, so the light source (laser JG) components can only be dragged below the plane, the best

This.startdrag (True, 0, 200, 500, 500);

The next step is to solve the relationship between angle of incidence and refractive angle, or look at a graph

In this screenshot The incident light is in the third quadrant, corresponding to the refraction of the light in the first quadrant, and the rotation of the flash is implemented with its properties _rotation, which represents the degree to which the specified movie clip rotates relative to its original orientation in degrees. A value from 0 to 180 indicates a clockwise rotation, and a value from 0 to 180 indicates a counter-clockwise rotation. So first of all, to get the angle of incidence of the incident light a, but we have no incident light in the components above ah, how to come, is actually using the following code to draw

This.createemptymovieclip ("MC", 100);
Mc.linestyle (2, 0xff0000, 100);
Mc.moveto (250, 200);
x = jg._x;
y = jg._y;
Mc.lineto (x, y);

So, a can use inverse trigonometric functions to get the code

A = Math.atan2 (y-200, x-250);

It is known from the figure that the true incidence angle is r = A-MATH.PI/2; its refractive angle i = Math.asin (1.5*math.sin (R)) from the figure that refraction light rotation angle should be -90+i*180/math.pi, the corresponding code for

if (x<250) {
R = A-MATH.PI/2;
if (r<c) {
i = Math.asin (N*math.sin (R));
Zs._rotation = -90+i*180/math.pi;
Zs._alpha = 100-i*60;
} else {
Zs._alpha = 0;
}

You may be asked, Zs._alpha = 100-i*60; What is the algorithm of this sentence, according to the laws of physics, when the refractive angle, the greater the energy, when the refraction of 90 degrees of total reflection, the corresponding refraction of light energy is zero, reflected in the animation for its _alpha value is getting smaller, According to the actual calculation for zs._alpha = 100-i*63.7, but consider the actual effect, forget it, that's it. Conversely, the reflection light energy is more and more large, when total reflection, the maximum energy, equal to the intensity of incident light, with code Fs._alpha = i*60 Implementation, how, clear?

The rest is when the incident light is in the fourth image, and look at a similar figure.

The corresponding code is as follows

else if (x>250) {
R = math.pi/2-a;
if (r<c) {
i = Math.asin (N*math.sin (R));
Zs._rotation = -90-i*180/math.pi;
Zs._alpha = 100-i*60;
} else {
Zs._alpha = 0;
}
}

Finally solve the simplest reflection of the light rotation problem, in fact, by the penultimate figure is very easy to get its code for

Fs._rotation = 180-a*180/math.pi;