In this tutorial, we will learn how to make the object move around.

In the previous tutorial, we saw how to move the camera around, giving the effect that the objects where moving around. But they were actually all standing in their spot. We now want to move them!

You can move an object on screen, by either moving a single object or moving a group containing one or more objects. In order to move a single object, once you have a reference to it, you can rotate it around the three reference axes using its rotateX, rotateY, and rotateZ properties. Use the pan, roll, and tilt properties to rotate the object around its local axes. If you want to move a group of objects, you need to introduce a new class, named TransformGroup. Don’t get scared. It’s just a group that implements the interface ATransformable, so we can move it as it would be a single object.

For this tutorial, we are going to draw two objects. And we will see the difference between moving a single object and the entire group.

The Document class must be changed to Example004.as The name of the class written inside the .as file and the name of the constructor now is: Example004

example004.rar

In this section, we report the AS code as a reference, and it will be explained in the next paragraph.

package {
   import flash.display.Sprite; 
   import flash.events.*;
   import flash.ui.*;
   import sandy.core.Scene3D;
   import sandy.core.data.*;
   import sandy.core.scenegraph.*;
   import sandy.materials.*;
   import sandy.materials.attributes.*;
   import sandy.primitive.*;
 
   public class Example004 extends Sprite {
      private var scene:Scene3D;
      private var camera:Camera3D;
      private var tg:TransformGroup;
      private var myCone:Cone;
      private var myHedra:Hedra;
 
      public function Example004() { 
         camera = new Camera3D( 300, 300 );
         camera.x = 100;
         camera.y = 100;
         camera.z = -400;
         camera.lookAt(0,0,0);
 
         var root:Group = createScene();
 
         scene = new Scene3D( "scene", this, camera, root );
 
         addEventListener( Event.ENTER_FRAME, enterFrameHandler );
         stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
      }
 
      private function createScene():Group {
         var g:Group = new Group();
 
         var myXLine:Line3D = new Line3D( "x-coord", new Vector(-50, 0, 0), new Vector( 50, 0, 0 ));
         var myYLine:Line3D = new Line3D( "y-coord", new Vector(0, -50, 0), new Vector( 0, 50, 0 ));
         var myZLine:Line3D = new Line3D( "z-coord", new Vector(0, 0, -50), new Vector( 0, 0, 50 ));
 
         tg = new TransformGroup('myGroup');
 
         myCone = new Cone("theObj1",50, 100);
         myHedra = new Hedra( "theObj2", 80, 60, 60 );
 
         myCone.x = -160;
         myCone.z = 150;
         myHedra.x = 90;
 
         var materialAttr:MaterialAttributes = new MaterialAttributes( 
                              new LineAttributes( 0.5, 0x2111BB, 0.4 ),
                              new LightAttributes( true, 0.1)
                        );
 
         var material:Material = new ColorMaterial( 0xFFCC33, 1, materialAttr );
         material.lightingEnable = true;
         var app:Appearance = new Appearance( material );
 
         myCone.appearance = app;
         myHedra.appearance = app;
 
         tg.addChild(myCone);
         tg.addChild(myHedra);
 
         g.addChild(tg);
         g.addChild(myXLine);
         g.addChild(myYLine);
         g.addChild(myZLine);
 
         return g;
      }
 
      private function enterFrameHandler( event : Event ) : void {
         myHedra.pan +=4;
         myCone.pan +=4;
         scene.render();
      }
 
      private function keyPressed(event:KeyboardEvent):void {
         switch(event.keyCode) {
            case Keyboard.UP:
               tg.y +=2;
               break;
            case Keyboard.DOWN:
               tg.y -=2;
               break;
            case Keyboard.RIGHT:
               tg.roll +=2;
               break;
            case Keyboard.LEFT:
               tg.roll -=2;
               break;
         }
      }
   }
}

Let’s see what we did in the code…

• First, we must define three private variables:

private var tg:TransformGroup;
private var myCone:Cone;
private var myHedra:Hedra;

This allows us to refer to these variables from anywhere in this class. Maybe it is not the best approach, but it’s easy, fast, and helps me to explain the code better.

• Next, inside the createScene() method, we have instantiated the TransformGroup class.

tg = new TransformGroup('myGroup');

This TransformGroup will hold our two new elements: a Cone and a Hedra.

• We, then, create the two new objects and spread them apart, so, they will not be positioned one on top of the other.

myCone = new Cone("theObj1",50, 100);
myHedra = new Hedra( "theObj2", 80, 60, 60 );
 
myCone.x = -160;
myCone.z = 150;
myHedra.x = 90;

• Always remember to set the appearance property of each object you have created.

myCone.appearance = app;
myHedra.appearance = app;

• We, then, add these two objects to the transform group, so we have a reference to a “Node” that we can move around as we want.

tg.addChild(myCone);
tg.addChild(myHedra);

• Last but not least we add all our objects to the main group.

g.addChild(tg);
g.addChild(myXLine);
g.addChild(myYLine);
g.addChild(myZLine);

Remember, we need to add: the TransformGroup we just created and the three lines. We do not add the two other objects since we have added them to the TransformGroup.

Let’s see what we do in the two event handler function

• In the enterFrameHandler function, I have decided to show how you can access the single objects, directly. So we can rotate each single object, individually.

myHedra.pan +=4;
myCone.pan +=4;
scene.render();

• In the keyPressed function, I want to show how to access to the entire Group. So you will see the movement of both of the objects together.

switch(event.keyCode) {
   case Keyboard.UP:
      tg.y +=2;
      break;
   case Keyboard.DOWN:
      tg.y -=2;
      break;
   case Keyboard.RIGHT:
      tg.roll +=2;
      break;
   case Keyboard.LEFT:
      tg.roll -=2;
      break;
}

And now, let’s see the result together…

For this Flash, you have the UP, DOWN, RIGHT and LEFT key to play with it. Notice that the three axes do not move, since we are not moving the camera. And the axes are not inside the transformGroup.

Now, you should be able to combine the notions learned in this tutorial and in the previous one, in order to move object and in order to move around fixed objects (like wall for examples).