organische Linien, curveTo, Bezier, ...

[offense]

hallo zusammen,

ich versuche momenten eine linie "organisch" zu animieren, soll in etwa so aussehen:
http://www.offense.de/pg/organische_linien.html

ist nur ein fixes beispiel mit ner linie die ich mal eben mit tweens bewegt habe.

ich habe es schon mit curveTo, etc versucht ... leider bekomme ich immer nur eine kurve hin, 2 nur wenn ich die linie in 2 segmente teile ... leider gibts dann bei dem punkt wo die beiden segmente zusammen kommen eine unschöne kante

hat jemand eine idee wie ich das so machen kann, natürlich hab ich im forum nach bezier, curveTo, etc gesucht ... leider hab ich nirgends so richtig was gefunden ... kann mir jemand eventuell helfen?

danke im vorraus!

[gaspode]

Hi.

ich empfehel Dir zu diesem Thema das Buch
«Actionscript Animation» von Keith Peters:
http://www.amazon.de/exec/obidos/ASI...205034-1739731

In Kapitel 4 wird genau diese Problem erörtert,
wie man es schafft, mehrere curveTo-Kurven
glatt ineinander übergehen zu lassen.

Die Source-Files zum Kapitel gibts hier:
http://www.friendsofed.com/download....sbn=1590595181
(schau dir da mal die ch04_05.fla an)

gruß, gaspode

[hgseib]

curveTo zeichnet eine quadratische bézier-kurve. diese wird mit 3 punkten bestimmt. der erste punkt ist die aktuelle position (z.b. mit moveTo zu setzen) und anfang der kurve.
der zweite punkt ist die 'spitze eines dreiecks' das richtung und krümmung vorgibt. dieser punkt steht weit ausserhalb der gezeichneten kurve.
der dritte punkt ist das ende der kurve.
moveTo(x1,y1);
curveTo(x2,y2,x3,y3);

für eine folgekurve ist x3,y3 der anfang, punkt 4 wieder richtung und krümmung und punkt 5 das ende des 2. béziers.
curveTo(x4,y4,x5,y5);

die kurven passen ohne kanten aneinander, wenn punkt 2-3-4 auf einer geraden liegen. soetwas ermittelt man am einfachsten, wenn punkt 3 als die mitte von punkt 2 und 4 berechnet wird:

x1=100, y1=100;
x2=200, y2=400;
x4=550, y4=120;
x6=500, y6=350;
x8=350, y8=50;
x9=200, y9=200;
//
x3=(x2+x4)/2, y3=(y2+y4)/2;
x5=(x4+x6)/2, y5=(y4+y6)/2;
x7=(x6+x8)/2, y7=(y6+y8)/2;
//
// polygon
_root.lineStyle(0, 0xff0000);
_root.moveTo(x1, y1);
_root.lineTo(x2, y2);
_root.lineTo(x4, y4);
_root.lineTo(x6, y6);
_root.lineTo(x8, y8);
_root.lineTo(x9, y9);
// bézier
_root.lineStyle(3, 0);
_root.moveTo(x1, y1);
_root.curveTo(x2, y2, x3, y3);
_root.curveTo(x4, y4, x5, y5);
_root.curveTo(x6, y6, x7, y7);
_root.curveTo(x8, y8, x9, y9);

[offense]

euch beiden schonmal danke!
das problem ist gelöst und die linien haben einen 'glatten' übergang.

die animation sieht bei mir leider noch zu technisch aus, hat jemand eventuell einen ansatz wie sie mehr 'organisch' wirkt oder sogar ein codeschnipsel mit beispiel? :-)

[hgseib]

mehr schnörkel
und zeig halt mal was du bisher gemacht hast.

[offense]

so, nochmals danke euch beiden!

mich hat das curtain beispiel von http://lab.andre-michelle.com/ ein sehr gutes stück weiter gebracht! ist zwar nicht mehr AS1 aber seht selbst:

http://www.offense.de/pg/organische_linien_v2.html

ist fast final, wenn es final ist werd ichs gerne nochmal posten

[hgseib]

hmmm. und was ist daran 'organisch' ?

[offense]

naja, das ist 'meine' definition gewesen ... so wie im beispiel oben.
wenn du eine bessere definition hast, immer her damit!

[hgseib]

die drei linien erinnern wohl an wellen. aber wellen sind nicht organisch. auch nicht, wenn sie von einem wal erzeugt würden.

hauptsache, dir gefällts ;-)