Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Games

Create a Drag and Drop Puzzle in ActionScript 3.0

Read Time:3 minsLanguages:

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.

Step 1: Brief Overview

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.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 450x300 and add a black background (#1B1B1B).


Step 3: Draggable Clips

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:

Step 4: Drop Target

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.

Step 5: Guides

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.

Step 6: ActionScript Time

Create a new ActionScript Document and save it as "Main.as".

Step 7: Required Classes

This time we'll need just a few classes.

Step 8: Extending the Class

We're going to use Sprite specific methods and properties so we extend using the Sprite Class.

Step 9: Variables

These are the variables we will use, explained in the comments.

Step 10: Main Function

This function is executed when the class is loaded.

Step 11: Position Function

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.

Step 12: Start Drag

This function enables the dragging to the clip with the listener.

Step 13: Stop Drag

The next function stops the dragging when the mouse button is released, it also checks if the object is in the correct drop target.

Step 14: Listeners

Adds the listeners to the clips in the parameters using the ...rest argument.

Step 15: Document Class

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!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.