Chapter 3 Introduction to Triangle Learning application (2) (as3.0)

Arctangent)
   As you may have guessed, it is simply the inverse function of the tangent function. We only need to input the opposite side and the adjacent side.
To obtain the corresponding angle.
   There are two functions in flash that can calculate the arc tangent. The first one is just like the previous functions.
Math. atan (ratio), you only need to provide the ratio of the edge to the adjacent edge. For example, the tangent of the last 30 degrees angle is approximately
0.577. Try:
Trace (math. atan (0.577) * 180/Math. Pi );
The output result is an approximate number of 30. Isn't it very intuitive and easy to understand? Why do I need another function? Please
See Figure 3-13 and let it answer:

Figure 3-13 corner on the four quadrants
    As shown in 3-13, there are four different angles: A, B, C, and D. The angles A and B are positive numbers on the X axis, and the angles C and D
Negative on the X axis. Similarly, the angles A and D are negative on the Y axis, while the angles B and C are positive on the Y axis. Therefore
The ratios of inner angles are:
A:-1/2 (-0.5)
B: 1/2 (0.5)
C: 1/-2 (-0.5)
D:-1/-2 (0.5)
   The ratio of an edge to an adjacent edge is 0.5. Input math. atan (0.5) and convert it to an angle. The result is about 26.57,
So what exactly is angle B or angle D? If the two ratios are both 0.5, they cannot be distinguished. It seems to be a small problem,
However, it has a huge impact on future work.
    Please refer to math. atan2 (Y, x) below. This is another arc tangent function of flash, which is better than math. atan (ratio)
It is much more useful. In fact, you only need to learn how to use this function. The function includes two parameters: the length of the edge.
Degree and adjacent edge length. Sometimes it is written as X, Y by mistake. Note that it should be y, X. See the following example.
Math. atan2 (), and then remember the result:
Trace (math. atan2 (1, 2) * 180/Math. Pi );
The output value is 26.565051177078, which is the degree of angle B. Enter-1/-2 (Corner d) Next and try again:
Trace (math. atan2 (-1,-2) * 180/Math. Pi );
Unexpected result-153. 434948822922. Why? Figure 3-14 can be explained to you.

Figure 3-14 Two Representation Methods of an angle
     Starting from the bottom side of corner D itself, it is indeed 26.57 degrees, but don't forget that the flash angle is from the front half of the X axis.
The axis is calculated clockwise. Therefore, from the flash perspective, the angle is regarded as-153.43 degrees. Next we will open
I started to practice and apply triangle in flash.
Rotation)
     We want a video clip or sprite to point to the mouse position through rotation, This will be a challenge. Spin
Rotation will be a very useful tool in our toolbox. It can be used in game production, mouse tracking, and interface design.
.
     The following is an example. You can also follow these steps or open the document class rotatetomouse. As and
Arrow. As (downloaded together with other code in this book at www.friendsofed.com), these are already written code.
First, you need to rotate the object. It can be an arrow drawn in Sprite (arrow ). In fact, if I
We need to apply this arrow repeatedly to make it into a class:
Package {
 Import flash. display. Sprite;
 Public class arrow extends sprite {
  Public Function arrow (){
    Init ();
  }
  Public Function Init (): void {
    Graphics. linestyle (1, 0, 1 );
    Graphics. beginfill (0xffff00 );
    Graphics. moveTo (-50,-25 );
    Graphics. lineto (0,-25 );
    Graphics. lineto (0,-50 );
    Graphics. lineto (50, 0 );
    Graphics. lineto (0, 50 );
    Graphics. lineto (0, 25 );
    Graphics. lineto (-50, 25 );
    Graphics. lineto (-50,-25 );
    Graphics. endfill ();
  }
 }
}
     The drawing API (which will be introduced in the next chapter) is used to draw arrows. Whenever you need an arrow, you only need
Write a new arrow () statement. The result is displayed in Figure 3-15. When drawing and rotating some images,
Note that it points to the positive Half Axis of X, which is the State when it is rotated to 0 degrees.
     First, we need to create an arrow class instance, place it in the center of the stage, and let it point to the direction of the mouse.

