Detailed explanation of drag and drop action and collision action

Source: Internet
Author: User
Tags final range
Some of the objects in the Flash movie you see on the web can be dragged by the mouse. For example, some similar tangram puzzle game, control volume slider, etc., using the flash in the drag action.

First, drag and drop command detailed introduction
1. First, introduce the detailed use of the start drag command, later in the following example to test.
Command format: StartDrag (movie clip to drag, [lock to center of mouse position, left, top, right, bottom])
or write as
The movie clip you want to drag. StartDrag ([Lock to mouse position center, left, top, right, bottom])
command to explain: in the process of making animation, the above two writing methods can be optional. Within [] The optional parameters, that is, can write, or can not write. As for the left, top, and right, the next four parameters are used to control the moving range of the dragged object.
2. Stop dragging and dropping commands to explain
Command format: A dragged movie clip instance name. Stopdrag ()
This allows you to stop dragging and dropping objects.

Second, the example explanation
Here's a simple example of an experimental drag-and-drop command.
Operation Steps:
1, create a new flash document, and draw a circle on the stage. Select the circle and press F8 to convert the circle to a movie clip named: Circle. When you are sure, you will create an instance of the circle on the stage.

2. Select this instance and press F9 to open the action panel. Enter the following script:
On (Press) {
This.startdrag (TRUE)///When the mouse presses (press), this instance (because we write the script in the instance itself, so here instead of the name of the movie clip instance) can be dragged, using the command as explained above. For the selection of parameters, here is only a lock to the center of the mouse position, if you want to choose not to lock to the center of the mouse position, you can change to false. Interested friends can change to false to see.
On (release) {
This.stopdrag ()//In the same way, when the Mouse is released (release), the drag action stops.
Script to write the following figure:

3, OK, now let's press CTRL + ENTER to test it, you will see the stage on the circle by your mouse drag effect.
4, OK, through this example we can simply use drag and drop action. Now you need to continue with this example, remember the instructions above to the left, top, right, and down four parameters that control the drag range? Now to make an effect that has a constrained drag range.
5, now on the stage to draw a 200*100 size rectangle, note that as long as the border does not fill. The following figure:

6, if we want to drag when the circle can only be dragged in the rectangle, it is necessary to set the coordinates of the rectangle, and note the four vertices of the rectangle coordinates (this is very important!) )。 OK, for example, now the four vertices of the rectangle in this example are shown above. Then we have to take the four parameters should be: Left = 50, on = 100, right = 250, under = 200 now open the action panel, modify the script just as follows:
On (Press) {
This.startdrag (True, 50, 100, 250, 200);//Here we'll use the 4 parameters we just identified. The 4-point parameter implements a rectangular region's movement constraint on the Drag object!
On (release) {
This.stopdrag ();
The final effect of scripting is as shown below

7, hehe, can't wait to test your results? OK, press CTRL + ENTER to test it!
Well, on the drag-and-drop explanation first here, let's learn how to combine drag and drop action to detect collisions between objects! Do not walk away oh. Download the source file for this example

Iii. explanation of the collision command
Command format: an instance of the target movie clip. HitTest (dragged instance) This is a relatively simple test collision command
The instance of the target movie clip. HitTest (The x-coordinate of the instance is dragged, the y-coordinate of the instance is dragged, the rectangular area of the object or the scope of the object itself) this is a more complex point of detection collision command
Command explanation: The above two commands are used to detect collisions, and you can select different commands as needed. Focus on explaining the rectangle range of the object and the scope of the object itself (in the command above, false indicates the rectangular range of the object, True indicates the scope of the object itself) look at the following picture:

Four, Collision command and drag-and-drop command combined use
(a), the following simple example to learn the collision command (we first learn how to detect whether the object's rectangular range)
1. Create a new flash document and draw a circle on the stage. Select the circle and press F8 to convert it to a movie clip, name: Circle. This creates an instance of the circle on the stage.

2, select this example, a name for it, this example named: Yuan as shown:

3. Select the Type tool, and select text as "dynamic text", and drag and draw a dynamic text box below the instance of the circle. and a variable named: TT the following figure:

4, select the first frame of the timeline, press F9 to open the Action panel, enter the following script:
_root.onenterframe = function () {
This is the as writing rule on the timeline, which is interpreted as executing the following script (Onenterframe) for each frame on the stage.
if (_root.yuan.hittest (_root._xmouse, _root._ymouse, false)) {
According to the instructions above, this statement is a collision detection. If the mouse touches the rectangular area of this instance on the stage, execute the following script Yuan.
tt = "Contact Rectangle area Range";//Dynamic text box shows "Contact rectangular area Range"
} else {
tt = "No contact to rectangular area range";//If the mouse does not touch the rectangular area of this instance on the stage, it shows no contact with the rectangular area of the range. Yuan
The final complete script on the first frame should be the following figure:

5, OK, now you can press CTRL + ENTER to test your results slightly. Download the source file for this example
(b), drag-and-drop collision detection
Now another example of drag-and-drop collision detection, if you want to lazy, you can modify the above example code to learn.
1, now slightly modify the above example, so that we learn to drag and drop collision detection, in the above example of the stage to draw a rectangle, and the rectangle into a movie clip, named: Rectangular. This creates an instance of the rectangle on the stage and now has a name for the rectangle instance: juxing. The following figure:

2. Select this 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 meant to be able to drag this rectangular instance. For a specific explanation, see the script description of the first drag object example.
3, now to modify the script, select the first frame of the timeline, press F9 to open the action panel, you will see the last example of the collision detection script, modify 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 don't need to write the x and Y axes, or whether you want to hit a rectangular range.
The full script should look like the following figure:

OK, now it's time to go to the test stage and watch your results. Download the source file for this example

Conclusion: I believe that if you successfully completed the above examples (hehe, more), you will grasp the drag object and Collision detection script. In practical applications, their usefulness is very extensive ...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.