mattsm Posted July 3, 2011 Share Posted July 3, 2011 Does anyone know how to tween a curved line? I'm trying to figure out how to get a small wave in a line. Link to comment Share on other sites More sharing options...
Carl Posted July 3, 2011 Share Posted July 3, 2011 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 Link to comment Share on other sites More sharing options...
mattsm Posted July 3, 2011 Author Share Posted July 3, 2011 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? Link to comment Share on other sites More sharing options...
mattsm Posted July 3, 2011 Author Share Posted July 3, 2011 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); } Link to comment Share on other sites More sharing options...
Carl Posted July 3, 2011 Share Posted July 3, 2011 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. Link to comment Share on other sites More sharing options...
mattsm Posted July 3, 2011 Author Share Posted July 3, 2011 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); } Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now