Tween Curved Line

[mattsm]

Does anyone know how to tween a curved line? I'm trying to figure out how to get a small wave in a line.

[Carl]

do you mean have an object move along a curved path?

you can use the BezierPlugin (see plugin explorer)

 

or do you mean draw a curved line and have an object follow it?

there are no drawing tools built into the GreenSock Tweening Platform, but you can look here to see what some people have done:

viewtopic.php?f=1&t=4819&p=19462&hilit=bezierDemo#p19462

 

if you want to animate the creation of a curved line (as if it is being drawn) do some google searches for "AS3 Drawing API animation curves"

 

or visit http://www.kglad.com/ and click on snippets and then curves

[mattsm]

On your demo page I'm wanting to tween the line itself (rather than the ball). So for example, tweening one of the bezier anchors from {x:200, y:400} to {x:300, y:500}. You think I have to use a drawing API for that?

[mattsm]

I figured out how to Tween a curve just using ENTER_FRAME. Am I missing something in GreenSock that does this?

 

import flash.display.Shape;
import flash.events.Event;

var newMoon:Shape = new Shape();
var controlX:int = 30;
var controlY:int = 150;
var anchorX:int = 100;
var anchorY:int = 200;

newMoon.graphics.lineStyle(1, 0);
newMoon.graphics.moveTo(100, 100);
newMoon.graphics.curveTo(controlX, controlY, anchorX, anchorY);

addChild(newMoon);

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event):void
{
controlX++;
newMoon.graphics.clear();
newMoon.graphics.lineStyle(1, 0);
newMoon.graphics.moveTo(100, 100);
newMoon.graphics.curveTo(controlX, controlY, anchorX, anchorY);
}

[Carl]

if you were using a TweenLite/Max you could use an onUpdate callback to render your line each time the tween gets updated. this would be similar to an ENTER_FRAME event.

 

but no, GreenSock doesn't have any drawing tools.

[mattsm]

I got something working by binding the curve controls to an invisible movie clip. Then the movie clip can be tweened using the easing etc.

 

import flash.display.Shape;
import flash.events.Event;
import com.greensock.*;
import com.greensock.easing.*;
import flash.display.MovieClip;

var curve:Shape = new Shape();
addChild(curve);

var ctrl:MovieClip = new MovieClip;
ctrl.x = 0;
ctrl.y = 100;

var tl:TimelineMax = new TimelineMax();
tl.append(new TweenMax(ctrl,10,{x:300,y:30,onUpdate:drawCurve,ease:Bounce.easeOut}));

function drawCurve():void
{
curve.graphics.clear();
curve.graphics.lineStyle(4, 0);
curve.graphics.moveTo(100, 100);
curve.graphics.curveTo(ctrl.x, ctrl.y, 200, 200);
}