Bezier tween draw curve [SOLVED]

[ronaldo71 0 Likes (Newbie)]

Hi all,

 

I'm using the bezier/bezierThrough tweening facility (wauw, really easy )

In order to facilitate my tween path (I have to set the coordinates by hand) I'd like to know how I can draw the bezier curve itself,

so that I can visualize the path and edit the points without having to run the tween every time.

(Like the line in the bezier/bezierTrough example, except I don't need to click to add extra points).

 

So, in short, how can I draw the bezier curve itself? Does the tween class uses the defualt bezier from adobe?

 

Thanks!

Ronaldo

[GreenSock 17,889 Likes (Superhero)]

You could use the BezierPlugin's parseBeziers() method to spit back data that you'd use to draw the curve with Flash's graphics API (curveTo(), etc.). That's what the Plugin Explorer uses.

[Torben 0 Likes (Newbie)]

Hi Jack - or anyone else who can answer this.

 

I'm trying to acheive (sp?) the same thing - I think

 

I'm drawing a bezier curve according to the user mousx and mouseY position. I would like to change it to your more "natural" bezierThrough points.

 

Now I have:

shape.graphics.curveTo(mouseX, mouseY, lineEndX, lineEndY);

 

So instead of mouseX and mouseY I would need the bezierThrough points - lineEndX and lineEndY doens't change. But I'm not sure what to feed the BezierPlugin.parseBeziers method. I think I just don't get the idea behind bezier points.

 

Thanks

[GreenSock 17,889 Likes (Superhero)]

You don't need to figure out any other points - you just keep track of your mouse positions in an Array and feed that to the BezierPlugin.parseBeziers() method and it'll spit back to you the info you need to draw the beziers with curveTo(). I don't have time to walk through all the code with you, but hopefully it's relatively straightforward between looking at the BezierPlugin docs and Adobe's curveTo() docs.

[Torben 0 Likes (Newbie)]

Thanks Jack

 

I'm trying to imitate the bezier/bezierThrough example where you can drag a point and the line curves with it. And when using bezierThrough it curves through the point.

 

I'm thinking I should do this:

shape.graphics.clear();
shape.graphics.lineStyle(lineWeight, lineColor, 1, true, LineScaleMode.NONE, CapsStyle.NONE);
shape.graphics.moveTo(lineStartX, lineStartY);

var bezPoints:Object = BezierPlugin.parseBeziers({"x":[lineStartX, mouseX, lineEndX], "y":[lineStartY, mouseY, lineEndY]}, true);
shape.graphics.curveTo(bezPoints.x[0][1], bezPoints.y[0][1], bezPoints.x[0][2], bezPoints.y[0][2]);

 

But that doesn't work - does anyone know what I'm doing wrong

[Torben 0 Likes (Newbie)]

Nevermind - I found another solutiuon on a blog.

[micmac 0 Likes (Newbie)]

I found the solution.

 

create a new Fla,and paste following code in Actions Frame.And you can see the result.

 

import flash.display.Sprite;

import com.greensock.TweenMax;

import com.greensock.plugins.BezierPlugin;

import com.greensock.plugins.BezierThroughPlugin;

 

var sp:Sprite=new Sprite();

addChild(sp);

 

sp.graphics.beginFill(0xff0000);

sp.graphics.drawRect(0,0,100,200);

sp.graphics.endFill();

 

TweenMax.to(sp,5,{bezierThrough:[{x:250,y:100},{x:50,y:200},{x:500,y:200}]});

 

this.graphics.lineStyle(1);

 

var xA:Array=[0,250,50,500];

var yA:Array=[0,100,200,200];

 

var bezierObj:Object=BezierPlugin.parseBeziers({"x":xA,"y":yA},true);

 

var pointCount:int=0;

while(pointCount

{

this.graphics.curveTo(bezierObj.x[pointCount][1],bezierObj.y[pointCount][1],bezierObj.x[pointCount][2],bezierObj.y[pointCount][2]);

pointCount++;

}