Advanced Question: Line Manipulation tool

Help!

The below script allows for line point adjustment, this works by dragging the yellow handles to new postions as you can see. Now the problem is when you click and drag the circular handle it drags the whole line like its supposed to but the other handles dont repostion on the ends of the lines. Take a look at the script and you will see that the handle coordinates are stored in objs in the form {x: y:} , obviously something is going wrong here but I have no idea what…


//=====================================================
//startDrag and stopDrag replacements
MovieClip.prototype.beginDrag = function(lock, l, t, r, b){
	if (this.$dragMethod) this.endDrag();
	this.$dragMethod = {MM:this.onMouseMove};
	ASSetPropFlags(this,"$dragMethod",1,1);
	this.addProperty("onMouseMove",arguments.callee.getMM,arguments.callee.setMM);
	var my = this;
	var constrain = (arguments.length > 1);
	var off_x = 0, off_y = 0;
	if (!lock){
		off_x = my._parent._xmouse-my._x;
		off_y = my._parent._ymouse-my._y;
	}
	this.$dragMethod.drag = function(){
		my._x = my._parent._xmouse-off_x;
		my._y = my._parent._ymouse-off_y;
		if (constrain){
			if (typeof l == "object"){
				t = l.ymin;
				r = l.xmax;
				b = l.ymax;
				l = l.xmin;
			}
			if (my._x < l) my._x = l;
			else if (my._x > r) my._x = r;
			if (my._y < t) my._y = t;
			else if (my._y > b) my._y = b;
		}
		updateAfterEvent();
	}
}
MovieClip.prototype.beginDrag.getMM = function(){
	this.$dragMethod.drag();
	return this.$dragMethod.MM;
}
MovieClip.prototype.beginDrag.setMM = function(f){
	this.$dragMethod.MM = f;
}				  
MovieClip.prototype.endDrag = function(){
	delete this.onMouseMove;
	this.onMouseMove = this.$dragMethod.MM;
	delete this.$dragMethod;
	this.startDrag(); // for _droptarget
	this.stopDrag();
}


// OBJECT SCOPES: ============================================================
// lines clip is where to draw lines
lines = this.createEmptyMovieClip("l",1);
// ornaments is for movement handles etc - above lines clip
ornaments = this.createEmptyMovieClip("o",2);

// VARIABLES: ================================================================
curLine = null; // currently selected line
// ^ as a 'global' variable, easily lets you be able to set the
// color or line thickness of the line while its selected

// FUNCTIONS: ================================================================
// drag functions used on movement handles
setDrag = function(){
	this.dragging = true; // drag flag true (now dragging)
	p3handle._visible = false;
}
unSetDrag = function(){
	this.dragging = false; // drag flag false (now not dragging)
	//readjust centre point
	trace("new p1: (" + curLine.p1.x + "," + curLine.p1.y + ")"); 
	trace("new p2: (" + curLine.p2.x + "," + curLine.p2.y + ")"); 
	lineCentreXpos = (curLine.p2.x + curLine.p1.x)/2;
	lineCentreYpos = (curLine.p2.y + curLine.p1.y)/2;
	p3handle._x = lineCentreXpos;
	p3handle._y = lineCentreYpos;
	p3handle.pt = {x:lineCentreXpos, y:lineCentreYpos};
	p3handle._visible = true;
	trace("lines NEW coordinates: (" + lines._x + ", " + lines._y + ")");
	
}
onDrag = function(){
	if (this.dragging){ // if being dragged
		p3handle._visible = false;
		this._x = this._parent._xmouse; // move to the mouse
		this._y = this._parent._ymouse;
		this.pt.x = this._x; // saved point, revereces moveTo or lineTo point
		this.pt.y = this._y;
		curLine.redraw(); // redraw the current line
	}
}

