*** snap to edge ? ***

1

I am trying to create a dragable menu.

However I do not want the user to be able to drag the menus out of the movies edge.

how can I get the dragable movie to know when it is at the edge of the screen and to let go.

I have tried but dont know how to go about it.

more specific, can you put a if() or hittest() statement in a
on (press) statement

so the movie knows when to let go ?

I tried both ways but I may have stuffed the script

Thanks for any helpful comments

2

Well, you say you want to snap to the edge in your title, but don’t you just mean you want to contrain your drag?

You can do that like this:
Test this script in an empty FlashMX movie:


// Ingore this, its a fix for preventing incorrect Stage-values being returned:
Stage = {width: Stage.width, height: Stage.height};

// Create an Empty MovieClip, and add a lineStyle while we're at it:
_root.createEmptyMovieClip("ball", ++d).lineStyle(25, 0, 100); 

// Because our line is very thick, drawing a few pixels will make a big circle:
_root.ball.lineTo(0.5, 1.5);

// If we press on the ball:
_root.ball.onPress = function()
{
	// Start dragging it:
	startDrag(this, 		// Drag-target
			  false, 		// Do we want to drag the center?
			  0, 			// Max-left
			  0, 			// Max-top
			  Stage.width,  // Max-right
			  Stage.height  // Max-bottom
			  );
	// Store it:
	this.drag = true;
}

// If we release the ball:
_root.ball.onRelease = function()
{
	// Stop dragging if we are!
	if (this.drag) stopDrag();
	
	// Store it:
	this.drag = false;
}

In addition, you’ll need to change the bound, depending on your movieclip. Because right now, the center of the ball will be contrained, not the entire object.
So lets say your window is 100 pixel wide, if you’d drag your center to “x = 0”, the left side of your window would be at -50…
(Understand? Go ahead and check it)

Even that part can be calculated automatically, but before I continue, is this what you mean, or do you really need Snapping?
Cause that wouldn’t be a problem either!:slight_smile:

3

Thanks for that it works sweet.

I would like to add a snap function to it.
I would like to make it drop when it gets to the edge, or snaps.

I will try to play around with it myself to see if I can do it, but I may have to ask for you help on it again.

Thanks again.

4

try this


// set grid size
MovieClip.prototype.blockSize = 70;

MovieClip.prototype.snapToGrid = function() {
this._x = Math.round(this._x/this.blockSize)*blockSize;
this._y = Math.round(this._y/this.blockSize)*blockSize;
}

and inside the onRelease function, have this:

this.snapToGrid()

let me know if that works :slight_smile:

5

Thanks for that ahmed

I am not exactly sure how to incorporate this into the code Eric Jr.
posted.

I will have to play around with it, unless you are able to explain it to me.

6

this is what your code should look like:

Stage = {width: Stage.width, height: Stage.height};

MovieClip.prototype.blockSize = 70;

MovieClip.prototype.snapToGrid = function() {
        this._x = Math.round(this._x/this.blockSize)*blockSize;
        this._y = Math.round(this._y/this.blockSize)*blockSize;
}


_root.createEmptyMovieClip("ball", ++d).lineStyle(25, 0, 100);

_root.ball.lineTo(0.5, 1.5);

_root.ball.onPress = function()
{
this.startDrag(0,0,0,Stage.width,Stage.height);
//this.drag = true;
}

_root.ball.onRelease = function()
{
//if (this.drag) {
this.stopDrag();
this.snapToGrid();
//}
this.drag = false;
}

=)

7

Thanks for you help guys… using the code that you gave me I now have a working version.

I now have 2 questions. one is simple and is marked in the 3rd line of the code below.

The other I dont know if it can be done… When the user drags the box to the edge of the Stage the object stops, but the users mouse (hand) still shows that it is draging an item.

is it possible to force a .stopDrag(); when the object is at the edge of the stage ?

i tried
[AS]if (this._xmouse <0 ) {this.stopDrag();}[/AS]
but could not get it to work.

[AS]
onClipEvent (enterFrame) {

bottom = 400-30; // how can i get bottom to = ( Stage.height - this.height );
top = 30;
right = 550-30;
left = 30;

this.onPress = function() {
	
	this.startDrag(0, left, top, right, bottom);
	this.drag = true;
	this._alpha = 50;};
	
this.onRelease = function() {
	
	this.stopDrag();
	this._alpha = 100;
	
	if (this._x&lt;=80) {this._x = left;}
	if (this._x&gt;=470) {this._x = right;}
	
	if (this._y&lt;=80) {this._y = top;}
	if (this._y&gt;=320) {this._y = bottom;}

};}
[/AS]