Saturday, 13 February 2010

Limit drag and drop in AS3

I previously created a drag and drop tutorial in Actionscript 3 where you could freely drag the object around the stage area. However, this means the object can also get dragged beyond the stage boundaries. In this tutorial you will learn how to limit the draggable object within the stage boundaries which will stop the object once it has reached the stage edges. You will need to have completed the previous tutorial before attempting this one as there are some minor additions to the startDrag() method.

In Actionscript 2 the startDrag() method contains five parameters, and now in Actionscript 3 there are only two parameters. The first parameter locks the centre value and the second parameter is the bounding area where you have to pass an instance of the Rectangle class to the method. The rectangle bounding area has to have four parameters which are: x, y, width, and height. For more information, checkout the AS3 startDrag() reference here.


Limit drag and drop in Actionscript 3

Step 1

Open up the drag and drop tutorial in Actionscript 3.


Step 2

On the timeline select the Actions layer then open the actions panel (F9) and make the following adjustments.

//The x & y coordinates of the top-left corner of the rectangle.
var my_x:int=stage.stageWidth-sheep_mc.width;
var my_y:int=stage.stageHeight-sheep_mc.height;

//The height and width of the rectangle.
var myWidth:int=0-my_x;
var myHeight:int=0-my_y;

//Create a new instance of the rectangle class with the coordinates above.
var boundArea:Rectangle=new Rectangle(my_x, my_y, myWidth ,myHeight);

//Adds the mouse down and up event listeners to the sheep movie clip.
sheep_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
sheep_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

//This function drags the sheep but limits to the stage boundaries.
function drag(event:MouseEvent):void {
sheep_mc.startDrag(false,boundArea);
}

//This function releases the sheep object.
function drop(event:MouseEvent):void {
sheep_mc.stopDrag();
}

Step 3

Test your movie clip Ctrl + Enter. Try moving the object around and you should notice it will not go over the stage boundaries.

4 comments:

Ivo 3 March 2010 01:48  

Hi !
Thats a good tut m8t, but i wanted to know how i can adjust the boundaries :D

iliketo 3 March 2010 11:10  

@Ivo

Change the dimensions of the stage.

vijay 26 July 2011 06:08  

var boundArea:Rectangle=new Rectangle(my_x, my_y, myWidth ,myHeight);

instead of this, one can use this also

var boundArea:Rectangle=new Rectangle(mymovieclip.x, mymovieclip.y, mymovieclip.width ,mymovieclip.height);

where mymovieclip is background movieclip use for bound

iliketo 26 July 2011 13:12  

@Vijay

Well it depends on where you want the x and y position of the bounding box. The first and second parameters of the Rectangle class determine the x and y positions of the bounding box. If you want the starting x and y positions at mymovieclip.x, and mymovieclip.y then that’s fine.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP