Tips & Tricks 10: Using Drag & Drop in Actionscript 3.0

A really simple and useful tip. The drag and drop functionality in Actionscript 3.0. You can use it to drag pictures from one spot to other, to put items in a shoping cart, to arrange objects in a specific order etc. I’ll show you how to match 3 different shapes in their corresponding spots.

Here is the final movie:

How is done:

1. Create the 3 small shapes and put them individually in a Movie Clip. Also give each of them an instance name (I call them item1, item2, item3).

2. Now for the large shape, create an empty Movie Clip (instance name bin1). Draw a circle without stroke and convert it to a Movie Clip. Give it an instance name of “shape” and place it at x=0 and y=0. Create a new layer and draw there a circle same width and height like the first one but without fill. Place it at the same coordinates.

3. For the triangle and rectangle follow the steps from point 2, except the empty Movie Clip instances.( rectangle - bin2 , triangle – bin3 )

4. Create two Dynamic TextFields (instance name itemName_txt and info_txt) and place them in a empty Movie Clip (instance name ilabel).

5. Final step copy the actionscript code bellow and paste it in the Actions tab.

item1.objName = "circle";
item1.initX = item1.x;
item1.initY = item1.y;
item1.val = 0;

item2.objName = "rectangle";
item2.initX = item2.x;
item2.initY = item2.y;
item2.val = 0;

item3.objName = "triangle";
item3.initX = item3.x;
item3.initY = item3.y;
item3.val = 0;

bin1.shape.alpha = 0;
bin2.shape.alpha = 0;
bin3.shape.alpha = 0;

item1.buttonMode = true;
item2.buttonMode = true;
item3.buttonMode = true;

item1.addEventListener(MouseEvent.MOUSE_DOWN, mousePress);
item1.addEventListener(MouseEvent.MOUSE_UP, mouseRelease);
item2.addEventListener(MouseEvent.MOUSE_DOWN, mousePress);
item2.addEventListener(MouseEvent.MOUSE_UP, mouseRelease);
item3.addEventListener(MouseEvent.MOUSE_DOWN, mousePress);
item3.addEventListener(MouseEvent.MOUSE_UP, mouseRelease);

//Mouse Events

function mousePress(event:MouseEvent):void {
	var item:MovieClip = MovieClip(event.target);
	item.startDrag();
	item.scaleX = item.scaleY = .95;
	var topPos:uint = this.numChildren - 1;
	this.setChildIndex(item, topPos);
	ilabel.itemName_txt.text = item.objName;
}

function mouseRelease(event:MouseEvent):void {
	var item:MovieClip = MovieClip(event.target);
	item.stopDrag();

	switch (item.objName) {
		case "circle" :
			if (bin1.hitTestObject(item)) {
				updateShape(item, bin1);

			} else {
				ilabel.info_txt.text ="WRONG!";
				item.scaleX = item.scaleY = 1;
			}
			break;
		case "rectangle" :
			if (bin2.hitTestObject(item)) {
				updateShape(item, bin2);

			} else {
				ilabel.info_txt.text ="WRONG!";
				item.scaleX = item.scaleY = 1;
			}
			break;
		case "triangle" :
			if (bin3.hitTestObject(item)) {
				updateShape(item, bin3);
			} else {
				ilabel.info_txt.text ="WRONG!";
				item.scaleX = item.scaleY = 1;
			}
			break;
		default :
			; ;
	}
}
function updateShape(item:MovieClip, bin:MovieClip):void {
	ilabel.itemName_txt.text = "";
	item.scaleX = item.scaleY = 1;
	item.visible = false;
	ilabel.info_txt.text ="CORRECT!";
	bin.shape.alpha = 1;
	item.val = 1;
	resetShapes();
}

function resetShapes() {
	if ((item1.val == 1)&& (item2.val == 1) && (item3.val == 1)) {

		item1.x = item1.initX;
		item1.y = item1.initY;
		item2.x = item2.initX;
		item2.y = item2.initY;
		item3.x = item3.initX;
		item3.y = item3.initY;

		bin1.shape.alpha = 0;
		bin2.shape.alpha = 0;
		bin3.shape.alpha = 0;

		item1.visible = true;
		item2.visible = true;
		item3.visible = true;

		item1.val = 0;
		item2.val = 0;
		item3.val = 0;

	}
}

flashuser

Hi, there! I'm Alin the founder of Flashuser.net. My passions are related to web and graphic design, photography and climbing. You can find me at Twitter and Facebook