unSetDragLine = function(){
	
	this.endDrag();
	curLine.endDrag();
	
	p3OldXpos = this.pt.x;
	p3OldYpos = this.pt.y;
	
	this.pt.x = this._x; // saved point, revereces moveTo or lineTo point
	this.pt.y = this._y;
	
	p3NewOldXposDiff = this.pt.x - p3OldXpos;
	p3NewOldYposDiff = this.pt.y - p3OldYpos;
	
	trace("new p1: (" + curLine.p1.x + "," + curLine.p1.y + ")"); 
	p1handle._x = curLine.p1.x + p3NewOldXposDiff;
	p1handle._y = curLine.p1.y + p3NewOldYposDiff; // set position on screen
	p1handle.pt = {x:curLine.p1.x + p3NewOldXposDiff, y:curLine.p1.y + p3NewOldYposDiff};
	trace("new p2: (" + curLine.p2.x + "," + curLine.p2.y + ")"); 
	p2handle._x = curLine.p2.x + p3NewOldXposDiff;
	p2handle._y = curLine.p2.y + p3NewOldYposDiff; // set position on screen
	p2handle.pt = {x:curLine.p2.x + p3NewOldXposDiff, y:curLine.p2.y + p3NewOldYposDiff}; // p2 ha
	
	curLine.redraw();
	p1handle._visible = p2handle._visible = true;//reactivate other points
	
	trace("lines NEW coordinates: (" + lines._x + ", " + lines._y + ")");
	
	
	//this.pt.x = this._x; // saved point, revereces moveTo or lineTo point
	//this.pt.y = this._y;
	
}
onDragLine = function()
{
	p1handle._visible = p2handle._visible = false//deactivate other points
	//if (this.dragging){ // if being dragged
		this.beginDrag(false);
		curLine.beginDrag(false);
}
MovieClip.prototype.createCircHandle = function(x,y,d,col,alpha){

	trace("node diameter " + d);
	var r=d/2;
	var c1=r*(Math.SQRT2-1);
	var c2=r*Math.SQRT2/2;
		
	this.lineStyle(1,0);
	this.beginFill(col,alpha);
	this.moveTo(x+r,y);
	this.curveTo(x+r,y+c1,x+c2,y+c2);
	this.curveTo(x+c1,y+r,x,y+r);
	this.curveTo(x-c1,y+r,x-c2,y+c2);
	this.curveTo(x-r,y+c1,x-r,y);
	this.curveTo(x-r,y-c1,x-c2,y-c2);
	this.curveTo(x-c1,y-r,x,y-r);
	this.curveTo(x+c1,y-r,x+c2,y-c2);
	this.curveTo(x+r,y-c1,x+r,y);
	this.endFill();
	return this;
	
}
// draw a box for the handle - lines and color hardcoded
MovieClip.prototype.drawHandle = function(x,y,r){
	this.lineStyle(1,0);
	this.beginFill(0xffff00,75);
	this.moveTo(x-r,y-r);
	this.lineTo(x+r,y-r);
	this.lineTo(x+r,y+r);
	this.lineTo(x-r,y+r);
	this.lineTo(x-r,y-r);
	this.endFill();
	return this;
}
// sets a linestyle for a clip, if no arguments are passed
// a saved linestyle is set based on the last set style
// why? because if you clear, linestyle is lost, now you can
// easily reset to the last style
MovieClip.prototype.setLineStyle = function(thick, col, alpha){
	if (arguments.length) this.definedLineStyle = [thick, col, alpha];
	this.lineStyle.apply(this, this.definedLineStyle);
}
// a moveTo which saves the point moved to in a p1 object
MovieClip.prototype.moveToPoint = function(x,y){
	trace("original p1: (" + x + "," + y + ")"); 
	this.p1 = {x:x, y:y}
	this.moveTo(x,y);
}
// a lineTo which saves the point moved to in a p2 object
MovieClip.prototype.lineToPoint = function(x,y){
	trace("original p2: (" + x + "," + y + ")"); 
	this.p2 = {x:x, y:y}
	this.lineTo(x,y);
}
// redraws the clip based on the saved lineStyle, moveTo
// and lineTo variables
MovieClip.prototype.redraw = function(){
	trace("function redraw()");
	this.clear() // clear
	this.setLineStyle(5,0x000000,100); // no argument so sets it to the saved style
	//this.moveTo(this.p1.x, this.p1.y); // draw
	//this.lineTo(this.p2.x, this.p2.y);
	this.moveTo(this.p1.x, this.p1.y); // draw
	this.lineTo(this.p2.x, this.p2.y);
}
MovieClip.prototype.moveLine = function(){
	this.clear(); // clear
	this.setLineStyle(2,0,20); // no argument so sets it to the saved style
	//new p1 pos = current mouse pos - (old coodrinate - current mouse pos) 
	
	
	//works
	this.p1.x = xMouse - (this.p1.x - xMouse);
	this.p1.y = yMouse - (this.p1.y - yMouse);
	this.p2.x = xMouse - (this.p2.x - xMouse);
	this.p2.y = yMouse - (this.p2.y - yMouse);
	updateAfterEvent();
	

	this.moveTo(this.p1.x, this.p1.y); // draw
	this.lineTo(this.p2.x, this.p2.y);
}
// adds 2 handles for each of the two points on a line.  These
// are added to the ornaments clip so not to interfere with lines
MovieClip.prototype.addHandles = function(){
//===========================
//Add point adjustment handles
// created and draw first handle
	curLine = this
	p1handle = ornaments.createEmptyMovieClip("p1handle",1).drawHandle(0,0,5);
	p1handle._x = curLine.p1.x;
	p1handle._y = curLine.p1.y; // set position on screen
	p1handle.pt = curLine.p1; // p1 handle's point is the p1 of this line
	// assign drag functions
	p1handle.onPress = setDrag;
	p1handle.onMouseMove = onDrag
	p1handle.onRelease = p1handle.onReleaseOutside = unSetDrag;
	// created and draw second handle
	p2handle = ornaments.createEmptyMovieClip("p2handle",2).drawHandle(0,0,5);
	p2handle._x = curLine.p2.x; p2handle._y = curLine.p2.y; // set position on screen
	p2handle.pt = curLine.p2; // p2 handle's point is the p2 of this line
	// assign drag functions
	p2handle.onPress = setDrag;
	p2handle.onMouseMove = onDrag
	p2handle.onRelease = p2handle.onReleaseOutside = unSetDrag;
	
//==========================
//Add drag line handle for dragging of whole line
	p3handle = ornaments.createEmptyMovieClip("p3handle",3).createCircHandle(0,0,10,0xffff00,75);
	//work out center of line to place handle
	lineCentreXpos = (curLine.p2.x + curLine.p1.x)/2;
	lineCentreYpos = (curLine.p2.y + curLine.p1.y)/2;
	p3handle._x = lineCentreXpos;
	p3handle._y = lineCentreYpos;
	p3handle.pt = {x:lineCentreXpos, y:lineCentreYpos};//store handles coord's in obj
	
	p3handle.onPress = onDragLine;
	//p3handle.onMouseMove = onDragLine;
	p3handle.onRelease = p3handle.onReleaseOutside = unSetDragLine;

}
// removes the handle clips from the ornaments layer
// (currently not used, but would be used to go back to
// a drawing tool or something of the such)
MovieClip.prototype.removeHandles = function(){
	ornaments.p1handle.removeMovieClip();
	ornaments.p2handle.removeMovieClip();
}

