Subscribe By RSS | Email

Flex | Flash | Air | AS3
Tutorials, Resources,
Tips & Tricks

Drag Jack-Jack inside his park

September 21st, 2009 in Flash

This example demonstrates how to drag an object inside a delimited area.

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

2. Rename “layer 1″ to “park”. On this layer, with the rectangle tool selected , draw a rectangle with a red stroke color and no fill color. Click on the Custom button and set the options as follows

Convert the rectangle to a movie clip and give an instance name of “park_mc”.

3. Create a new layer and import an image that will be your draggable object. In our case we’ve chosen Jack-Jack. Select it and convert it to a movie clip with registration point at the top left and set its instance name to “jack_mc”.

4. Create a new “actions” layer. With its first frame selected, open the actions panel.
First add the Mouse event Listeners to make “jack_mc” draggable.

jack_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragJack);
jack_mc.addEventListener(MouseEvent.MOUSE_UP, stopJack);

Next write the functions by using the startDrag and stopDrag method.

function dragJack(e:MouseEvent) {
	e.currentTarget.startDrag();
}

function stopJack(e:MouseEvent) {
	e.currentTarget.stopDrag();
}

5. So far if you try to test the movie, Jack-Jack will be draggable through the entire stage. Our goal is to make him draggable only inside his park. To achieve that, we need to add parameters to the startDrag method. The startDrag method takes as second parameter a Rectangle that allows us to specify a constaint area.
The schema below shows, as we’ve set jack_mc’s registration point to the top left, that we need to contraint the area where Jack-Jack can be dragged to the pink hatched rectangle.

In the code, declare a boundsPark Rectangle variable by specifying the x, y, with and height properties of the pink rectangle.
In the dragJack function we change the code as follows : (set the lockCenter parameter to its default value which is false )

var boundsPark:Rectangle = new Rectangle(park_mc.x, park_mc.y,
										 park_mc.width - jack_mc.width,
										 park_mc.height - jack_mc.height);

function dragJack(e:MouseEvent) {
	e.currentTarget.startDrag(false,boundsPark);
}

6. Here’s the final code, test your movie to see it in action.

var boundsPark:Rectangle = new Rectangle(park_mc.x, park_mc.y,
										 park_mc.width - jack_mc.width,
										 park_mc.height - jack_mc.height);

jack_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragJack);
jack_mc.addEventListener(MouseEvent.MOUSE_UP, stopJack);

function dragJack(e:MouseEvent) {
	e.currentTarget.startDrag(false,boundsPark);
}

function stopJack(e:MouseEvent) {
	e.currentTarget.stopDrag();
}
 

Terms of Use

The source codes downloaded from RiaCodes can be used for you own projects, commercial or non-commercial, without any attribution.

All files downloaded from RiaCodes may not be used for resale or redistribution.

You may not reproduce or publish in full or large part, the tutorials on this site, without written permission from RiaCodes.

ABOUT

RiaCodes is a site dedicated to web developers and designers providing tutorials and resources on Flash, Flex and Air technologies.

Our site is here to help you to build compelling, engaging and rich applications both for the web and for the desktop.

Now it's time to get your users a better and richer experience!