Animation Using TweenLite at Papervision 3D Tutorials

In this tutorial we're going to use TweenLite to move a cube around. This will teach you basics of animation, and how to use TweenLite.

In this example our solid red cube is trying to stay inside our green wireframe cube. Every time the red cube gets itself positioned completely inside the green cube, the green cube moves.

TweenLite is the package which is smoothly moving the red cube around. The TweenLite package is also firing the event to move the green cube when the tween is complete.

1: To start off, you'll need TweenLite. You can download it here if you don't already have it (also included in the source download "gs" folder): http://blog.greensock.com/tweenlite/

2: Import tweener - Add this line to your imports:

PLAIN TEXT

Actionscript:

import gs.TweenLite;

3: Add a Tween. You can add tweens to any parameter of any object. The TweenLite package will gradually change any parameter in your code to a new value over time, so only numeric values will work nicely.

To add a tween, we use the code:

PLAIN TEXT

Actionscript:

//TweenLite.to(objectToAnimate, time, { property:newValue, property:newValue, ease:Quint.easeInOut, onComplete:functionToCall} );
//Your code will end up looking something like this
TweenLite.to(cube, 2, { x:xp, z:yp, ease:Quint.easeInOut, onComplete:randomize } );

The line above will add a tween. This tween will change the values "x" and "y" on the object "cube" to 1000 and 500 respectively. It will smoothly change the values over a period of 2 seconds and once the tween is complete and the cube.x is 1000 and cube.y is 500, it will trigger the "randomize" function.

Experiment with more ways to tween your objects. You can apply tweens to anything, including cameras, lights, rotations, sizes and camera zooms. Any numerical value you can think of.

PLAIN TEXT

Actionscript:

package
{
import gs.easing.Quint;
import gs.TweenLite;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
/**
* ...
* @author Charlie Schulze, charlie[at]woveninteractive[dot]com
*/
public class Main extends BasicView
{
protected var cube:Cube;
protected var cube2:Cube;
protected var mat:FlatShadeMaterial;
protected var mat2:WireframeMaterial;
protected var plane:Plane;
public function Main():void
{
super();
init();
}
protected function init():void
{
createChildren();
commitProperties();
randomize();
startRendering();
}
protected function createChildren():void
{
//Create Materials:
mat = new FlatShadeMaterial(new PointLight3D(), 0xFFFFFF, 0xFF0000);
mat2 = new WireframeMaterial(0x00FF00);
//Create 3D Objects
plane = new Plane(null, 2000, 2000, 10, 10);
cube = new Cube(new MaterialsList( { all: mat } ), 100, 100, 100);
cube2 = new Cube(new MaterialsList( { all: mat2 } ), 100, 100, 100);
//Add objects to the scene
scene.addChild(plane);
scene.addChild(cube);
scene.addChild(cube2);
}
protected function commitProperties():void
{
//Set properties of our plane
plane.material.lineColor = 0x777777;
plane.material.doubleSided = true;
plane.pitch(90);
plane.y = -50;
//Set the properties of our camera
camera.x = 0;
camera.z = 1000;
camera.y = 1000;
}
public function randomize():void
{
var xp:Number = (Math.random() * 2000) - 1000;
var yp:Number = (Math.random() * 2000) - 1000;
cube2.x = xp;
cube2.z = yp;
//When complete it calls this method again
TweenLite.to(cube, 2, { x:xp, z:yp, ease:Quint.easeInOut, onComplete:randomize } );
}
}
}