As: Api Curves Expanded

[Glaiel-Gamer]

http://img171.images..p?image=curve8eq.swf

That is what you'll be making.

First:
AS: Main
AS: API

So one day I set out to get a better understanding of the curveTo() command. Here's what I knew already.

*The curve starts at the drawing point (set with the moveTo command, see AS: API for more info)
*It goes to the anchor point. mc.curveTo(control x, control y, ANCHOR X, ANCHOR Y)
*The curve is defined by the control point, it goes half way to the control point

So here we have our curve.

createEmptyMovieClip("sq1", 3);
d1 = false;
d2 = false;
d3 = false;
with (sq1) {
lineStyle(2, 0x000000, 100);
beginFill(0xff0000, 70);
moveTo(-5, -5);
lineTo(5, -5);
lineTo(5, 5);
lineTo(-5, 5);
lineTo(-5, -5);
endFill;
_x = 100;
_y = 200;
}
duplicateMovieClip(sq1, "sq2", 6);
duplicateMovieClip(sq1, "sq3", 5);
createEmptyMovieClip("curve", 1);
sq2._x = 275;
sq2._y = 100;
sq3._x = 450;
sq3._y = 200;
_root.onMouseDown = function() {
if (sq1.hitTest(_xmouse, _ymouse, true)) {
d1 = true;
}
if (sq2.hitTest(_xmouse, _ymouse, true)) {
d2 = true;
}
if (sq3.hitTest(_xmouse, _ymouse, true)) {
d3 = true;
}
};
_root.onMouseUp = function() {
d1 = false;
d2 = false;
d3 = false;

};
_root.onEnterFrame = function() {
if (d1) {
sq1._x = _xmouse;
sq1._y = _ymouse;
} else if (d2) {
sq2._x = _xmouse;
sq2._y = _ymouse;
} else if (d3) {
sq3._x = _xmouse;
sq3._y = _ymouse;
}
curve.clear();
curve.lineStyle(3, 0x000000, 100);
curve.moveTo(sq1._x, sq1._y);
curve.curveTo(sq2._x, sq2._y, sq3._x, sq3._y);
};

All this does is basically make 3 points, and curve them. Click and drag the squares to see how the curve works.

Next in my experiments, I wanted to find out what it meant by the curve going half way to the control point. Through a little trial and error, I discovered that a line from the midpoint of the 2 anchor points to the control point is bisected equally by the curve.

I won't post code for this right now, as it is almost the same code, with a minor adjustment.

Next, I decided to find the exact point where the line intersected the curve and put a box there. Simple to do, it is just the midpoint of the line. Easy enough to do. It also made it easy for my next step.

Now, I made the box in the middle draggable too. Using some simple geometry, particularly slope, I could make it work like I wanted. Here's the code, but before you just go and copy the code into a flash, try to make it yourself. It will help you better understand the curveTo function.

createEmptyMovieClip("sq1", 3);
d1 = false;
d2 = false;
d3 = false;
d4 = false;
with (sq1) {
lineStyle(2, 0x000000, 100);
beginFill(0xff0000, 70);
moveTo(-5, -5);
lineTo(5, -5);
lineTo(5, 5);
lineTo(-5, 5);
lineTo(-5, -5);
endFill;
_x = 100;
_y = 200;
}
duplicateMovieClip(sq1, "sq2", 6);
duplicateMovieClip(sq1, "sq3", 5);
duplicateMovieClip(sq1, "sq4", 4);
createEmptyMovieClip("curve", 1);
createEmptyMovieClip("line", 2);
sq2._x = 275;
sq2._y = 100;
sq3._x = 450;
sq3._y = 200;
_root.onMouseDown = function() {
if (sq1.hitTest(_xmouse, _ymouse, true)) {
d1 = true;
}
if (sq2.hitTest(_xmouse, _ymouse, true)) {
d2 = true;
}
if (sq3.hitTest(_xmouse, _ymouse, true)) {
d3 = true;
}
if (sq4.hitTest(_xmouse, _ymouse, true)) {
d4 = true;
}
};
_root.onMouseUp = function() {
d1 = false;
d2 = false;
d3 = false;
d4 = false;
};
_root.onEnterFrame = function() {
if (d1) {
sq1._x = _xmouse;
sq1._y = _ymouse;
} else if (d2) {
sq2._x = _xmouse;
sq2._y = _ymouse;
} else if (d3) {
sq3._x = _xmouse;
sq3._y = _ymouse;
} else if (d4) {
sq4._x = _xmouse;
sq4._y = _ymouse;
xdist = sq4._x-((sq1._x+sq3._x)/2);
ydist = sq4._y-((sq1._y+sq3._y)/2);
sq2._x = sq4._x+xdist;
sq2._y = sq4._y+ydist;
}
curve.clear();
curve.lineStyle(3, 0x000000, 100);
curve.moveTo(sq1._x, sq1._y);
curve.curveTo(sq2._x, sq2._y, sq3._x, sq3._y);
curve.lineTo(sq2._x, sq2._y);
curve.lineTo(sq1._x, sq1._y);
curve.lineTo(sq3._x, sq3._y);
line.clear();
line.lineStyle(1, 0x000000, 100);
line.moveTo(sq2._x, sq2._y);
line.lineTo((sq1._x+sq3._x)/2, (sq3._y+sq1._y)/2);
sq4._x = (((sq1._x+sq3._x)/2)+sq2._x)/2;
sq4._y = (((sq1._y+sq3._y)/2)+sq2._y)/2;
};

