Drag-and-drop is the action of clicking on a virtual object and dragging it to a different location or onto another virtual object. In general, it can be used to invoke many kinds of actions, or create various types of associations between two objects.
In this tutorial we will create a Drag and Drop Matching game using ActionScript 3.
Using ActionScript 3, we will make draggable MovieClips that will be dropped in the MovieClip targets, we’ll check if the target its correct by using the hitTestObject method.
Open Flash and create a new Flash File (ActionScript 3).
Set the stage size to 450×300 and add a black background (#1B1B1B).
We’ll need some MovieClips to drag, I’ve used some of the Envato Marketplace logos.
Convert them to MovieClips and set their instance names:
A MovieClip will be used as a drop target for each draggable clip, a simple rectangle will do the job.
Convert the rectangle to MovieClip and duplicate it (Cmd + D) to match the number of draggable objects.
The instance names will be the name of the draggable clip, plus Target, leaving us with denTarget, oceanTarget, etc.
Let’s add some guides to help the user figure out what to do.
A title that will tell the user what to do with the elements in the screen.
An icon to tell the user how to do it.
Keywords to tell the user where to match the objects.
Create a new ActionScript Document and save it as "Main.as".
This time we’ll need just a few classes.
We’re going to use Sprite specific methods and properties so we extend using the Sprite Class.
These are the variables we will use, explained in the comments.
This function is executed when the class is loaded.
A function to get the position of the MovieClips, this will help us return the MC to its original position when the drop target its incorrect or no drop target was hit.
This function enables the dragging to the clip with the listener.
The next function stops the dragging when the mouse button is released, it also checks if the object is in the correct drop target.
Adds the listeners to the clips in the parameters using the …rest argument.
Go back to the .Fla file and in the Properties Panel add "Main" in the Class field to make this the Document Class.
Now you know how to easily make a drag target, this can be very useful for games and applications. Make your own drag app and take this concept further!
Thanks for reading!