• Tweet
• Share
• Email

• Tweet
• Share
• Email

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.

About the Author

Fabrice Closier is a Flash Developer, and belongs to the Away3D team. He run’s also a blog where you can view more tips and tutorials about this awesome Flash 3D Engine.

Tags: 3D, Adobe, animator class, away3d, Flash, how to, Tutorial