Droptarget / Target
Top  Previous  Next


Description
This is a step-by-step tutorial demonstrating the use of the _target and _droptarget properties.

Aim
This tutorial introduces _target and _droptarget properties.

.swi file
"droptarget.swi"

1.Continue from the previous tutorial or load the file "dragging.swi". Save the file as "mydroptarget.swi"  

2.Copy and paste the Object "ball". Rename the object "ball2" and change its color to blue  
scripttute8_1

3.Select the Scene in the 'Outline' Panel and add the following script commands (see the tutorial on Variables and Flow Control for more information):  

onEnterFrame() {
   if (dt1 != ball._droptarget || dt2 != ball2._droptarget) {
      trace("ball._droptarget: " add ball._droptarget);
      trace("ball2._droptarget: " add ball2._droptarget);
      trace("-------------------------------------------");
   }

   dt1 = ball._droptarget;
   dt2 = ball2._droptarget;
}

onLoad () {
   dt1 = "empty";
   dt2 = "empty";
}


The onLoad() Event is used to initialise the variables dt1 and dt2.  
 
 
The onEnterFrame() Event is called on each Frame. If the value of ball._droptarget or ball2._droptarget has changed from the previous value(s), then the trace statements are executed.  
 
Your 'Script' Panel should look like this:  
scripttute8_2
4.Select the 'Debug' tab, then return to the 'Layout' Panel and press play. In the 'Debug' Panel you should see:  

ball._droptarget:
ball2._droptarget:
-------------------------------------------

Drag the blue ball over the red one. In the 'Debug' Panel you should now see:  

ball._droptarget:
ball2._droptarget:
-------------------------------------------
ball._droptarget:
ball2._droptarget: /ball
-------------------------------------------

This means that the blue ball (ball2) now sees /ball as its "droptarget". "/ball" is the name of _root.ball expressed in slash notation. Now "ball2._droptarget: /ball" appears the exact instant the mouse pointer crosses the boundary of the red ball.  

Drag the blue ball away from the red ball and drag the red ball over the blue ball  

Note:
·The red ball appears under the blue ball because of the current layer ordering. This can be altered by selecting the ball in the 'Outline' Panel, then using the Menu items Modify | Order  
·When the red ball is under the blue ball the onSelfEvent (release) is not detected, so it is impossible to stop dragging the red ball while its center is obscured by the blue ball  
 
Drag the red ball away from the blue ball then click the left mouse button to deselect it from dragging. In the 'Debug' Panel you should see:

ball._droptarget:
ball2._droptarget:
-------------------------------------------
ball._droptarget:
ball2._droptarget: /ball
-------------------------------------------
ball._droptarget:
ball2._droptarget:
-------------------------------------------
ball._droptarget: /ball2
ball2._droptarget:
-------------------------------------------
ball._droptarget:
ball2._droptarget:
-------------------------------------------

The line "ball._droptarget: /ball2" indicates that the red ball (ball) now sees /ball2 as its "droptarget". "/ball2" is the name of _root.ball2 expressed in slash notation.  

Press the 'Stop' button.  

5.Add the following script to ball2:  

onEnterFrame() {
   if (_droptarget==_parent.ball._target) {
      trace("MATCH");
   }

}


Your script should now look like:  
scripttute8_3


6.Select the 'Debug' tab, then return to the 'Layout' Panel and press play. Drag the blue ball over the red ball and you should see the following in the 'Debug' Panel:  

ball._droptarget:
ball2._droptarget:
-------------------------------------------
MATCH
ball._droptarget:
ball2._droptarget: /ball
-------------------------------------------
MATCH
MATCH
MATCH
MATCH
MATCH
MATCH
MATCH
MATCH
MATCH
MATCH
MATCH
MATCH
MATCH

The word MATCH indicates that the comparison "_droptarget==_parent.ball._target" has returned the value true. The _target property is used to return the name of the target Object in slash notation.  
 
This type of comparison can be used to check when an Object has been dragged over another specific Object  

Analysis
The _target and _droptarget properties can be used to detect when one Object is dragged over (or under, depending on layering) another specific Object. This would be useful for implementing, say, a 'trash can'.

One difference between this approach and using (for instance) isNearTarget() and isNearThis(), is that the item being dragged can be easily identified as the _droptarget property only changes for the object that is currently being dragged.

The _droptarget property changes when the mouse pointer crosses the boundary of the other Object.

The onLoad() Event is used to initialise some variables that are used later by the onEnterFrame() Event. The onEnterFrame() Event called on each Frame and is used to check current conditions repetitively.