This tutorial shows you how to use the Animator class using the Away3D 1.9.4 library or higher.
The Animator class allows you to generate one or more series of animation sequences and add them to the internal animation system. It could be described as a runtime md2 generator - a vertex animation format.
The vertex animations are updated at a given fps (a user defined framerate per second). The object can have one or more logical sequences, and each sequence is defined by a prefix string. Keyframes (the vertex geometry for a single frame of a sequence) in a sequence are identified by the same prefix string and a number; for instance a walk sequence would be defined as prefix: "walk", each keyframe would then use the naming convention prefix+increment to give 'walk0', 'walk1', 'walk2' etc...
Once defined you are then able to change the sequences at runtime like you would do for a movieclip. (movieclip.play("timeline anchor");) The engine will play the frames within this sequence "timeline" until it reaches the last frame. In our walk sequence it would stop at frame walk2. the sequence can be looped by setting the loop property to true, and the animations can be smoothed (tweened) by setting the smooth property to true, otherwise the sequence plays as individual frames.
To make your Animator object you need at least two parameters: the base object (used as the starting mesh to be used for all subsequent vertex movements), and the vertices positions for each keyframe. For this reason it is important to pass the same amount of vertex positions for each keyframe. The order of vertex positions must remain coherent throughout each sequence. How to model in a 3D application is beyond the scope of the tutorial. It is possible to tween any two shapes as long as they both have the same amount of vertices.
How to implement
You only need to import 1 class using the 1.9.4 library from the animation package and for version 2.1 and higher you'll also need the AnimationSequence class.
import away3d.animations.Animator; //using 2.0 and higher import away3d.core.base.AnimationSequence;
This example shows 2 meshes exported as still .as files (AS3 export is native in Away3D)
Both butterflies shapes were modeled in a third party editor.

As you can see, each keyframe shows a different state.

private function generateButterfly():void
{
// the material
var mat:IMaterial = new BitmapMaterial(new butterfly_texture(), {smooth:false});
//instance of the first as3 file (you could create the same using a loader)
var but1:Butterfly1 = new Butterfly1({scaling:0.6});
//instance of the second as3 file
var but2:Butterfly2 = new Butterfly2({scaling:0.6});
// instance Animator
// first parameter, we set the object reference
// second parameter, a series of objects where we pass the geometry
// third parameter, the init object
// fourth parameter, if we want to loop.
butterfly = new Animator(but1,
[{vertices:but1.vertices, prefix:"fly1"},
{vertices:but2.vertices, prefix:"fly2"}],
{material:mat, y:0, x:0,z:0,bothsides:true},
true);
//using 1.9.4
//_butterfly.play({prefix:"fly", smooth:true, loop:true, fps:8});
//using 2.0 and higher
butterfly.play(new AnimationSequence("fly", true, true, 8));
//add object to the scene
scene.addChild(butterfly);
}
In order to update the animation on screen, place the following code in your onEnterFrame listener:
private function refreshScreen(event:Event):void
{
//move the position of the butterfly as it animates if needed
butterfly.rotationY = -10+Math.random()*20;
butterfly.moveForward(5);
// update the internal animation
scene.updateTime();
// showtime
view.render();
}
It is also possible to use the Animator class with any primitive. Here an example using the Cube primitive.

