Create a Drag and Drop Puzzle in ActionScript 3.0

 

Create a Drag and Drop Puzzle in ActionScript 3.0

Carlos Yanez on Jan 11th 2010 with 53 Comments and 0 Reactions

Tweet

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 450×300 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.

view plaincopy to clipboardprint?

1. package   
2. {  
3.     import flash.display.Sprite;  
4.     import flash.events.MouseEvent;  

Step 8: Extending the Class

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

view plaincopy to clipboardprint?

1. public class Main extends Sprite  
2. {  

Step 9: Variables

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

view plaincopy to clipboardprint?

1. var xPos:int; //Stores the initial x position  
2. var yPos:int; //Stores the initial y position  

Step 10: Main Function

This function is executed when the class is loaded.

view plaincopy to clipboardprint?

1. public function Main():void  
2. {  
3.     addListeners(den, ocean, jungle, river, forest); //A function to add the listeners to the clips in the parameters  
4. }  

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.

view plaincopy to clipboardprint?

1. private function getPosition(target:Object):void  
2. {  
3.     xPos = target.x;  
4.     yPos = target.y;  
5. }  

Step 12: Start Drag

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

view plaincopy to clipboardprint?

1. private function dragObject(e:MouseEvent):void  
2. {  
3.     getPosition(e.target);  
4.   
5.     e.target.startDrag(true);  
6. }  

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.

view plaincopy to clipboardprint?

1. private function stopDragObject(e:MouseEvent):void  
2. {  
3.     if (e.target.hitTestObject(getChildByName(e.target.name + "Target"))) //Checks the correct drop target  
4.     {  
5.         e.target.x = getChildByName(e.target.name + "Target").x; //If its correct, place the clip in the same position as the target  
6.         e.target.y = getChildByName(e.target.name + "Target").y;  
7.     }  
8.     else  
9.     {  
10.         e.target.x = xPos; //If not, return the clip to its original position  
11.         e.target.y = yPos;  
12.     }  
13.   
14.     e.target.stopDrag(); //Stop drag  
15. }         

Step 14: Listeners

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

view plaincopy to clipboardprint?

1. private function addListeners(... objects):void  
2. {  
3.     for (var i:int = 0; i < objects.length; i++)  
4.     {  
5.         objects[i].addEventListener(MouseEvent.MOUSE_DOWN, dragObject);  
6.         objects[i].addEventListener(MouseEvent.MOUSE_UP, stopDragObject);  
7.     }  
8. }  

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.

Conclusion

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!