The front page All those lovely tutorials Other sites of interest More info about Stickman
Stickman

Simple intro to Droptarget


 TUTORIAL INFO 

Version Flash 4
Difficulty Easy
Created 28th June 1999

 DOWNLOAD 

ZIP

FLA

After a number of requests on the Flashpad, here's a simple demonstration of _droptarget in action -- here's the .fla file in .zip form.

What's all this drag and drop stuff?

Flash4 lets you 'drag and drop' movie clips. It's pretty simple: place a movie clip in the timeline and give it an Instance Name, then use a button or frame action either to 'Start Drag' or 'Stop Drag' using the Instance Name as the target.

In this case, we want to be able to click on the word 'colour' and drag it around. But wait -- only movie clips are draggable, but 'colour' needs to be a button in order for it to recognise the mouse click. What's to be done? Simple: create your button (called ColourButton in the example file) and then drop it into a movie clip (called Colour in the example file). Now drop the movie clip into the timeline, and give it an Instance Name (in this case, colour). Now we can use the movie clip as our target when we set up our drag and drop actions, which in their simplest form look like this:

On (Press)
      Start Drag ("/colour")
End On
On (Release, Drag Out)
      Stop Drag
End On

So when you click on colour it activates 'drag and drop': when you release the mouse, it deactivates 'drag and drop'.

Got that, what now?

Now we explore 'droptarget'.

Basically, when you 'deactivate' drag and drop, the _droptarget property of the movie clip that is being dragged is set to the Instance Name of any movie clip it is over. So in our example there are three movie clips: colour (which we've already talked about); Red (the red box), and Blue (the blue box). If I drag colour so that it's over the top of the red box, then release the mouse, the _droptarget property of colour will be set to "/Red". Similarly if I drop colour on top of the blue box, the _droptarget property of colour will be set to "/Blue".

So all we need to do is add some 'if' statements to the actions of ColourButton, to see what the value of colour's _droptarget property is, when it's released. In the example file, they look like this:

On (Press)
      Start Drag ("/colour")
End On
On (Release, Drag Out)
      Stop Drag
      If (GetProperty ("/colour",_droptarget)  eq  "/Red")
            Begin Tell Target ("/colour")
                  Go to and Stop (2)
            End Tell Target
      End If
      If (GetProperty ("/colour",_droptarget)  eq  "/Blue")
            Begin Tell Target ("/colour")
                  Go to and Stop (3)
            End Tell Target
      End If
      If (GetProperty ("/colour",_droptarget)  eq  "")
            Begin Tell Target ("/colour")
                  Go to and Stop (1)
            End Tell Target
      End If
End On

It looks complicated, but it's not. There are three 'if' statements, which are all pretty much the same. The first line -- eg. If (GetProperty ("/colour",_droptarget) eq "/Red") -- uses GetProperty to read the _droptarget property of "/colour" and in this if it equals "/Red" then it uses a Tell Target action to send the movie /colour to frame 2 (the movie clip Colour has three frames, each of which has an instance of ColourButton in a different colour). The other two 'if' statements do much the same, checking to see if _droptarget is equal to "/Blue" or to "", meaning it is not over Red or Blue.

One more thing

You might not have noticed, but _droptarget is only set when the mouse cursor is over the target movie clip. So even if colour is almost entirely over one of the buttons when you release the mouse, if the mouse cursor is outside the button then _droptarget will not be changed.

Phew!

So it's pretty easy, right? I hope you've followed this explanation. If not, take a look at the .fla file and check out the actions -- that should help you understand better what's going on.

Good luck!

Stickman


Constant _droptarget detection

An added bonus for those who want it: here's a .fla file in .zip form of how to detect a droptarget without releasing the mouse button. I'll write an explanation when I get time.

All files and text copyright ©Stickman 1998 - 2003. For copyright and terms of use information, please read this page.