var mat:IMaterial = new BitmapMaterial(myBitmadata, {});
var cube = new Cube({width:350, height:350, depth:350});
var cube2 = new Cube({width:500, height:50, depth:250});
var cube3 = new Cube({width:150, height:450, depth:50});
var cube4 = new Cube({width:650, height:250, depth:550});
_anim = new Animator(cube,
[{vertices:cube2.vertices, prefix:"cube01"},
{vertices:cube3.vertices, prefix:"cube02"},
{vertices:cube4.vertices, prefix:"cube03"},
{vertices:cube2.vertices, prefix:"cube04"}] ,
{material:mat, y:0, x:0, z:0, bothsides:false});
scene.addChild(_anim);
//using 1.9.4
//_anim.play({prefix:"cube", smooth:true, loop:true, fps:.5});
//using 2.0 and higher
_anim.play({new AnimationSequence("cube", true, true, .5));
Adding more sequences
You can add other sequences using the following source+increment syntax - shown here for "run", "jump" and "land" sequences:
_anim = new Animator(but1,
[{vertices:source1.vertices, prefix:"run0"},
{vertices:source2.vertices, prefix:"run1"},
{vertices:source3.vertices, prefix:"run2"},
{vertices:source4.vertices, prefix:"jump0"},
{vertices:source5.vertices, prefix:"jump1"},
{vertices:source6.vertices, prefix:"land0"},
{vertices:source7.vertices, prefix:"land1"}],
{material:mat, y:0, x:0, z:0, bothsides:false},
true);
You are now able to toggle the animations at runtime using the following:
_anim.play({new AnimationSequence("run", true, true, .5));
_anim.play({new AnimationSequence("jump", true, true, .5));
_anim.play({new AnimationSequence("land" true, true, .5));
More
The examples shown above are using simple geometry. You can of course do exactly the same with much more complex models.
Like the md2 format and as3 animated format, you can also access many handlers like play, gotoAndPlay, stop etc., but you can also check which prefix is playing, the actual frame number, add listeners onCycle and onSequence - events fired by the animation engine to ease the programming as the motion complexity increases...
Another tutorial will cover these events in depth. More information can be found in the BaseMesh class documentation.


June 12th, 2008 at 7:54 pm
Could you give link to all files of project inclooding 3ds or other butterfly
June 13th, 2008 at 10:38 am
The cube example is 100% copypaste garanty. To apply on any model, load the keyframes, say a model data representing a state, load another one representing another state. and just pass the vertices list as shown above. No sources needed, since set up such class on your own would be better and would require less than 15 minutes to get it work. Just try and you will see how easy this is.
June 19th, 2008 at 2:48 am
I really like it. It took me a while to figure out exactly how to use it… I kept on calling the names like “fly1″ instead of just fly….
My question: Is it possible to set the ‘length’ between the keyframes with the code? Eg a long sequence and a short sequence? If not its no biggie as I can create intermediate keyframes to slow down the parts I need. But its really friendly to use and I really liked it. Your work Fabrice has made away3d my new engine of choice and I can’t wait to get my first few games out with it!!!
June 19th, 2008 at 4:23 pm
I presume by length you mean the duration, just decrease the fps parameter. You can as you suggest yourself, indeed add extra keyframes as well. Or both!
I’m glad you like it, it was a pain to write it
June 20th, 2008 at 3:03 am
yeah… I kind of mean that I want the time between run0 and run1 to be twice as fast as the time between run1 and run2 but this is easiest done through keyframes in the 3d program.
June 22nd, 2008 at 1:34 am
The fps can only be set for an entire AnimationSequence, not between keyframes. So indeed the way to do this is to add/delete keyframes.
March 1st, 2009 at 12:08 am
How can you load animation data from a 3DS file?
March 1st, 2009 at 12:30 am
No this class supports only meshes. If you want animate meshes and use 3ds format, if you have an animation in your app, move the bones, and export the steps as a single mesh. Then assemble them using the Animator class. To spare data, you can first load them all into away, export as AS3 using the AS3Exporter. Then import this class, and pass the meshes one by one to the Animator class. You can access by doing classOutput.meshes[index].
Ik’s are now partiallly implemented, we hope have them fully in few weeks.
April 5th, 2009 at 1:17 pm
Amazing work! I need some help with an error I’m getting from the AS3Exporter. When exporting a basic 3D Object such as a cube I receive Error #1069: Property yUp not found on away3d.primitives.Cube and there is no default value. I’m only trying to export a simple to animate as a test for a more complex mesh animation but can’t get past this step! I am using 2.2.3 at them moment. Any ideas or suggestions?
April 5th, 2009 at 9:41 pm
Sounds like a bug… I will look at it asap. You can try in meanwhile with other models than primitives, there will be no problems.
April 10th, 2009 at 11:56 am
Sorry! It wasn’t a bug! I was trying to generate the animation before the Cube class had loaded! Dah! Am loving the animator now! Its great how it tweens the two meshes together smoothly! very nice work.