ActionScript3:Drag and Drop with Targets

Introduction
Drag and Drop introduces some user interactivity with your Flash Movie.

Setting the Stage
Create a new Actionscript3 movie. Rename the first layer to Background. Import a graphic to the stage, or draw one. In this case a frog. Lock the layer. Create a new layer and name it CrownTarget. Create a new layer and name it (The assets used in this tutorial are available here: [[Media:Sd_Crown.png|Crown]] and [[Media:Sd_Frog.png|Frog]]). Create a new layer and call it Text. With Actionscript 3, it is important to get the layering right. In this case we need to have the target layer below the crown layer. Create a new layer and name it actions. Your timeline should be layered as in the diagram below:



Import the assets to the library, if you havent already done so. Convert the crown graphic to a Movieclip and give it a meaningful name. With Frame One of the  layer selected, drag the Crown Movieclip from the library and onto the side of the stage. Then give the instance of the movieclip a name, in this case I've kept it simple and called it. Lock the layer.



Select frame One of the CrownTarget layer, and drag from the library the same MovieClip. Give it an instance name of. Place it in position, on top of the frogs head. Reduce the alpha to "0" so the target becomes invisible. Lock the layer.

Adding the Actionscript
Select frame one of the Actions layer, open the actions panel and enter the following code to allow us to drag and drop the crown.

This code initiates dragging the movie clip when the mouse button is pressed and to stop when the mouse button is released. In ActionScript3, this is created by setting an event listener for each event,  and   and assigning event handler functions (in this case called   and  ) to tell Flash what to do once the event is triggered, event.target refers to the object that initiated this event, which in this case will be. Using  instead of naming the object specifically will allow the code to be reused, no matter how many draggable piece there are on the stage. In this small tutorial, there is only one, but you may add many. Refer to the extensions below to see the additional code needed to reuse these functions for different draggable objects. The “true” parameter of the  function causes the shape to be picked up from its center, which eases placement. To display the hand cursor when clicking movieclip symbols, the  property is set to true.

Test the movie. You should be able to pick up the crown and move it around the stage and drop it anywhere. Problems at this stage occur if the names used in the ActionScript DO NOT match exactly those given for the instance naming of the crown. Check if necessary.

Locking the Crown into place
Once the crown is able to be dragged around, the next stage is to get it to lock onto the target IF its dropped in the correct place. This is done by removing the event listeners once the target is met and removing the hand symbol by setting the  to false. Locking into the exact position requires matching the x and y coordinates. Add the following code within the  event handler, after the line.

It is important to note the naming of the target Movieclip at this stage also, as the  variable depends on correct naming.

Repositioning Incorrectly Placed Objects
If the crown is dropped in the wrong place, it can snap back to its original position by storing the start X and Y coordinates in a variable and using this information in the  function.

Add the following ActionScript to set up the variables, above all the other ActionScript on Frame One:

Then, add the following code to the  function, just below the code  ; :

and the following code within an else statement at the end of the  function:

Test the movie. The crown should return to its original position if not dropped on the frogs head in the correct place.

Reusing the functions with more than one drag and drop target
Quite often, there will be a need to have more than one draggable object on the stage as well as more than one target object. With ActionScript 3, there is no need to repeat the code, just adding in a few extra line and reusing the functions is all that is required.

For a second object to drag, just add the following code below the corresponding code for :

and to finish, add underneath the corresponding  code:

as long as the target name is, this additional code is all that is needed for the drag and drop to work on the second object. You can repeat this as many times over as many objects as you need to drag and drop on the stage.

Keeping track of the Drop Count
Like in the ActionScript 2 exercise, keeping track of the number of correct drops can be useful if you need something to happen when the drops are complete - display a message, move along the timeline etc.

Add a  variable to the beginning of the ActionScript on the actions layer, frame One.

then, within the dropMe event handler, increment the  variable. Add this ActionScript to the end of the  statement:

Within the same event handler, and after the last  statement add the following ActionScript to populate a text box with a message. You will need to make sure there is an empty text box in frame One of the text layer - in this case with the name :

ActionScript 3 and the Z index
ActionScript 3 allows you to control the depth of an object. In Actionscript 2, if an object was below another in the layering order, it stayed there. ActionScript 3 allows you to bring that object to the top. In the above example, if there were more than one object to drag, you could ensure the one you clicked on dragged over the others regardless, by adding the following code to the  event handler, directly below the code   :

Resources
Flash Drag and Drop Tutorial at Edutech Wiki