constrain drag object

[mhunter1964]

Its a ruler type caliper, and I want to be able to slide the jaw. And since it can only move along the ruler, I want to constrain it along the x axis...

Also, I dont want the drop point of the drag object to be left, left upper corner, upper center or any of those. The actual point that has to align to say, the one inch mark, resides about 50 pixles from the left side. Its part three in the top image here:

http://www.craftsmanspace.com/knowledge/vernier-calipers.html

and I want the drag target to align with the left side of  the circle (obect 1) in the second image down

Can anyone help?

Thanks in advance

Message was edited by: sinious - Removed duplicate link

[Ned Murphy]

What aspect of this are you having a problem with?  As far as constraining goes, that will be managed within the startDrag function itself via the constraint Rectangle that you specify.  It is not clear to me what you are asking for the rest relative to alignment, but if you wish to have the registration mark other than the top left or whatever then just edit the contents of the slider object so that its registration mark is where you wish it to be.

[sinious]

Have a look at the startDrag() docs:

Sprite - Adobe ActionScript® 3 (AS3 ) API Reference

It takes 2 parameters. The first is lockCenter which will lock the mouse to the center of the object or to where the user clicked. Make sure this is false and the user will lock and drop the target aligned differently than how you place it.

The second argument is the bounds the user is allowed to drag within. To restrict it to only X-axis then make sure you give the rectangle no height. e.g. a rectangle that is at x/y 0/0 and allows the user only to move from x:0 to x:100, and not on y: Rectangle(0,0,100,0);

All put together it might look like:

var dragArea:Rectangle = new Rectangle(0,0,100,0);

myDraggableObject.startDrag(false, dragArea);

[mhunter1964]

This is what I have so far:

slide_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);

slide_mc.addEventListener(MouseEvent.MOUSE_UP, itemRelease);

slide_mc.buttonMode = true;

function dragTheObject(event:MouseEvent):void {

  var item:MovieClip=MovieClip(event.target);

  var topPos:uint=this.numChildren-1;

  this.setChildIndex(item, topPos);

}

function itemRelease(event:MouseEvent):void {

  var item:MovieClip=MovieClip(event.target);

  item.stopDrag();

  if (dropZone_mc.hitTestPoint(item.x,item.y)) {

  item.x=dropZone_mc.x;

  item.y=dropZone_mc.y;

  this.nextFrame();

  }

else {

  item.x=origX;

  item.y=origY;

  }

};

var origX:Number=slide_mc.x;

var origY:Number=slide_mc.y;

[Ned Murphy]

You are missing the startDrag() command in the dragTheObject function. 

[mhunter1964]

that was just an oops. The real code is this:

function dragTheObject(event:MouseEvent):void {

  var item:MovieClip=MovieClip(event.target);

  item.startDrag();

  var topPos:uint=this.numChildren-1;

  this.setChildIndex(item, topPos);

}

Everything works except I am not sure where the Constraint code goes

[Ned Murphy]

Follow the information/example Jason provided.

[mhunter1964]

Trying to figure out where I add the code to what I have.

slide_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);

slide_mc.addEventListener(MouseEvent.MOUSE_UP, itemRelease);

slide_mc.buttonMode = true;

function dragTheObject(event:MouseEvent):void {

  var item:MovieClip=MovieClip(event.target);

  item.startDrag();

  var topPos:uint=this.numChildren-1;

  this.setChildIndex(item, topPos);

}

function itemRelease(event:MouseEvent):void {

  var item:MovieClip=MovieClip(event.target);

  item.stopDrag();

  if (dropZone_mc.hitTestPoint(item.x,item.y)) {

  item.x=dropZone_mc.x;

  item.y=dropZone_mc.y;

  this.nextFrame();

  } else {

  item.x=origX;

  item.y=origY;

  }

};

var origX:Number=slide_mc.x;

var origY:Number=slide_mc.y;

//var dragArea:Rectangle = new Rectangle(0,0,100,0);

//myDraggableObject.startDrag(false, dragArea);

[Ned Murphy]

I take it you have just copied someone else's code and have no idea what you are working with.  Look for the startDrag code in what you already had and try to work out what you need to do to revise it with the info you have been given.

[mhunter1964]

I did copy the code, but I do think I understand it. I tired this as well as other places to put the var Drag Area but I always get errors:

slide_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject);

slide_mc.addEventListener(MouseEvent.MOUSE_UP, itemRelease);

slide_mc.buttonMode = true;

var dragArea:Rectangle = new Rectangle(0,0,100,0);//var dragArea added

function dragTheObject(event:MouseEvent):void {

  var item:MovieClip=MovieClip(event.target);

  item.startDrag(false, dragArea);//false, dragArea added to function

  var topPos:uint=this.numChildren-1;

  this.setChildIndex(item, topPos);

}

this gave me two errors:

Scene 1, Layer 'Layer 2', Frame 1, Line 6

1046: Type was not found or was not a compile-time constant: Rectangle.

Scene 1, Layer 'Layer 2', Frame 1, Line 6

1180: Call to a possibly undefined method Rectangle.

[Ned Murphy · Accepted solution]

Try adding the following line before all of what you show...

import flash.geom.Rectangle;

[mhunter1964]

that was it. Now I just need to stop it from jumping when it snaps to the target. But I will try to figure that out on my own...

Thanks!