// MAIN: =====================================================================
// create two lines to play with, here, drawing is hardcoded.
l1 = lines.createEmptyMovieClip("line1",1);
trace("lines ORIGINAL coordinates: (" + lines._x + ", " + lines._y + ")");
//l1.p1 = {x:l1._x, y:l1._y};
l1.setLineStyle(5,0xff0000,100);
l1.moveToPoint(100,100);
l1.lineToPoint(200,200);

l1.onPress = function(){

	this.addHandles();
	
}
/*
l2 = lines.createEmptyMovieClip("line2",2);
l2.setLineStyle(5,0,100);
l2.moveToPoint(100,0);
l2.lineToPoint(200,100);
l2.onPress = function(){
	trace("l2****");
	this.addHandles();
}
*/


holy crap that’s a lot of code…lemme sit down…

****! Ok I tried to answer your question here, but all I can give is a few of my own, since I’m just a stuipd little script kiddie. I get the following errors when trying to use this:
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 175: ‘:’ expected
this.p1 = {x<([just imagine an image source here]“images/smilies/speechless.gif” border=“0” alt="">, y:y}

Scene=Scene 1, Layer=Layer 1, Frame=1: Line 181: ‘:’ expected
this.p2 = {x<[just imagine an image source here]=“images/smilies/speechless.gif” border=“0” alt="">, y:y}

this is while using a completely blank .fla (except for the action script). Also, do I have to make a movieclip of a line to manipulate or does this script allow you to do that?

HAhaha yeah its heaps of code and its a little technical.

Umm

Meltdown:

****! Ok I tried to answer your question here, but all I can give is a few of my own,

Yeah will give you hand with it Meltdown but at the momment Im a bit tied up with my own question to think about explaing it all properly, will explain it a little later to you :).

And Thor so what do ya think? LOL any solutions?

Hmm still having no luck, but Im sure my logic for resetting the postion of the handles after a dragLine is all messed up…


