Use Flash to make a clock mold that can be clicked freely

Clock

Several primary school teachers have been invited to do courseware for them, there are several classes are about the clock, in order to enable pupils to fully understand the clock, had to make a number of clock with time scale. I remember as a child, multi-media teaching has not appeared, the teacher in order to let us have an intuitive understanding of the clock. Use a piece of cardboard and a small stick to make the clock mold, and then click to show us, let's touch it, recognize it. So, I think, can be done through multimedia to make a clock mold, free to toggle. After many ponders, finally finished. The main ideas are as follows:

First, let's analyze the process of flipping the pointer:

1. The mouse presses a pointer (hour or minute).

2. Drag the mouse, at which point the pointer rotates with the mouse.

So how can you let the pointer rotate with the mouse? As shown in Figure 1: If the mouse starts at point A and then moves the mouse to point B, just calculate the ∠AOB, and then rotate the pointer to the ∠AOB degree.

3. Release the mouse and the pointer stops turning.

Through the above process, we can preliminarily simulate the effect of the toggle pointer.
So how do you get the angle of rotation? First let's take a look at how the coordinates are set in Flash (as shown in Figure 2), where the upper-left corner of the scene is the coordinate origin (0,0), if the scene is set to 400x400. The lower-right corner coordinates are (400,400). If we need a line OA to go to OB, in mathematics we will be evaluated by a series of function operations, but in Flash we do not have to, because the SetProperty function in Flash is not the same as the point at which the film begins, but rather the position relative to the OC ( Parallel to the X axis and through the movie clip's reference point, which is only required to ∠cob the value of the line, and for this problem is very simple. To set the B-point coordinates to (350,350), we use the B-point coordinates minus the coordinates of the center o Point (x, y), and then the ∠cob value can be obtained by arctan (y/x). Also from OB to OA is the case, only required OA relative OC value can be obtained. In Flash, we also take figure 2 as an example, the OC rotates downward to a positive value until it terminates on the reverse line of the OC, while the upward rotation is negative and the same is terminated on the reverse line of OC, so that the intersection of the circle of the opposite line of OC and the degree of OC is expressed in two ways, namely 180° and -180°. Since the value we are seeking is consistent with this, we do not require any changes to the notation for the value being evaluated.

The specific algorithm is: ∠a=arctan (Ay-oy/ax-ox), where a is the position of the pointer after the rotation and the point of intersection, while the O-point is the coordinate point of the center of the circle.

We have already understood the main algorithm and the process, then in Flash how will we implement? Now let's take a look at the specific meaning of the main functions we use in Flash.

　　One, Math. atan2 (y x)

Calculates and returns the tangent value of the y/x in radians. The return value represents the angular angle of the opposite right triangle, where x is the adjacent edge length, and y is the side length. Because the last return is radians. So we need to turn it into an angle. Math.atan2 (y,x) *180/math. Pi

　Second, setproperty″target″propertyvalue/expression

When the movie plays, change the property values for the movie clip. Target is the path to change the target, property is the attribute to set, Value/expression is an expression of the new value or value of the property.

The preparation is ready, now let us enter the actual combat stage!

1. Open Flash, new file, change its scene size for 400x400.

2. Insert a movie clip named the minute hand.

3. Click on the line tool to draw a blue line with a height of 100, thick 4.5, and vertical upwards. Make it to the bottom of its central cross (which is to set the reference point we mentioned earlier).

4. The same method creates the hour hand. The color is red, the length is 80, the width is 8.

5. Import a clock face without a pointer. Create two more layers drag the hour and minute hands from the library to the main scene, respectively. Named Shizhen, Fenzhen.

6. Position the two pointers to the middle of the clock face respectively.

7. Code. Because two pointers function the same, you can reduce the size of your code by using a function. In the first frame, add the following code:

logo=0; Determine if the mouse presses a variable

function Zhuan (mm)

{x=_xmouse;//Assign the current mouse's horizontal axis to X

Y=_ymouse; Assign the ordinate to Y when the mouse is turned off
M=math.atan2 (y-200,x-200) *180/math. PI; The rotation angle is obtained, because the center point coordinate of the clock plane is (200,200), we can set according to the actual situation.

SetProperty (MM,_ROTATION,M); To rotate a movie clip

Right-click the movie clip and add the following action:

On (press) {logo=1;} Because we need the mouse to press and drag are triggered events, so the logo as a variable to control whether the mouse is pressed, if the mouse press logo is Non-zero

On (release, releaseoutside) {logo=0} Mouse Release logo is zero

Onclipevent (MouseMove) {//mouse movement runs the following code

if (logo==1)//Determine if the mouse is pressed

{_root.zhuan (_root.shizhen);} Calling the Zhuan function

}

For the minute hand we simply Change _root.zhuan (_root.shizhen) to _root.zhuan (_root.fenzhen). At this point, our clock mold is complete.