Basic of Tween Classes

(JasperYong) #1

Couldn’t find much tutorials or samples on the tween classes except for ZachLewis’s videos, Tween Request, so I might as well share some snippets that make sense to me :smile:

Maybe I could try explains Tween & Tweener once I can get the hang of it or anyone willing, do feel free to post! :stuck_out_tongue:

VarTween: Tweens a numeric public property of an Object

varTween = new VarTween();
varTween.tween([entity], "y", 300, 3); //object, property:String, to:Number, duration, ease = null
addTween(varTween, true);

MultiVarTween: Tweens multiple numeric public properties of an Object simultaneously

mvTween = new MultiVarTween();
mvTween.tween([entity], { x:60, y:100, alpha:0.}, 3); //object, values, duration, ease = null)
addTween(mvTween, true);

ColorTween: Tweens a color’s red, green, and blue properties independently. Can also tween an alpha value

colorTween = new ColorTween();
colorTween.tween(5, 0xff0000, 0x00ff00, 1, 0.8); //duration, fromColor, toColor, fromAlpha, toAlpha, ease = null
addTween(colorTween, true);
(update) [entity].IMAGE.color = colorTween.color;

NumTween: Tweens a numeric value.

numTween = new NumTween();
numTween.tween(50, 1000, 8); //fromValue, toValue, duration, ease = null
addTween(numTween, true);
(update) trace(numTween.value);

AngleTween: Tweens from one angle to another.

angleTween = new AngleTween();
angleTween.tween(270, 0, 3); //fromAngle, toAngle, duration, ease = null
addTween(angleTween, true);
(update) [entity].IMAGE.angle = angleTween.angle;
Help with a Delay
Animation advice? [SOLVED]
(Kevin Graham) #2

Thanks so much, this will really come in handy! How would I go about using the quadratic tween? I saw it in the FP docs, but couldn’t figure out how to use it. Thanks!

LinearMotion Tween (Solved)
(Zachary Lewis) #3

I’m assuming you’re talking about the QuadMotion tween. It tweens along a quadratic Bézier curve, requiring a start point, a control point and an end point.

http://upload.wikimedia.org/wikipedia/commons/2/2d/Bezier_2_big.gif

(Kevin Graham) #4

OK great! Thanks. Are you able to post a code sample?

(Zachary Lewis) #5

It’s the same process as the tweens listed above.

// Create the tween.
var motion:QuadMotion = new QuadMotion();

// Create the points that define the quadratic curve.
var p0:Point = new Point(0,0);
var p1:Point = new Point(10, 10);
var p2:Point = new Point(20, 5);

// Setup tween using control points.
motion.setMotion(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, 1.0);

// Set the object we'd like to tween (if desired).
motion.object = thePlayer;

// Begin the tween.
addTween(motion, true);
(Kevin Graham) #6

Awesome, thanks so much! That helps a lot. :thumbsup:

(VanderJamesHum) #7

Is there a way to loop tweens? or a callback when the tween finishes? I’ve been playing around with CircularMotion, and to have it continuously repeat the tween would be very handy.

EDIT: All good. Found the callback and have it looping perfect. I just had have to remove the tween before adding it again

(Zachary Lewis) #8

You can also set the tween type to LOOPING, which will automatically restart the tween once it finishes.

(VanderJamesHum) #9

yes, simple looping! saves a lot of code. I cant believe I missed it in the documentation :blush: