Away3D PathAnimator Tutorial

Tutorials

pathanimator

This tutorial is an introduction to the PathAnimator classes. Since some features are still under development, this tutorial will introduce the basic way to animate 3d objects using paths. The Away3D 2.2 library or higher is required for this tutorial and we assume you already familiar with Away3D.

The way it works
The PathAnimator class is an abstract class working together with the Path class. A Path instance holds path information as a series of CurveSegment objects. Using this system allows you to natively animate one or more 3d objects along a path definition. In this way complex motions can be created at low cost to cpu consumption and development time.

A PathAnimator instance will automatically update the position and rotation (optional) of the object you assign it based on a series of defined numerical values. No matter how many segments the Path definition holds, 0 will always point to the start of the path data, 1 will refer to the end.

A native tweener class has been added to Away3D so that basic tweens are possible along a path. The native tweener is NOT there to replace your favourite tweener. Only basic functionality is catered for: linear, standard ease in and standard ease out. If you require more complex tweens, there are plenty of advanced tweening engines to choose from that can be used with the PathAnimator class. The internal tweener is applied by default and is driven by a dedicated handler.

Events dispatched from the PathAnimator class include: cycle, range and segments (explained later in this article). Note that altering the path definition will update the animation as well, making it suitable for custom motion editors or runtime updates.

Options available to the PathAnimator class include:

  • Camera or 3d object movement along a path.
  • Camera or 3d object movement along a path while targeting an object.
  • Camera or 3d object movement along a path while aligned to direction of motion.
  • Twisted path support.
  • Object positioning along a path.
  • Can be combined with any other Path enabled class.

How to implementWatch Full Movie Online Streaming Online and Download

import away3d.animators.PathAnimator;

We need to define a Path object as well

import away3d.animators.data.Path;

And we need an object. in this case we will use a native primitive, but it can be any object, even an object of type ‘Object’ will do as long as the property x,y,z, and optional rotationX, rotationY, rotationZ are accessible.

Import all other classes required for materials, view, scene etc…

Declare an instance of the PathAnimator class. If we want to update the properties of the Path object while the animation is playing we will need to declare it as a variable. The same applies to the object we will animate.

private var pathanimator:PathAnimator;
private var cube:Cube;
code [...]

First we need to define a Path object. In this case a U shape with some variations along the y axis. The demo shown above displays a much more complicated path, but we will keep it simple for the purposes of this tutorial.

var aPath:Array = [
new Number3D(-1000, -1000, -2000),
new Number3D(-1000, 0, 0),
new Number3D(1000, 0, 0),
new Number3D(1000, 1000, -2000),
];
var p:Path = new Path(aPath);

Now we need to declare an instance of the object we want to animate. An optional “this” is added here just to remind us it is a property of our project class. We use a Cube here to be make the alignment obvious.

var mat:IMaterial = new BitmapMaterial(new BitmapData(64,64, false, 0xFF0000));
this.cube = new Cube({material:mat, width:200, height:80, depth:100});
view.addChild(this.cube);

The properties
Now that we have our path information and our object to be animated, we can build our PathAnimator instance. The class has the following properties available:

  • lookat: a Boolean, defines if the object or camera will look at something while moving.
  • aligntopath: a Boolean, defines if the object or camera will be aligned to the path. Note that you cannot have lookat and aligntopath set to true in same PathAnimator. In this case default aligntopath will be used.
  • targetobject: If you have the lookat set to true, you can pass an object here to be used as the target. the object will rotate to point at that target position even if the target is moving.
  • offset: a Number3D, defines an offset to the object position along the path.
  • rotations: an array of Number3Ds, defines twist information along the axis of the path.

If you are using the internal tweener, further properties are available such as:

  • duration: a Number, defines the duration of the entire animation in milliseconds.
  • fps: an int, defines the framerate of the animation.
  • easein: a Boolean, defines if the tween uses an ease in.
  • easeout: a Boolean, defines if the tween uses an ease out.

