Learning English Online, Free English Lessons For Everyone
___ ______

Drag and drop in AS3 part 3 PDF  | Print |  E-mail
Thursday, 14 April 2011 13:26

his is an addition to part 2 of the Drag and drop tutorial. In part 2 I modified the original code, so that multiple objects could use the same startDrag() and stopDrag() methods using the ‘event.target’ property. Since, then I have also created a drag and drop puzzle tutorial which also use the same functionality.

In this tutorial I will create a simple matching game using three targets and three draggable objects. In the game you match the draggable objects to the responding targets.

Drag and drop in AS3 part 3

Step 1

Open a new AS3 file. Then select the Rectangle tool and draw three targets on the stage like below. Convert each of the targets into movie clips (F8) with the centre registration point selected and give them the instance names: hitTarget1, hitTarget2 and hitTarget3 accordingly.

Step 2

Select the Oval tool and draw the draggable objects like below. Convert each of the targets into movie clips (F8) with the centre registration point and give them the instance names: drop1, drop2 and drop3 accordingly.

Step 3

On the timeline insert a new layer called ‘AS’ then open the actions panel and enter the following code:

//Array to hold the target instances, the drop instances,
//and the start positions of the drop instances.
var hitArray:Array = new Array(hitTarget1,hitTarget2,hitTarget3);
var dropArray:Array = new Array(drop1,drop2,drop3);
var positionsArray:Array = new Array();

//This adds the mouse down and up listener to the drop instances
//and add the starting x and y positions of the drop instances
//into the array.
for (var i:int = 0; i < dropArray.length; i++) {
dropArray[i].buttonMode = true;
dropArray[i].addEventListener(MouseEvent.MOUSE_DOWN, mdown);
dropArray[i].addEventListener(MouseEvent.MOUSE_UP, mUp);

positionsArray.push({xPos:dropArray[i].x, yPos:dropArray[i].y});

//This drags the object that has been selected and moves it
//to the top of the display list. This means you can't drag
//this object underneath anything.
function mdown(e:MouseEvent):void {
setChildIndex(MovieClip(e.currentTarget), numChildren - 1);

//This stops the dragging of the selected object when the mouse is
//released. If the object is dropped on the corresponding target
//then it get set to the x and y position of the target. Otherwise
//it returns to the original position.
function mUp(e:MouseEvent):void {
var dropIndex:int = dropArray.indexOf(e.currentTarget);
var target:MovieClip = e.currentTarget as MovieClip;


if (target.hitTestObject(hitArray[dropIndex])) {
target.x = hitArray[dropIndex].x;
target.y = hitArray[dropIndex].y;
target.x = positionsArray[dropIndex].xPos;
target.y = positionsArray[dropIndex].yPos;

Here are some extras to spice up this game. I have created a button to reset the drop objects when they are all on the respective targets.

reset.addEventListener(MouseEvent.CLICK, backObjects);

function backObjects(e:MouseEvent):void{
for(var i:int = 0; i < dropArray.length; i++){
if(dropArray[i].x == hitArray[i].x && dropArray[i].y == hitArray[i].y){
dropArray[i].x = positionsArray[i].xPos;
dropArray[i].y = positionsArray[i].yPos;

I have also added a scream sound effect when the drag object is on the correct target. You will need to import a sound effect into the library then right click on the audio file and select properties, check the export to Actionscript button and give it a class name. For more information on sounds in Actionscript 3, checkout some of my audio tutorials.

function playSound(SoundName:Class):void{
var sound = new SoundName();
var channel:SoundChannel = sound.play();

To play the sound effect, add the following line of code inside the If statement of the mUp function.


Step 4

Test your movie clip Ctrl + Enter. You should now have a simple matching game.

Last Updated on Thursday, 14 April 2011 13:34

We have 52 guests online

If you don't see anything in the middle of this page, you may need the latest Flash plug-in.
It only takes a few moments to
Download it FREE at Adobe.com. get adobe Flash player

Teaching English For Kids In Primary School

Stydying English Online For Everyone

Game for Kids

Home || Misterduncan|| Flash Cards || Songs For Kids|| Free Games || Learn English with GOGO|| Teaching English For Childern|| ESL/EFL Kids Course ||
Designed by Learning English Online. Designed by: Free Joomla Theme, mysql. Valid XHTML and CSS.