Figure 3-16 Values to be calculated next time
   Are you familiar with this? It is the same as the triangle we mentioned earlier, except that the coordinates of the mouse and arrow are added.Mouse
You only need to use the mousex and Mousey attributes to obtain the position of the arrow. Similarly, you can use the X and Y attributes to obtain the position of the arrow.
To subtract their values, the length of the two edges is obtained. Now you only need to use math. atan2 (dy, dx ).
Output angle, convert the result to angle, and make the rotation attribute of the arrow equal to the angle. The Code is as follows:
VaR DX: Number = mousex-arrow. X;
VaR DY: Number = mousey-arrow. Y;
VaR radians: Number = math. atan2 (dy, dx );
Arrow. Rotation = radians * 180/Math. Pi;
Of course, to make it an animation, you also need to add a loop. As mentioned in the previous chapter
It is the best choice. Use the enterframe event. The following is the complete document class:
Package {
 Import flash. display. Sprite;
 Import flash. Events. event;
 Public class rotatetomouse extends sprite {
  Private var Arrow: Arrow;
  Public Function rotatetomouse (){
    Init ();
  }
  Private function Init (): void {
    Arrow = new arrow;
    Addchild (arrow );
    Arrow. x = stage. stagewidth/2;
    Arrow. Y = stage. stageheight/2;
    Addeventlistener (event. enter_frame, onenterframe );
  }
  Public Function onenterframe (Event: Event): void {
    VaR DX: Number = mousex-arrow. X;
    VaR DY: Number = mousey-arrow. Y;
    VaR radians: Number = math. atan2 (dy, dx );
    Arrow. Rotation = radians * 180/Math. Pi;
  }
 }
}
   Make sure that the rotatetomouse. As file is in the same directory as the Arrow. As file
As a document class and create SWF for it. How is it? Just like magic! Suppose we do not have math. atan2
To use this function, we must first use dy divided by dx to obtain the ratio of the logarithm to the adjacent edge, and then write the math. atan function.
The following uses the math. atan function to replace the math. atan2 function. The Code is as follows:
VaR radians = math. atan (dy/dx );
   Try this method and you will soon find the problem. If the mouse is on the left side of the arrow, the arrow does not point to the mouse, and
Deviated from the mouse. Can you tell me why? Return to the graph with four corners A, B, C, and D (Figure 3-13). Do not forget the corners A and C.
Having the same ratio, the same is true for angle B and D. In this way, flash cannot know which angle it refers to, so
                 If the mouse is in the D-angle area, flash will return to the B-angle area and point the arrow to this angle.
Only a and B can be obtained.
Without a doubt, the benefits of math. atan2 are displayed, and this function is often used in the book.

 

Waveform
You must have heard of the sine wave and seen the Figure 3-17.

Figure 3-17 sine wave
    So why do we need to associate the sine function with two irrelevant things of the sine image? If 0 to 360
Degrees (or 0 to 2 pi) are substituted into the sine function, then the sine function image is obtained. Left to right indicates
The angle value, and the Y coordinate change in the figure represents the sine value of these angles.
    Figure 3-18 shows some special angles. We can see that the sine value of 0 degrees is 0, 90 degrees or PI/2.
The sine value of is 1,180 degrees or the sine value of PI is returned to the positive value of 0,270 degrees or 3/2 pi which is-1,360 degrees.
The string value is 0. Next, use flash to try the sine wave and put the following code into the framework of the document class for testing:
For (VAR angle: Number = 0; angle <math. Pi * 2; angle ++ =. 1 ){
 Trace (math. Sin (angle ));
}
    From now on, we have to get used to Using radians only. Except for rotation or other attributes that only use Angle
In addition, you must begin to learn not to use the angle system.

Figure 3-18 sine Value
    In this example, the angle starts from 0 and increments by 0.1 until it is greater than math. Pi * 2.
