orthopedic pain management

Flashuser

  • Pin It

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;

	}
}

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+