unSetDragLine = function(){
        
        this.endDrag();
        curLine.endDrag();
        
        p3OldXpos = this.pt.x;
        p3OldYpos = this.pt.y;
        
        this.pt.x = this._x; // saved point, revereces moveTo or lineTo point
        this.pt.y = this._y;
        
        p3NewOldXposDiff = this.pt.x - p3OldXpos;
        p3NewOldYposDiff = this.pt.y - p3OldYpos;
        
        trace("new p1: (" + curLine.p1.x + "," + curLine.p1.y + ")");
        p1handle._x = curLine.p1.x + p3NewOldXposDiff;
        p1handle._y = curLine.p1.y + p3NewOldYposDiff; // set position on screen
        p1handle.pt = {x:curLine.p1.x + p3NewOldXposDiff, y:curLine.p1.y + p3NewOldYposDiff};
        trace("new p2: (" + curLine.p2.x + "," + curLine.p2.y + ")");
        p2handle._x = curLine.p2.x + p3NewOldXposDiff;
        p2handle._y = curLine.p2.y + p3NewOldYposDiff; // set position on screen
        p2handle.pt = {x:curLine.p2.x + p3NewOldXposDiff, y:curLine.p2.y + p3NewOldYposDiff}; // p2 ha
        
        curLine.redraw();
        p1handle._visible = p2handle._visible = true;//reactivate other points
        
        trace("lines NEW coordinates: (" + lines._x + ", " + lines._y + ")");
        
        
        //this.pt.x = this._x; // saved point, revereces moveTo or lineTo point
        //this.pt.y = this._y;
        
}
onDragLine = function()
{
        p1handle._visible = p2handle._visible = false//deactivate other points
        //if (this.dragging){ // if being dragged
        this.beginDrag(false);
        curLine.beginDrag(false);
}

BAH this thread is going nowhere fast and I have no more trix up my sleaves, another evening with no luck. Please if anyone has any suggestions with the logic/syntax in my AS please say something LOL :x

its just too much to handle at once. Id like to help but I only have so much time… most of my responces are little burts, quick answer here, quick answer there… not much time for involved things (though I had a couple in the past).

Can you narrow it down any?

lemme take a look at it… be back soon…

wow this is some great code…

It’s going to take me just a bit to figure out what you’re doing and how it relates to your problem…

is there an example of thing anywhere? like so i can see what its doing…?

*Originally posted by senocular *
**its just too much to handle at once. Id like to help but I only have so much time… most of my responces are little burts, quick answer here, quick answer there… not much time for involved things (though I had a couple in the past).

Can you narrow it down any? **

Same here…

have you tried walking away for like. 10, 20 mins and stop thinking about the code? hehe most times when im in a rut, i have to stop, go watch some tv, no think of my code, then i return and ussually fix it =)

