Detailed description of Drag and Drop actions and collision actions in the Flash AS tutorial

Note: The following tutorials are all available in the Flash MX version! Some objects in flash films that are often seen on the Internet can be dragged by the mouse. For example, some jigsaw puzzle games, slide that controls the volume, use the drag action in flash.

　　1. Detailed introduction to drag and drop commands

1. First, we will introduce the detailed usage of the drag-and-drop command. We will test it later in the following example.
　　
Command Format: StartDrag (video clip to be dragged, [whether to lock to the center of the mouse position, left, top, right, bottom])
Or write
The video clip to be dragged. StartDrag ([whether to lock to the center of the mouse position, left, top, right, bottom])

Command Description: You can choose one of the above two writing methods during the animation production process. The parameters in [] can be written or not written. The left, top, right, and bottom parameters are used to control the moving range of the dragged object.

2. Stop dragging command

Command Format: name of the dragged video clip instance. stopDrag ()

In this way, you can stop dragging objects.

　　Ii. Examples

Next we will use a simple example to drag the experiment command.

　　Procedure:

1. Create a new flash document and draw a circle on the stage. Select a circle and press F8 to convert the circle into a video clip and name it a circle. After confirmation, a circle instance will be created on the stage. For example:

2. Select the instance and press F9 to open the action panel. Enter the following script:
On (press ){
This. startDrag (true); // when the mouse is pressed (press), this instance (because we have written the script in the instance itself, so here we use this to replace the name of the video editing instance) it can be dragged and interpreted using the command above. For parameter selection, only the lock to the center of the mouse is entered here. If you want to choose not to lock to the center of the mouse, you can change true to false. If you are interested, you can change it to false.
}
On (release ){
This. stopDrag (); // Similarly, when the mouse is released (release), the drag and drop operation will be stopped.
}
Script writing is as follows:

3. Now, press Ctrl + press enter to test the effect. You will see the circle on the stage being dragged by your mouse.

4. OK. In this example, we can simply drag the application. Now we need to continue this example. Do you still remember the four parameters that control the drag range in the preceding command Description: left, top, right, and bottom? Now let's create an effect that has a restricted drag range.

5. Draw a rectangle of 200*100 size on the stage. Do not fill the border. For example:

6. If we want to drag the Circle only within the rectangle, we must first set the coordinates of the rectangle and write down the coordinates of the four vertices of the rectangle (this is very important !). OK. For example, shows the four vertices of the rectangle in this example. Then we should take the four parameters: Left = 50, Top = 100, Right = 250, Bottom = 200. Now open the action panel and modify the script as follows:

On (press ){
This. startDrag (true, 50,100,250,200); // here we use the four parameters that have just been determined. The parameter of four vertices implements the moving constraint of a rectangular area on the drag object!
}
On (release ){
This. stopDrag ();
}

The final effect of script writing is as follows:

7. You can't wait to check your results? Okay, press Ctrl + enter to test it!

Now, let's take a look at the drag-and-drop instructions. Next we will learn how to combine the drag-and-drop action to detect collision between objects! Don't go away :)Iii. Explanation of collision commands

Command Format: target video clip instance. hitTest (dragged instance) This is a simple collision detection command
　　　　　　　　　

Target video clip instance. hitTest (X axis coordinates of the dragged instance, Y axis coordinates of the dragged instance, the range of the rectangular area of the object or the range of the object itself) is a complex collision detection command.

Command explanation: the above two commands are used to detect collisions. You can select different commands as needed. The following describes the range of the rectangular area of the object and the range of the object itself (in the preceding command, "false" indicates the range of the rectangular area of the object, and "true" indicates the range of the object itself:

　　Iv. Combined use of collision commands and drag-and-drop commands

(1) The following uses a simple example to learn the collision command (We will first learn how to detect whether an object has a rectangular area range)

1. Create a new flash document and draw a circle on the stage. Select a circle and press F8 to convert it to a video clip. The name is "circle. In this way, a circle instance is created on the stage. For example:

2. Select this instance and give it a name. This example is named yuan.

3. Select the text tool, set the text type to "dynamic text", and draw a dynamic text box under the circle instance. Start a variable named tt, for example:

4. Select the first timeline, press F9 to open the action panel, and enter the following script:

_ Root. onenterframe = function (){
// This is the AS writing rule on the timeline, which is interpreted AS the following script (onenterframe) is executed for each timeline on the stage ).
If (_ root. yuan. hitTest (_ root. _ xmouse, _ root. _ ymouse, false )){
// According to the preceding command, this statement is used to detect collisions. If you touch the rectangular area range of the yuan instance on the stage, execute the following script.
Tt = "Contact rectangle area range"; // The dynamic text box displays "Contact rectangle area range"
} Else {
Tt = "The area of the rectangle is not touched"; // If the mouse does not touch the area of the rectangle of the Instance yuan on the stage, the area of the rectangle is not touched.
}
}
The final complete script on the first slave should be shown in:

5. OK. Now you can press Ctrl + enter to test your results.

(2) drag-and-drop Collision Detection

Now let's take another example to illustrate drag-and-drop collision detection. If you want to be lazy, you can learn by modifying the code in the above example.

1. Now let's modify the above example to learn how to drag and drop collision detection. Draw a rectangle on the stage of the above example and convert the rectangle into a movie clip named: rectangle. In this way, an instance of a rectangle is created on the stage, and the name of this rectangle is juxing. For example:

2. Select the rectangular instance, open the action panel, and enter a script to drag the instance. As follows:

On (press ){
This. startDrag (true );
}
On (release ){
This. stopDrag ();
}

This script is used to drag the rectangular instance. For more information, see the script description of the first drag object example.

3. Modify the script now. Select the first timeline of the timeline and press F9 to open the action panel. You will see the collision detection script in the previous example and change it to the following script:

_ Root. onenterframe = function (){
If (_ root. yuan. hitTest (_ root. juxing )){
Tt = "met ";
} Else {
Tt = "not met ";
}
}

This script is similar to the last collision detection script, except that you do not need to write the X axis and Y axis, or whether or not you have to touch the rectangular area range. Easy to use ^_^

The complete script should be shown in:

OK. Now it's testing again. Let's watch your results ~

Conclusion: I believe that if you have successfully completed the above examples (haha, there are many), you will surely be able to write the script for dragging objects and collision detection. They are widely used in practical applications ......