Flash10:ActionScript2: Drag and Drop with Targets

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

Instructions
Create a new Actionscript2 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 CrownMc. (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 name it actions. Click on the first frame of the actions layer and insert the following actionscript:

With the CrownMc layer selected on frame one and using the drawing tool of choice, create your draggable object or alternatively import a graphic to the stage. Right Click, Convert to Symbol, Type: Movie Clip, center the registration point (if its not already centered by default) and name it shapeMc. The naming is personal, but keep it meaningful (shapeMc isn't a particularly good name!)



In the Properties panel, give it a name, eg. crownMc. Drag it to one side of the stage and lock the layer.



Create a new layer below the one you have just created and name it CrownTarget. With the first frame of this layer selected, drag an instance of ShapeMc from the library and onto the stage and name it crownTargetMc.

Position this Movieclip exactly where you would like your shape to lock in to.



Slide the alpha channel to 0. Your target is now invisible. Lock the layer.



Return to CrownMc layer and unlock. Click on the shape. Open the Actionscript panel add the following script. A commented explanations is included.

This will give you a basic drag and drop that snaps to an invisible target object.

Extension
It is possible to add extensions to this script to make it more functional.

Keep track of how many successful drops to targets you have by introducing a dropCount Variable. If the variable equals a certain number, then something can happen, eg load a new movie, move along the time line or display a message as examples. The code below displays an appropriate message. (Dont forget to reset the variable if you need to keep count again).

On the actions layer, frame one, declare a variable above the stop;

Then include the following with the actionscript applied to your draggable object:

The full code now looks like this:

Introduce a variable isLocked. This variable is unassigned at the point of the IF statement and will continue to be so until such time as the targets are met. So, while the variable is unassigned, the code between the {} will continue to be executed. When the target is met, the variable isLocked becomes true, this will prevent any further drag and drop on the object.

Below is the final code to snap onto a target, lock it in so it can no longer be dragged and to cause an action to occur when a defined number of drop targets has been met:

A completed sample of this movie can be viewed here:

Problems
Small targets need precise placement of the object before they snap into place. It is possible to increase the snap area by enlarging the target Movieclip. Click on the target, lock together and increase the size a fraction. This will give a greater drop snap area. Some experimentation will give the optimum size of the target Movieclip.

If objects fail to snap and lock, check the registration points of all objects and make sure they are centered, and check the naming of targets match that in your ActionScript.