Yeah sorry guys (Se, Lost, Ray, Thor) I agree too much code, I know Im asking a hit much sorry (-: ,hehe think I got carried away. I think when I started the post I was in a state of panic and frustration and in a rush, and our time difference I thought if I get something up in Kirupa AS forum whilst I work on it someone may spot a real stupid mistake… Ok so anyway i’ll narrow the post. down !! :thumb:

Ok well as you may have guessed im trying to create an ‘editing’ mode for lines in my movie where they can be respositioned and changed…
Let me explain the AS…

FOR THOSE WHO DONT KNOW THE GIST OF WHAT IM DOING

I have an API drawn line. To draw the line I have 2 methods called moveToPoint and lineToPoint. Within these methods I simply use the original moveTo and lineTo methods except I save the moveTo point coord’s in an obj named p1 and the lineTo point coords in and obj named p2. (Eg p1 = {x: y:} and p2 ={x: y:}…So far hope this makes sense.


MovieClip.prototype.moveToPoint = function(x,y){
	this.p1 = {x:x, y:y}
	this.moveTo(x,y);
}
// a lineTo which saves the point moved to in a p2 object
MovieClip.prototype.lineToPoint = function(x,y){
	this.p2 = {x:x, y:y}
	this.lineTo(x,y);
}

From here I have a MC called ‘ornaments’. In the ornaments MC I have ‘handles’. The handles are box shaped MCs which are clicked and dreagged to edit the line, just like the ‘anchors’ in any drawing program (Eg Illustartor). These handles are added to the ‘anchor points’ of line when the user clicks the line. There postioning is via the values stored in the p1 and p2 objs (the start and end points of the line).


//An example of adding the p1 handle (the start point of the line)
curLine = this
	p1handle = ornaments.createEmptyMovieClip("p1handle",1).drawHandle(0,0,5);
	p1handle._x = curLine.p1.x;
	p1handle._y = curLine.p1.y; // set position on screen
	p1handle.pt = curLine.p1; // p1 handle's point is the p1 of this line


FOR THOSE WHO KNOW WHAT IM DOING

Now this is where my problem begins. Each handle has its own obj storing its coordinate like the line, although its called ‘pt’. Of course you guessed it the p1handle is in the same coordinate as the starting point for the line, so the pt obj for p1handle has the same values as the p1 obj for the lines start point…This is the similar to p2handle. Anyway after deciding the the user may just want to repostion the entire line, and not adjust its direction I decided to add a 3rd handle called p3handle. p3handle (unlike p1handle and p2handle) is circular and appears on the center of the selected line. So I had to figure out how to position the handle on the centre of the line. Without an API function I had to use the values of the p1 and p2 obj’s to determine where the center of line was. I figured it out and everytime the user changed the direction of the line with the p1handle or p2handle I could reposition the p3handle with no problem, just a matter of completing my mathematical algorithm. But on the other hand when the user drags the entire line via p3handle I cant seem to respostion p1handle and p2handle properly without affecting the postion of the line…


p3OldXpos = this.pt.x;
	p3OldYpos = this.pt.y;
	//save new p3handle x and y positions
	this.pt.x = this._x; // saved point, revereces moveTo or lineTo point
	this.pt.y = this._y;
	//To work out where the new p1handle and p2handle positions are use the difference
	//between the p3handle previous position and new poosition
	xDistanceDragged = this.pt.x - p3OldXpos;
	yDistanceDragged = this.pt.y - p3OldYpos;
		
	trace("new p1: (" + curLine.p1.x + "," + curLine.p1.y + ")"); 
	//now reposition p1handle and p2handle appropriately
	p1handle._x = curLine.p1.x + xDistanceDragged;
	p1handle._y = curLine.p1.y + yDistanceDragged; // set position on screen
	p1handle.pt = {x:curLine.p1.x + xDistanceDragged, y:curLine.p1.y + yDistanceDragged};

From above you will notice Ive been using the value of the difference between p3handles previous positon (ie before it was dragged) and its new position to reset the p1handle and p2handle position. This works ok, I mean it manages to postion the handles back on the end and start point of the line. BUT as we know the coord of the p1handle for instance is the same as for the start of the line, but when you try to set it to the same value the stupid line keeps offsetting!!! ARGH…

Hope this makes my post a littlw more clear :slight_smile:

Anyway download the total thing here play aroun with it and Im sure you’ll see whats going wrong

users.bigpond.net.au/creativeevolution/forums/kirupapost_linemanip4.fla

ok, just so you know I got some time and am looking at it :wink: You know, its friday night and I havent anything to do so here I am (how typical :eye: )

Let me know if you’ve gotten any further with this since … this…

Its easier for me too since I helped you get started with this :slight_smile:

ok, I can tell you now that the problem lies in the fact that you were moving your line clip as well as trying to draw it using its own x/y point coordinates. Youd want to stick to one or the other, the best being IMHO just using coordinates. Im doing some rewriting of what ya got and Ill post the working example

I did a lot of rewriting and cleaning up (and got a little distracted from a Cancer Society walkathon I forgot was tonight ;)) but here is the bulk of what I changed. Whats missing here I really didnt touch. Ill post the fla too.


// OBJECT SCOPES:  =======================================
lines = this.createEmptyMovieClip("l", 1);
ornaments = this.createEmptyMovieClip("o", 2);
curLine = p1handle = p2handle = centerHandle = null;


// END POINT DRAGGING
setDragEndPoint = function () {
	centerHandle._visible = false;
	
	this.beginDrag();
	this.onMouseMove = onDragEndPoint;
};
onDragEndPoint = function () {
	this.pt.x = this._x = this._parent._xmouse;
	this.pt.y = this._y = this._parent._ymouse;
	curLine.redraw();
};

// CENTER POINT (LINE) DRAGGING
setDragLine = function (){
	this.startCenter = {x:this._x, y:this._y};
	this.startp1 = {x:curline.p1.x, y:curline.p1.y};
	this.startp2 = {x:curline.p2.x, y:curline.p2.y};
	p1handle._visible = p2handle._visible = false;
	
	this.beginDrag();
	this.onMouseMove = onDragLine;
};
onDragLine = function () {
	var offset = {
		x: this._x - this.startCenter.x,
		y: this._y - this.startCenter.y
	};
	curline.p1.x = this.startp1.x + offset.x;
	curline.p1.y = this.startp1.y + offset.y;

	curline.p2.x = this.startp2.x + offset.x;
	curline.p2.y = this.startp2.y + offset.y;

	curLine.redraw();
};

// common stop drag
unSetDrag = function () {
	this.endDrag();
	delete this.onMouseMove;
	
	UpdateHandles();
};




MovieClip.prototype.addHandles = function() {
	curLine = this;
	
	//=======ENDPOINTS=======
	p1handle = ornaments.createEmptyMovieClip("p1handle", 1).drawHandle(0, 0, 5);
	p2handle = ornaments.createEmptyMovieClip("p2handle", 2).drawHandle(0, 0, 5);
	p1handle.pt = curLine.p1;
	p2handle.pt = curLine.p2;
	p1handle.onPress = p2handle.onPress = setDragEndPoint;
	p1handle.onRelease = p1handle.onReleaseOutside = p2handle.onRelease = p2handle.onReleaseOutside = unSetDrag;
	
	//========CENTER========
	centerHandle = ornaments.createEmptyMovieClip("centerHandle", 3).createCircHandle(0, 0, 10, 0xffff00, 75);
	centerHandle.onPress = setDragLine;
	centerHandle.onRelease = centerHandle.onReleaseOutside = unSetDrag;
	
	UpdateHandles();
};


UpdateHandles = function(){
	centerHandle._visible = p1handle._visible = p2handle._visible = true;
	
	centerHandle._x = (curLine.p2.x + curLine.p1.x)/2;
	centerHandle._y = (curLine.p2.y + curLine.p1.y)/2;
	
	p1handle._x = curLine.p1.x;
	p1handle._y = curLine.p1.y;
	
	p2handle._x = curLine.p2.x;
	p2handle._y = curLine.p2.y;
};

MovieClip.prototype.removeHandles = function() {
	p1handle.removeMovieClip();
	p2handle.removeMovieClip();
	centerHandle.removeMovieClip();
};

so a few things are going on here.

  1. I ditched the pt objects for the handles. They weren’t needed. They were only mirroring their own _x and _y so it was redundant to have them in this situation.

1.2) actually there are pt objects in the endpoint handles :wink: but they arent their own pt objects, rather references to the cooresponding point object in the curLine. This makes it easy to change that pt when the handle is being dragged

  1. movement no longer moves the curLine clip. Now, it just changes the p1 and p2 points in that clip so when its drawn its drawn based on those positions correctly (and not having to worry about a new moveiclip position to be thrown in there causing rukus)

