**Update
This tutorial has been updated using TweenLite and the most recent papervision BasicView class.
Hi,
In this tutorial we're going to use Tweener to move a cube around. This will teach you basics of animation, and how to use Tweener (which is awesome).
The example that I've produced is this:
So, in this example our solid red cube is trying to stay inside our green wireframe cube. Every time the red cube gets itself positioned completley inside the green cube, the green cube moves.
Tweener is the package which is smoothly moving the red cube around. The Tweener package is also firing the event to move the green cube when the tween is complete.
1: To start off, you'll need Tweener. You can download it here if you don't already have it: http://code.google.com/p/tweener/
Once you've got tweener, either add the source directory containing the "caurina" folder to your project's classpaths, or add the caurina folder into your current project.
2: Import tweener - Add this line to your imports:
import caurina.transitions.Tweener;
3: Add a Tween. You can add tweens to any parameter of any object. The Tweener package will gradually change any parameter in your code to a new value over time, so only numeric values will work nicely. Anyway, you can read a load more about tweener at the google code page above.
To add a tween, we use the code
Tweener.addTween(object, {parameter1: value, parameter2: value2, time: X, transition:"transition", onComplete: functionname});
This may look a little bit confusing at first, but it's really simple. Let's show you a real example..
Tweener.addTween(cube, { x: 1000, z: 500, time: 2, 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.
Here is my source code (Uses latest version of my base class):
-
package
-
{
-
import org.papervision3d.lights.PointLight3D;
-
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 caurina.transitions.Tweener;
-
-
public class Main extends PaperBase
-
{
-
private var cube:Cube;
-
private var cube2:Cube;
-
private var mat:FlatShadeMaterial = new FlatShadeMaterial(new PointLight3D(), 0xFFFFFF, 0xFF0000);
-
private var mat2:WireframeMaterial = new WireframeMaterial(0x00FF00);
-
private var plane:Plane = new Plane(null, 2000, 2000, 10, 10);
-
-
public function Main()
-
{
-
init(600, 300);
-
}
-
-
override protected function init3d():void
-
{
-
cube = new Cube(new MaterialsList( { all: mat } ), 100, 100, 100);
-
cube.y = 0;
-
cube2 = new Cube(new MaterialsList( { all: mat2 } ), 100, 100, 100);
-
cube2.y = 0;
-
cube2.x = 1000;
-
cube2.z = 1000;
-
plane.material.lineColor = 0x777777;
-
plane.material.doubleSided = true;
-
plane.pitch(90);
-
plane.y = -50;
-
default_scene.addChild(plane);
-
default_scene.addChild(cube);
-
default_scene.addChild(cube2);
-
Tweener.addTween(cube, { x:1000, z:1000, time:2, onComplete: randomize } );
-
default_camera.x = 0;
-
default_camera.z = 1000;
-
default_camera.y = 1000;
-
}
-
-
public function randomize():void
-
{
-
var xp:Number = (Math.random() * 2000) - 1000;
-
var yp:Number = (Math.random() * 2000) - 1000;
-
Tweener.addTween(cube, { x:xp, z:yp, time:2, onComplete: randomize } );
-
cube2.x = xp;
-
cube2.z = yp;
-
}
-
-
override protected function processFrame():void
-
{
-
default_camera.lookAt(cube);
-
}
-
}
-
}
