Skip to main content
E
Eskapismus
Participant
June 6, 2013
Question

Randomly tween bezier curves

  • June 6, 2013
  • 1 reply
  • 895 views

Hi,  I'm currently trying to figure out how to animate bezier curves dynamically based on random numbers.  So I figures out how to draw the curves according to this post: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7dd9.html Now what I would like to change the position of the individual control and anchor points aftrwards with some kind of tweening animation. The purpose for this is, that I have a small puddle in my game that should get bigger over time but only within certain boundries. Here are 2 Pictures to demonstrate what I mean: http://img.xrmb2.net/images/591384.png http://img.xrmb2.net/images/263701.png  I know that I could make a very simple form tween and have the border segment just be white and above the middle segment so that it may get bigger than the border but one can't see it. Now I think this is not very elegant and I would really like to change the control and anchor points randomly so that the puddle does change in shape.  I couldn't figure out how to access the different points and how to move them with a nice animation. Does anyone know how to do that?

This topic has been closed for replies.

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
June 6, 2013

you just need to tween your control and anchor point values.

E
EskapismusAuthor
Participant
June 6, 2013

Well okay, but could you provide an example?   Let's say I had this:

var size:uint = 100;

var myObject= new Shape();

myObject.graphics.beginFill(0xFF0000);

myObject.graphics.moveTo(size / 2, 0);

myObject.graphics.curveTo(size, 0, size, size / 2);

myObject.graphics.curveTo(size, size, size / 2, size);

myObject.graphics.curveTo(0, size, 0, size / 2);

Then what would I write in the tween to, for example, move the first anchor point up and the second one to the right and the control point down?

var myTween:Tween = new Tween(????);

And thanks so far!

kglad
Community Expert
kgladCommunity Expert
Community Expert
June 6, 2013

you need to supply a starting curve and an end curve.  each curve needs two anchor points and a control point.  each point needs an x and y value.  so, you'll be tweening 6 values from their start to their end values.

and insteading of using flash tween class which can only tween on value at a time (ie, you'll need 6 tweens), use tweenlite.  tweenlite lets you, among other things, tween an array so you can use one tweenlite method to tween all 6 values.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices