question / suggestion @ Jack

[tomKnox 4 Likes (Newbie)]

Hi Jack.

 

The question

When you look up the plugin explorer, in the BezierThroughPoint part.

You successfully tween a movieclip that follows a curved line.(thanks for this!!) + draw a line between those 3 (or more points).

Would you be so kind to share that technique(i mean the drawing of that curved line through the point)?

I am aware of your wonderful motion paths... but I can't find how you draw the curve through the points (lines are ofc. no problem).

with the motionPath class (for now) I am unable to make the path a curve.

 

> there are countless examples on the web to draw a curve through 3 points, but each equation gives me a different result. So Drawing a curve ain't all that difficult.

Making the object follow the exact curve... is (for me).

 

+additional question:

How could I transform this code so its a continuous movement?

//tween all of the squares through the path once (wrapping when they reach the end)
TweenMax.to(path, 20, {progress:1,repeat:-1});

This tweens the boxes in your motionpath example over 20 seconds, i've experimented with putting the repeat on -1 with keeps doing the animation.

however. I'd love it that the time is constant. and not have a certain easing applied to it. (if its possible)

 

Same goes for the circle example:

I just can't seem to get the motion continuous (aka revolve 360° and then do it again) (ok i can make an onComplete function, but the tweening never is really continuous, .. it has a certain ease) just wondering...

var circle:CirclePath2D = new CirclePath2D(500, 500, 100);
var follower:PathFollower = circle.addFollower(myMc, circle.angleToProgress(0));
TweenLite.to(follower, 2, {progress:circle.followerTween(follower, 360, Direction.CLOCKWISE)});
addChild(circle);

 

 

 

the suggestion :

I was wondering.

Are you planning a greensock class in order to tween lineTo's / circle/arc / curveTo's? (with a few cool / handy parameters?)

Like for example in your motionPath class : where you can add a circle that represents the motion path. it would be awesome if you could tween the actual drawing of the line/curve as well. Yes I could use the update functionality to do the drawing with, i was just wondering.

 

Maybe all this is capable in greensock right now. but I just can't find it.

 

 

Any insight is wonderfully appreciated. Thanks for your time in reading this.

my best regards

[Carl 11,102 Likes (Superhero)]

hello Tom,

 

to overwrite the default ease and have continuous motion on tweens that repeat try

 

import com.greensock.easing.Linear;
TweenMax.to(path, 20, {progress:1, repeat:-1, yoyo:true, ease:Linear.easeNone});

 

that's all I can help with

 

-carl

[tomKnox 4 Likes (Newbie)]

hello Tom,

 

to overwrite the default ease and have continuous motion on tweens that repeat try

 

import com.greensock.easing.Linear;
TweenMax.to(path, 20, {progress:1, repeat:-1, yoyo:true, ease:Linear.easeNone});

 

that's all I can help with

 

-carl

Thats a huge help, lol I wasn't aware of the easeNone, thanks!!

[GreenSock 18,243 Likes (Superhero)]

Regarding the bezierThrough stuff, it's a little tricky. First of all, you can use the BezierPlugin's parseBeziers() method to translate the coordinates/point data into curveTo() Bezier data. See the ASDocs for details. Basically you break apart the data into an array for the x value and an array for the y values, feed them in there and tell it whether you want the curve to go through the points or use them as regular Bezier control points. Here's what some code would look like:

 

import flash.geom.Point;
import com.greensock.plugins.BezierPlugin;

var points:Array = [new Point(0, 0),
				new Point(100, 50),
				new Point(50, 200),
				new Point(300, 300)];

var data:Object = {x:[], y:[]};

for (var i:int = 0; i 	data.x.push(points[i].x);
data.y.push(points[i].y);
}
var curveToData:Object = BezierPlugin.parseBeziers(data, true);

this.graphics.clear();
this.graphics.lineStyle(2, 0x000000);
this.graphics.moveTo(points[0].x, points[0].y);
for (i = 0; i 	this.graphics.curveTo(curveToData.x[i][1], curveToData.y[i][1], curveToData.x[i][2], curveToData.y[i][2]);
}

This draws the complete curve, but it doesn't allow you to incrementally draw it (like a pen is drawing it over time). That's a much more complex endeavor. You could, however, tween the position of a Point object on the bezier (using bezierThrough or bezier plugin) and lineTo() each new position with an onUpdate. That doesn't give you the perfectly smooth curve, but unless the updates are far apart, most users would never notice the difference. That's the technique I use in the demo at http://www.greensock.com/roughease/.

 

I may at some point create a BezierPath2D that simplifies this stuff, but I'm swamped at the moment and have several other exciting things that must take priority.

 

Hope that helps.

[tomKnox 4 Likes (Newbie)]

Thats perfect help for my needs today Jack! thank you so much.

I honestly never thought to convert the points back as you mention. insights!! nice one.

 

I am positive your new endavors are the time worthy goodluck.

 

Thanks again for the blazing fast responds

I shall code in peace now

 

greetings

[X10 0 Likes (Newbie)]

Hi tomKnox,

This has been a really useful post. I was just wondering if you got the 'drawing' of the line working via onUpdate and if you could share it with us?

 

I'm trying to acheive the same thing, but so far I am at a loss as to what parameters I am pasring from the tween to the function in order for lineTo to incrementally draw.

 

I've got this so far, but just confused on what I should be parsing through onUpdateParams and where to use them in the function:

 

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.drawEllipse(-5,-3,10,6);
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);

function drawme():void{

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++;
}
}
drawme();

[X10 0 Likes (Newbie)]

Hi all,

I have managed to create a partial solution, but need a bit of help to get the final bit working. The line is drawn following the tweening of an elliptical point, this code on it's own works fine. However, if I place this into an animation that has moveiclips already on stage, the elliptical point shows as the uppermost object on top of everything else, but the line that is drawn is at the bottom/underneath all the objects, so you don't see it.

What am I missing here to get it to draw above some objects?

 

import com.greensock.TweenMax;
import com.greensock.plugins.BezierThroughPlugin;

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 sp:Shape =new Shape();
sp.graphics.beginFill(0xff0000);
sp.graphics.drawEllipse(-5,-3,10,6);
sp.graphics.endFill();
addChild(sp);

function drawme(ZA):void{
graphics.lineStyle(2,0xff0000);
graphics.lineTo(ZA.x,ZA.y);
}

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

[GreenSock 18,243 Likes (Superhero)]

The graphics layer of a MovieClip/Sprite/DisplayObjectContainer is always rendered as behind everything else - that's just how Flash works. To put it above other things, just create a Sprite that's on top of everything else and draw your graphics inside that Sprite.