All these properties are set automatically to default values if they are not passed in the init object. They can also be set using getters/settersl once the class in instantiated.

For demo purposes, we declare here a full init object.

var init:Object = {	duration:5000,
lookat:false,
aligntopath:true,
targetobject:null,
offset:new Number3D(0,100,0),
rotations:null,
fps:24,
easein:false ,
easeout:false,
};
this.pathanimator = new PathAnimator(path, this.sphere, init);

Now we are almost ready to animate. The PathAnimator class has been given it’s path, it’s object, and all it’s properties are set. To set it in motion, lets first construct a little test and place our object half way along the path. we do this just before the render command. Since our target is not a camera, we also tell the camera to look at the object.

this.pathanimator.update(0.5);
view.camera.lookAt(this.cube.position);
view.render();

Now our cube is placed half way along the path. But its not very obvious, because we cannot see the path curve. Adding a time variable to our code will provide motion, going from 0 to 1 in small increments.

var time:Number = 0;

Before our update call, we update the time variable and make sure that it stays lower or equal to 1.

time = (time +0.001>1)? 0 : time+0.001;
this.pathanimator.update(time);
view.camera.lookAt(this.cube.position);
view.render();

Now our animation becomes obvious. To increase the speed just use larger increments for the time variable, to decrease the speed use smaller increments. Or you can couple the time variable to an external tweener class to provide more control.

Lets assume you want to use the native tweener. Instead of using the update() method on the PathAnimator instance, use the animateOnPath() method. The tweener automatically considers a tween starting at 0 and ending at 1. If you want to start the tween from an intermediate point, you can pass the value as an optional argument in the animateOnPath() method. For example, tweening from 0.5 to 1 would require a single animateOnPath(.5) method call. If you want to start a tween from the current position of the PathAnimator, the property “time” can be used from the PathAnimator instance.

Once an animateOnPath(from) is defined, an animateOnPath() call in the render loop takes care of the rest of the animation. In cases where we want to change the tween settings or jump to another point in the animation, we can use the clearTime() method to reset tween time parameters.

Runtime update
While a PathAnimator instance is running, you can change any of it’s properties on the fly such as target, aligntopath or the animating object reference. Here are a few examples.

pathanimator

Here the camera is set as the animating object, with aligntopath true. The camera follows the path. No offset here means the camera is between the rails. To give the feeling of traveling in a wagon above the rails, you can pass an offset property such as new Number3D(0,200,0);

pathanimator

Here both aligntopath and lookat are set to false. If you move your mouse you can look in front and behind with the camera. It’s like being in a moving wagon while looking around.

pathanimator

Here lookat is set to true. The target is set to the object located at 0,0,0.

pathanimator

This uses the very same code as our tutorial, except an .obj model is used in place of our cube.

Before going off to experiment with your own path animations, lets take a quick look at another other handy feature – path events.

Adding events
As explained above, the PathAnimator dispatches 3 types of events. The first is the cycle event is which is triggered when the object reaches the end of a path and returns to the start. It will be fired a minimum of one time, even if the object stops at 1.

pathanimator.addOnCycle(nextRound);
private function nextRound(e:Event):void
{
trace("here we go again");
}

The second is the range event which is triggered between 2 numbers in a path – for example 0.35 and 0.40. The event will keep triggering with every update as long as the object position is between this range. An example use would be to trigger fireworks while our object is along the second segment of our path.

pathanimator.addOnRange(updateFireworks, 0.25, 0.40);
private function updateFireworks(e:Event):void
{
myhandlerThatUpdatesThefireworks();
}

The third is the segment event which is triggered when the object enters a new segment along a path. An example use would be a change in sound output.

pathanimator.addOnChangeSegment(playRailSound);
private function playRailSound(e:Event):void
{
mysound.play(0);
}

There are more handlers available for the PathAnimator class beyond the scope of this introduction, but you can read more about them in the 2.2 and higher documentation. More tutorials will be available soon to explain how the PathAnimator can be mixed with other Path related classes. Like the examples displayed above.