. Let's take a look at the output results. We found that the angle is from 0, increased to 1, and then reduced to-1.
Then return to 0. These values do not really reach 1 or 0 accurately, because each increase of 0.1, so they will never get
To an integer multiple of PI or PI/2.
Smooth upward and downward motion
    How to use math. Sin (angle? This function is required if you want to move an object up or down or left or right.
Number. Consider: use 0 ~ 1 ~ -1 ~ 0 changes to achieve this animation, and repeatedly use this waveform.
     The activity field is only from 1 to-1 and cannot see the effect. Therefore, we need to enlarge these values, for example, by 100.
Times. In this way, we have a waveform from 100 to-100, and it keeps going. In the following document, bobbing.
To use a Sprite film defined in the ball class, see the code:
Package {
 Import flash. display. Sprite;
 Public class ball extends sprite {
  Private var radius: number;
  Private var color: uint;
  Public Function ball (radius: Number = 40, color: uint = 0xff0000 ){
    This. radius = radius;
    This. Color = color;
    Init ();
  }
  Public Function Init (): void {
    Graphics. beginfill (color );
    Graphics. drawcircle (0, 0, radius );
    Graphics. endfill ();
  }
 }
}
     After this class is instantiated, a circle can be drawn. We can also provide the radius and face of the circle.
Color ). If these parameters are not given, the default parameter is used: the radius is 40, and the color is red (this is
As3.0 ). This class is very simple, but it is very useful and will be used frequently in books in the future.
Be sure to master.
     Creates a ball class instance for the document class, adds it to the stage, and adds an enterframe listener for it.
So that the ball can move up and down.
Package {
 Import flash. display. Sprite;
 Import flash. Events. event;
 Public class bobbing extends sprite {
  Private var ball: ball;
  Private var angle: Number = 0;
  Public Function bobbing (){
    Init ();
  }
  Private function Init (): void {
    Ball = new ball ();
    Addchild (ball );
    Ball. x = stage. stagewidth/2;
    Addeventlistener (event. enter_frame, onenterframe );
  }
  Public Function onenterframe (Event: Event): void {
    Ball. Y = stage. stageheight/2 + math. Sin (angle) * 50;
    Angle + =. 1;
  }
 }
}
First, an angle attribute with an initial value of 0 is required. In the onenterframe method, use the sine of this angle
Value and increase by 50 times. In this way, the value range is 50 to-50. Add another one of the stage heights to this value.
Half, the value is changed from 250 to 150 (set the stage height to 400 pixels), use this value as the Y coordinate of the ball, and finally
0.1 radians are added for the next cycle, so that the smooth up and down movements of the ball are completed. The values of each loop are inconsistent.
Similarly, we found that if we change 0.1 to another value, it will change the speed of the ball movement. Angle
The speed of conversion is proportional to the speed at which math. Sin changes from 1 to-1. Obviously, the value of 50 is changed slightly.
The moving distance of the ball. Changing the value of stage. stageheight/2 changes the position around the ball.
We can also give some abstract values as variables. The Code is as follows (only the part that needs to be changed or added ):
// At the top of the class:
Private var angle: Number = 0;
Private var centery: Number = 200;
Private var range: Number = 50;
Private var speed: Number = 0.1;
// And the handler function:
Public Function onenterframe (Event: Event): void {
 Ball. Y = centery + math. Sin (angle) * range;
 Angle + = speed;
}
No specific values are used in the motion code. This is a really good exercise and should be done as much as possible in the future.

 

Linear Vertical Motion
     Linear vertical motion is added to the wave1.as file, which just gives us some inspiration for making animations. Below
Is the code of this file:
Package {
 Import flash. display. Sprite;
 Import flash. Events. event;
 Public class wave1 extends sprite {
  Private var ball: ball;
  Private var angle: Number = 0;
  Private var centery: Number = 200;
  Private var range: Number = 50;
  Private var xspeed: Number = 1;
  Private var yspeed: Number =. 05;
  Public Function wave1 (){
    Init ();
  }
  Private function Init (): void {
    Ball = new ball ();
    Addchild (ball );
    Ball. x = 0;
    Addeventlistener (event. enter_frame, onenterframe );
  }
  Public Function onenterframe (Event: Event): void {
    Ball. x + = xspeed;
    Ball. Y = centery + math. Sin (angle) * range;
    Angle + = yspeed;
  }
 }
}

 

 

