Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Eckstein1

Draw Bezier - type "soft"

Recommended Posts

Hi,

 

I'm creating a bezier curve of the type "soft". It works perfectly as it should. I want to draw the bezier path it's following.

If I use all other available types I'm able to draw the bezier path, but I found no way to draw one of the type "soft".

 

For the different types I'm using the following methods:

1. cubic: graphics.cubicCurveTo() method of Flash

2. quadratic: graphics.curveTo() method of Flash

3. thru: BezierPlugin.bezierThrough() method of Greensock and graphics.curveTo() method of Flash (attribute basic=false)

4. thruBasic: BezierPlugin.bezierThrough() method of Greensock and graphics.curveTo() method of Flash (attribute basic=true)

5. soft: ?

 

Thanks for the great tool and your help

Uli

Link to comment
Share on other sites

Thanks for the kind works. 

 

I'm not so sure we are exposing the path data of "soft" in a way that is accessible or easy to translate back to the AS3 drawing API. Will have to escalate this issue and dig a little deeper. 

Link to comment
Share on other sites

If I remember correctly, "soft" treats the first and last points as anchors, and then everything inbetween as control points, bisecting them to fabricate anchors inbetween the control points. 

  • Like 1
Link to comment
Share on other sites

Hi,

 

thanks for your reply.

How can I calculate the anchors inbetween to be able to use the AS3 drawing API?

Link to comment
Share on other sites

Loop through your points and make the adjustments I mentioned above, and feed the results as Quadratic Beziers. Remember, just bisect (plot the midpoint) between the control points you're feeding in, and use the result as the anchors along the way. 

Link to comment
Share on other sites

Hi,

thanks again for your answer. Now I got you. Look what I tried:

import com.greensock.*;
import com.greensock.easing.*; 
import com.greensock.plugins.*; 

// movieclip for bezier
var m1:MovieClip;
m1 = new MovieClip();
m1.graphics.lineStyle(1, 0xff0000, 1);

// bezier
var a1:Array = [{x:0,y:300},{x:90,y:10},{x:280,y:200},{x:330,y:480},{x:580,y:190},{x:780,y:680},{x:800,y:400}];

// draw soft bezier
m1.graphics.moveTo(a1[0].x, a1[0].y);
m1.graphics.curveTo(a1[1].x, a1[1].y, a1[1].x+((a1[2].x-a1[1].x)/2), a1[1].y+((a1[2].y-a1[1].y)/2));
for (var u1:uint=2; u1<a1.length-2; u1++) {
	m1.graphics.curveTo(a1[u1].x, a1[u1].y, a1[u1].x+((a1[u1+1].x-a1[u1].x)/2), a1[u1].y+((a1[u1+1].y-a1[u1].y)/2));
}
m1.graphics.curveTo(a1[u1].x, a1[u1].y, a1[u1+1].x, a1[u1+1].y);

// circle
var m2:MovieClip;
m2 = new MovieClip();
m2.graphics.beginFill(0xffcc00, 1);
m2.graphics.lineStyle(1, 0xffcc00, 1);
m2.graphics.drawCircle(0, 0, 10);

// tween circle along bezier
m2.x=a1[0].x, m2.y=a1[0].y;
var t1:TweenMax = TweenMax.to(m2, 5, {bezier:{autoRotate:false, timeResolution:6, type:"soft", values:a1}, ease:Linear, repeat:-1});

// add to display list
addChild(m1), addChild(m2);

This works perfect for all points except the first Segment. The circle moves above the ploted line. 

 

I don't understand what I'm doing wrong. The first one is quite simple it uses the first anchor and control point. I just have to calculate the second anchor (which is used as anchor for the next point, too).

 

What am I doing wrong? Thanks in advance.

Kind Regards,

Uli

Link to comment
Share on other sites

Unfortunately this is a bit beyond what we normally provide here for free support. I wish we had the time to dig into issues like this an analyze our customers' custom code to troubleshoot it, but with the success of GSAP and all the features we're working on, we just don't have the time. Feel free to analyze our source code to see what the "soft" bezier does and adjust your code accordingly. 

  • Like 1
Link to comment
Share on other sites

Hi,

at BezierPlugin.as I did deactivate the following lines and it works as it should:

/** @private parses the bezier data passed into the tween and organizes it into the appropriate format with an array for each property. **/
public static function _parseBezierData(values:Array, type:String, prepend:Object=null):Object {
	type = type || "soft";
	var obj:Object = {},
		inc:int = (type === "cubic") ? 3 : 2,
		soft:Boolean = (type === "soft"),
		a:Number, b:Number, c:Number, d:Number, cur:Array, props:Array, i:int, j:int, l:int, p:String, cnt:int, tmp:Object;
//	if (soft && prepend) {
//		values = [prepend].concat(values);
//	}

Unfortunatelly I have no idea what these lines are for.

Kind regards,

Uli

Link to comment
Share on other sites

Hi,

after double checking the code I did the following mod:

/** @private **/
override public function _onInitTween(target:Object, value:*, tween:TweenLite):Boolean {
...
//k	this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate || "x,y,z", prepend) : _parseBezierData(values, vars.type, first);
/*k*/	this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate || "x,y,z", prepend) : _parseBezierData(values, vars.type, prepend);
...


Is this mod better than the previous. Please recomment.

Thanks.

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.
×