In a number of the applications presented so far, the 3D objects in the scene have been transformed slightly each frame inside the onEnterFrame() function. Another common method for modifying the properties of an object over time, including those properties that define the transformation of 3D objects, is called tweening. There are a number of free libraries that can perform tweening operations, one of which is the GreenSock TweenLite library. TweenLite can be downloaded from http://www.greensock.com/tweenlite/.

In order to use the TweenLite library it has to be added to the Source path in Flex/Flash Builder and Flash CS4, or the Project Classpaths in FlashDevelop, just as we did with the Away3D library in Chapter 1, Building Your First Away3D Application.

Tweening libraries have a lot of functionality (and too much to cover in this book), but implementing a simple tweening operation is fairly straightforward. To demonstrate how TweenLite can be used with a 3D object we will create an application called TweeningDemo.

package
{
  import flash.geom.Vector3D;
  import away3d.primitives.Sphere;

The TweenLite class is imported to make it available in the TweeningDemo class.

  import com.greensock.TweenLite;
  
  public class TweeningExample extends Away3DTemplate
  {
    protected var sphere:Sphere;
    
    public function TweeningExample()
    {
      super();
    }
    
    protected override function initScene():void
    {
      super.initScene();

The camera is positioned 2,000 units up along the positive end of the Y axis, and 2,000 units down the negative end of the Z axis. We then call the lookAt() function to orient the camera so it is looking at the origin of the scene. Positioning and orienting the camera in this allows us to view the X/Z plane from above at a slight angle. This is perfect for viewing the sphere, which will be moving across the X/Z plane.

      camera.position = new Vector3D(0, 2000, -2000);
      camera.lookAt(new Vector3D(0, 0, 0));

A sphere primitive is created and added to the scene. Because we did not specify a position in the constructor, the sphere will initially be positioned at the scenes origin.

      
      sphere = new Sphere();
      scene.addChild(sphere);

The tweenToRandomPosition() function is then called to initialize the first tweening operation.

      
      tweenToRandomPosition();
    }
    
    protected function tweenToRandomPosition():void
    {

In the tweenToRandomPosition() function we make a call to the static to() function defined by the TweenLite class. The to() function is used to progressively modify the properties of an object over time.

The first parameter, target, is the object that will be modified by the tweening operation. In this case that object is our sphere.

The second parameter, duration, defines how long the tweening operation will take in seconds. By supplying a value of 1 here the properties of the sphere will be progressively modified from their current values to new values that we define over a period of one second.

      TweenLite.to(sphere, 1, 
        {

The third parameter, vars, is an object that has been created with object literal notation. This is the same way that the init objects used by Away3D are created. In this object we assign the values that we want the 3D object to have once the tweening operation is complete. The properties x, z, scaleX, scaleY, scaleZ, and rotationY relate to properties that are exposed by the Sphere class. In this example, we have assigned random values to these properties.

The final property of the vars object, onComplete, is a special property that is recognized by the TweenLite class. Any function assigned to this property will be called once the tweening operation is complete. Here, we have assigned the tweenToRandomPosition() function. Since this tweening operation is created in the tweenToRandomPosition() function, this has the effect of creating an endless sequence of tweening operations. As one tweening operation is completed, the tweenToRandomPosition() function is called and a new one is started.

Sequencing a number of tweening operations using the onComplete property can create some very complex movements or scripted operations.

          x: Math.random() * 1000 - 500,
          z: Math.random() * 1000 - 500,
          scaleX: Math.random() * 1.5 + 0.5,
          scaleY: Math.random() * 1.5 + 0.5,
          scaleZ: Math.random() * 1.5 + 0.5,
          rotationY: Math.random() * 180,
          onComplete: tweenToRandomPosition
        }
      );
    }
  }
}

When this application is run, the sphere will move around the scene to random positions within -500 to 500 units along the X and Z axes. The scale of the sphere is modified to be within 0.5 to 2 times its original size, while its rotation around its local Y axis is set anywhere between 0 and 180 degrees.

One of the best things about tweening operations is that they tend to be "fire and forget". You don't have to keep a track of how much time has passed and manually modify the properties every frame, as has been done in previous applications in the onEnterFrame() function. In fact, you will notice that we have not used the onEnterFrame() function at all in this example.