Navigation


RSS : Articles / Comments


Tweener: Bezier Curve Animations

10:31 PM, Posted by Jim Foley, 6 Comments

Lets say you want to use Tweener to animate a camera in your PV3D Scene from z:0 to z:1400... but you want it to animate along a path with smooth bezier curves. Piece of cake! Here is how you do it.

Example (don't freak, there's a lot more comments than there is code):
//first you will need to import your Tweener classes
//in this case, also import the CurveModifiers class
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;

//instantiate the CurveModifiers
CurveModifiers.init();

//create an Array that will hold the various bezier curve points
//the values indicate the that camera will swing from the left to the right
var curvePath:Array = new Array();
curvePath.push({x:400});
curvePath.push({x:-400});
curvePath.push({x:400});
curvePath.push({x:-400});
//you could also add in additional bezier curve point paramerts
//such as curvePath.push({x:400, y:200, z:200});

//set up a function to set the default position of the camera
//and to instantiate a tweener animation
//note that there is an additional parameter "_bezier" in the Tweener parameters
//in the "_bezier" parameter we passed in our curvePath array
function startTween():void
{
camera.z = -200;
Tweener.addTween(camera, {
x:0,
z:1400,
_bezier:curvePath,
time:12,
transition:"linear",
onComplete:startTween});
}

//lastly, call the startTween function to fire it off
//since the Tweener function has an onComplete parameter
//of startTween the animation will loop continuously
startTween();

View Example: click here
View Source: click here
Additional Info on Bezier Curves within Tweener:
Documentation / labs.zeh.com.br - Perfect Bezier Tween

6 Comments

Anonymous @ October 29, 2008 4:02 AM

Really usefull example, thank you so much.

Jim Foley @ October 29, 2008 8:41 AM

Glad it was helpful. :-)

Anonymous @ December 10, 2008 4:14 AM

I love you!!! This is exactly what I have been digging around for!

Anonymous @ February 15, 2009 7:07 AM

Thanks for your Example. It was indeed usefull like someone said befor. Good to have your Blog on the Interwebs, sir! =)

HyderAlamgir @ May 4, 2009 2:05 PM

Hey I'm using PV3D 2.0.883 For Flex. Apparently this class does not exist:

import org.papervision3d.cameras.FreeCamera3D;

Am I using the wrong version?

Anonymous @ October 23, 2009 9:03 PM

change FreeCamera3D to Camera3D on lines 8, 20, & 33.