Heartbeat
     The sine value is used as a tool not only to control physical locations. In the pulse. As file, use
To affect the scaling of the ball and achieve a heartbeat effect. The Code is as follows:
Package {
 Import flash. display. Sprite;
 Import flash. Events. event;
 Public class pulse extends sprite {
  Private var ball: ball;
  Private var angle: Number = 0;
   Private var centerscale: Number = 1;
  Private var range: Number =. 5;
  Private var speed: Number =. 1;
  Public Function pulse (){
    Init ();
  }
  Private function Init (): void {
    Ball = new ball ();
    Addchild (ball );
    Ball. x = stage. stagewidth/2;
    Ball. Y = stage. stageheight/2;
    Addeventlistener (event. enter_frame, onenterframe );
  }
  Public Function onenterframe (Event: Event): void {
    Ball. scalex = ball. scaley = centerscale +
                                 Math. Sin (angle) * range;
    Angle + = speed;
  }
 }
}
The principle is the same. centerscale indicates the scaling ratio of 100%, range indicates the range, and speed indicates the speed. No
In this case, the sine wave is also applied to attributes such as alpha and rotation.

 

Dual-angle Waveform
   Another idea is to set two sets of numbers angle1 and angle2 to add a central point for each of them.
(Center) and speed values. One sine wave is used as one attribute, and the other sine wave is used as another attribute,
Such as location or scaling. I am not sure what useful results can be obtained, but doing so is equivalent to making these functions
Free to play its role.
   Starting from the random. As document class, there are two angles, two speeds, and two
The center uses angle1 as the X coordinate of the ball, and angle2 as the Y coordinate.
When running a program, it is like a bug flying in the room. Although these numbers are pre-defined, the results are nothing.
Rules. The Code is as follows:

Package {
 Import flash. display. Sprite;
 Import flash. Events. event;
 Public class random extends sprite {
  Private var ball: ball;
   Private var anglex: Number = 0;
   Private var angley: Number = 0;
   Private var centerx: Number = 200;
   Private var centery: Number = 200;
  Private var range: Number = 50;
   Private var xspeed: Number =. 07;
   Private var yspeed: Number =. 11;
  Public Function random (){
    Init ();
  }
  Private function Init (): void {
    Ball = new ball ();
    Addchild (ball );
    Ball. x = 0;
    Addeventlistener (event. enter_frame, onenterframe );
  }
  Public Function onenterframe (Event: Event): void {
    Ball. x = centerx + math. Sin (anglex) * range;
    Ball. Y = centery + math. Sin (angley) * range;
    Anglex + = xspeed;
    Angley + = yspeed;
  }
 }
}

 

Draw Waveforms
    Finally, in wave2.as,
          In          Instead of using small balls, you can use the drawing API to draw a sine wave. The Code is as follows:
Package {
 Import flash. display. Sprite;
 Import flash. Events. event;
 Public class wave2 extends sprite {
 Private var angle: Number = 0;
 Private var centery: Number = 200;
 Private var range: Number = 50;
 Private var xspeed: Number = 1;
 Private var yspeed: Number =. 05;
 Private var xpos: number;
 Private var ypos: number;
 Public Function wave2 (){
   Init ();
 }
 Private function Init (): void {
    Xpos = 0;
    Graphics. linestyle (1, 0, 1 );
    Graphics. moveTo (0, centery );
    Addeventlistener (event. enter_frame, onenterframe );
  }
  Public Function onenterframe (Event: Event): void {
    Xpos + = xspeed;
    Angle + = yspeed;
    Ypos = centery + math. Sin (angle) * range;
    Graphics. lineto (xpos, ypos );
  }
 }
}
     In the next chapter, we will describe the drawing API in detail. You should also be interested in executing this file and observe the painting.
Waveform. Note that the Y axis of Flash is reversed, so the waveforms drawn are reversed.