Jump to content
Search Community

Bezier tween draw curve [SOLVED]

ronaldo71 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

  • 3 months later...

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 7 months later...

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++;

}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...