~GG Out.

[Cojones893]

You little bastard I never thought of testing it that way. thanks.

[Glaiel-Gamer]

you're welcome

[Mogly]

thanks alot glaiel, im gunna get addicted soon thanks to you :(

[ForkClock]

......................gotta love actionscript.

[Daza]

thx GG, I love u for this ;)

[Glaiel-Gamer]

At 7/21/05 01:00 PM, -DAZA- wrote: thx GG, I love u for this ;)

Gender: Male
No thanks

[Glaiel-Gamer]

Any more comments?

[liam]

Fuck man, that dragging code was messed up.. just do this:

MCinstance.onPress=function(){
startDrag(this);
}

then to stop dragging, use this ONCE:

onMouseUp=function(){
stopDrag();
}

Here's something I have made, I did it to understand curveTo as well.. hopefully people can learn from it ^^

_root.createEmptyMovieClip("box1", 11);
with (box1) {
lineStyle(1, 0x000000, 100);
moveTo(-2.5, -2.5);
beginFill(0xffffff, 50);
lineTo(2.5, -2.5);
lineTo(2.5, 2.5);
lineTo(-2.5, 2.5);
lineTo(-2.5, -2.5);
_x = 10;
_y = 10;
}
_root.createEmptyMovieClip("box2", 12);
with (box2) {
lineStyle(1, 0x000000, 100);
moveTo(-2.5, -2.5);
beginFill(0xffffff, 50);
lineTo(2.5, -2.5);
lineTo(2.5, 2.5);
lineTo(-2.5, 2.5);
lineTo(-2.5, -2.5);
_x = 110;
_y = 10;
}
_root.createEmptyMovieClip("box3", 13);
with (box3) {
lineStyle(1, 0x000000, 100);
moveTo(-2.5, -2.5);
beginFill(0xffffff, 50);
lineTo(2.5, -2.5);
lineTo(2.5, 2.5);
lineTo(-2.5, 2.5);
lineTo(-2.5, -2.5);
_x = 60;
_y = 10;
}
_root.createEmptyMovieClip("box4", 14);
with (box4) {
lineStyle(1, 0x000000, 100);
moveTo(-2.5, -2.5);
beginFill(0xffffff, 50);
lineTo(2.5, -2.5);
lineTo(2.5, 2.5);
lineTo(-2.5, 2.5);
lineTo(-2.5, -2.5);
_x = 10;
_y = 110;
}
_root.createEmptyMovieClip("box5", 15);
with (box5) {
lineStyle(1, 0x000000, 100);
moveTo(-2.5, -2.5);
beginFill(0xffffff, 50);
lineTo(2.5, -2.5);
lineTo(2.5, 2.5);
lineTo(-2.5, 2.5);
lineTo(-2.5, -2.5);
_x = 10;
_y = 60;
}
_root.createEmptyMovieClip("box6", 16);
with (box6) {
lineStyle(1, 0x000000, 100);
moveTo(-2.5, -2.5);
beginFill(0xffffff, 50);
lineTo(2.5, -2.5);
lineTo(2.5, 2.5);
lineTo(-2.5, 2.5);
lineTo(-2.5, -2.5);
_x = 110;
_y = 110;
}
_root.createEmptyMovieClip("box7", 17);
with (box7) {
lineStyle(1, 0x000000, 100);
moveTo(-2.5, -2.5);
beginFill(0xffffff, 50);
lineTo(2.5, -2.5);
lineTo(2.5, 2.5);
lineTo(-2.5, 2.5);
lineTo(-2.5, -2.5);
_x = 110;
_y = 60;
}
_root.createEmptyMovieClip("box8", 18);
with (box8) {
lineStyle(1, 0x000000, 100);
moveTo(-2.5, -2.5);
beginFill(0xffffff, 50);
lineTo(2.5, -2.5);
lineTo(2.5, 2.5);
lineTo(-2.5, 2.5);
lineTo(-2.5, -2.5);
_x = 60;
_y = 110;
}
_root.createEmptyMovieClip("box9", 19);
with (box9) {
lineStyle(1, 0x000000, 100);
moveTo(-2.5, -2.5);
beginFill(0xffffff, 50);
lineTo(2.5, -2.5);
lineTo(2.5, 2.5);
lineTo(-2.5, 2.5);
lineTo(-2.5, -2.5);
_x = 60;
_y = 60;
}
box1.onPress = function() {
startDrag(this);
};
box2.onPress = function() {
startDrag(this);
};
box3.onPress = function() {
startDrag(this);
};
box4.onPress = function() {
startDrag(this);
};
box5.onPress = function() {
startDrag(this);
};
box6.onPress = function() {
startDrag(this);
};
box7.onPress = function() {
startDrag(this);
};
box8.onPress = function() {
startDrag(this);
};
box9.onPress = function() {
startDrag(this);
};
onMouseUp = function () {
stopDrag();
};
onEnterFrame = function () {
_root.createEmptyMovieClip("line1", 1);
with (line1) {
lineStyle(2, 0xff0000, 100);
moveTo(box1._x, box1._y);
curveTo(box3._x, box3._y, box2._x, box2._y);
}
_root.createEmptyMovieClip("line2", 2);
with (line2) {
lineStyle(2, 0xff0000, 100);
moveTo(box1._x, box1._y);
curveTo(box5._x, box5._y, box4._x, box4._y);
}
_root.createEmptyMovieClip("line3", 3);
with (line3) {
lineStyle(2, 0xff0000, 100);
moveTo(box4._x, box4._y);
curveTo(box8._x, box8._y, box6._x, box6._y);
}
_root.createEmptyMovieClip("line4", 4);
with (line4) {
lineStyle(2, 0xff0000, 100);
moveTo(box2._x, box2._y);
curveTo(box7._x, box7._y, box6._x, box6._y);
}
_root.createEmptyMovieClip("line5", 5);
with (line5) {
lineStyle(2, 0xff0000, 100);
moveTo(box1._x, box1._y);
curveTo(box9._x, box9._y, box6._x, box6._y);
}
_root.createEmptyMovieClip("line6", 6);
with (line6) {
lineStyle(2, 0xff0000, 100);
moveTo(box2._x, box2._y);
curveTo(box9._x, box9._y, box4._x, box4._y);
}
};

And the link:

http://img314.images..hp?image=test0hb.swf

[Glaiel-Gamer]

At 7/21/05 02:15 PM, -liam- wrote: Fuck man, that dragging code was messed up.. just do this:

I like doing it my way, more versatility.

[jkhkhj]

At 7/21/05 02:05 PM, Glaiel_Gamer wrote: Any more comments?

no.

[Rustygames]

this should be useful

[IWantSomeCookies]

At 7/23/05 01:49 PM, Ninja-Chicken wrote: this should be useful

Thats alright, I bit confusing.

Great job on the tute. Really helps.. but I really need to understand API first. Haha.

[T-H]

At 10/13/05 02:00 PM, IWantSomeCookies wrote: Great job on the tute. Really helps.. but I really need to understand API first. Haha.

Its not very hard, you'll pick it up easily enough ; )

Really though, although interesting, I think this would have been perfectly acceptable as a post within the API curves/API thread instead of a whole AS topic

[sandypaw]

mmm curvacious nice api 9/10