2.2) added a mouseMove for the movement to handle line position, centerHandle (2.3 - which I renamed from p3handle), which is used to calculate the new positions of curLine’s p1 and p2 based on the offset of where you pressed it to drag and where the handle currently is.

  1. made the unsetDrag functions the same since… now, they are the same.

  2. added an UpdateHandles function which shows all the handles and puts them in their right positions based on the curLine points.

… yada yada yada take a look at it and ask any questions you might have (after all I really didnt comment it much, they just get in the way)

HEh yeah I know its friday night, and yeah I know you started the script thats why its hard posting it and expecting everyone to even understand the logic to begin with…But thanks alot Se…Hmmm Ahhh yes I thought the problem could have been that I was dargging the entire line clip, but Im sure I did trace statements and I couldnt see that it was, so I dismissed that thought. I mean it makes sense if it is because it means that the coord for the actually drawn line doesnt change becuse its relative to its parent -lines. I just couldnt get my mind around a better way, …Anyway Im going through your posted example, thanks a bunch, Im real sorry u missed the walakathon ;(

no I didnt miss it :wink: it just made me post a few hours late :slight_smile:
I pretty much had it at the last post on the first page but jen made me leave so I couldnt quite get it out before leaving

As per usual your solution works a dream ! And dont worry about the commenting, after a few read through’s Ive clearly understood what you’ve done. I particularly like the updateHandle() function and offset obj you have implemented makes alot of sense. I think adding the mouseMove event in the set dragging methods seems a little more logical…thats my main problem, I was ok with working the algorithms to work out the valuies for placing the handles but I think I got lost with updating the obj’s storing the coordinates and the use of the redraw() method…

Oh and by the way I took a look at your Interactive site Se, looks good, I hope your going to add this to your fla’s ! There was something else I was going to say about the site but Ive forgotten…darn, anyway I’ll get back to you about it when I remeber.

Thanks Again :wink:

its still a work in progress. :slight_smile: I have a lot of holes to patch up and some formatting that Im just too lazy to get to, but its there. heh.

glad this is working out for you … and easily understood too :wink: