Draggable Area with AS3

February 4th, 2010 in Flash

Here’s a quick tip/tut that you might find useful to create a draggable area with actionscript 3.

1. Create a new flash file (Actionscript 3.0) and save it as drag_area.fla.

2. Rename “layer1″ to “Area” and import on the stage an image much bigger than your stage and convert it to a movie clip with registration point at the top left. Give it an instance name of area_mc.

3. Finally, create a new “actions” layer and open the actions panel. Type the code beneath. To create the draggable area, we use the startDrag method and specify its bounds parameter.

area_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragArea);
area_mc.addEventListener(MouseEvent.MOUSE_UP, dropArea);

function dragArea(e:MouseEvent):void{
	var bounds:Rectangle = new Rectangle(
								stage.stageWidth - area_mc.width,
								stage.stageHeight - area_mc.height,
								area_mc.width - stage.stageWidth,
								area_mc.height - stage.stageHeight
							);
	area_mc.startDrag(false, bounds);
}

function dropArea(e:MouseEvent):void{
	area_mc.stopDrag();
}

4. That’s it, test your movie to see it in action.