Bezier tweening allows you to tween in a non-linear way. For example, you may want to tween
a MovieClip's position from the origin (0,0) 500 pixels to the right (500,0) but curve downwards
through the middle of the tween. Simply pass as many objects in the bezier Array as you'd like,
one for each "control point" (see documentation on Flash's curveTo() drawing method for more
about how control points work).
Keep in mind that you can bezier tween ANY properties, not just x/y.
Also, if you'd like to rotate the target in the direction of the bezier path,
use the
orientToBezier
special property. In order to alter a rotation property accurately,
TweenLite/Max needs 5 pieces of information:
- Position property 1 (typically
"x"
)
- Position property 2 (typically
"y"
)
- Rotational property (typically
"rotation"
)
- Number of degrees to add (optional - makes it easy to orient your MovieClip properly)
- Tolerance (default is 0.01, but increase this if the rotation seems to jitter during the tween)
The
orientToBezier
property should be an Array containing one Array for each set of these values.
For maximum flexibility, you can pass in any number of arrays inside the container array, one
for each rotational property. This can be convenient when working in 3D because you can rotate
on multiple axis. If you're doing a standard 2D x/y tween on a bezier, you can simply pass
in a Boolean value of true and TweenLite/Max will use a typical setup,
[["x", "y", "rotation", 0, 0.01]]
.
Hint: Don't forget the container Array (notice the double outer brackets)
USAGE:
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.BezierPlugin;
TweenPlugin.activate([BezierPlugin]); //activation is permanent in the SWF, so this line only needs to be run once.
TweenLite.to(mc, 3, {bezier:[{x:250, y:50}, {x:500, y:0}]}); //makes my_mc travel through 250,50 and end up at 500,0.
Copyright 2010, GreenSock. All rights reserved. This work is subject to the terms in
http://www.greensock.com/terms_of_use.html or for corporate Club GreenSock members, the software agreement that was issued with the corporate membership.
public static function parseBeziers(props:Object, through:Boolean = false):Object
Helper method for translating control points into bezier information.
Parameters
| props:Object — Object containing a property corresponding to each one you'd like bezier paths for. Each property's value should be a single Array with the numeric point values (i.e. props.x = [12,50,80] and props.y = [50,97,158] ).
|
|
| through:Boolean (default = false ) — If you want the paths drawn THROUGH the supplied control points, set this to true.
|
Returns
| Object — A new object with an Array of values for each property. The first element in the Array is the start value, the second is the control point, and the 3rd is the end value. (i.e. returnObject.x = [[12, 32, 50}, [50, 65, 80]] )
|