In this tutorial, we will understand a very important concept in Sandy (which is a concept that all software that render objects have): Materials/Appearance (sometimes, you will find these concepts synonymous to skin).

In Sandy, if you don’t declare any “appearance” of the object you are building, it will be rendered as a simple wire frame skeleton, and this is what we have used until now. But now, we want to give some color to our simple box.

Version 3.0 of Sandy implements (at the present) 9 type of Materials: from simple color material to a more sophisticated movie material. We will try to explain the simplest one first to let the user understand how it works, and maybe prepare some more sophisticated tutorials later on.

Even if the code of this tutorial is identical to the one used for the “cube” tutorial, I recommend to use a different class named: Example002 in order to organize all our works, better. This means that, on CS3, we need to create two files (or just copy the previous ones and rename them) : Example002.fla and Example002.as.

example002.rar

Be aware of these few little changes:

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

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 sandy.core.Scene3D;
   import sandy.core.data.*;
   import sandy.core.scenegraph.*;
   import sandy.materials.*;
   import sandy.materials.attributes.*;
   import sandy.primitive.*;
 
   public class Example002 extends Sprite {
      private var scene:Scene3D;
      private var camera:Camera3D;
 
      public function Example002() { 
         camera = new Camera3D( 300, 300 );
         camera.z = -400;
 
         var root:Group = createScene();
 
         scene = new Scene3D( "scene", this, camera, root );
 
         addEventListener( Event.ENTER_FRAME, enterFrameHandler );
      }
 
      private function createScene():Group {
         var g:Group = new Group();
 
         var box = new Box( "box",100,100,100);
 
         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 );
 
         box.appearance = app;
 
         box.rotateX = 30;
         box.rotateY = 30;
 
         g.addChild( box );
 
         return g;
      }
 
      private function enterFrameHandler( event : Event ) : void {
         scene.render();
      }
   }
}

In this section, we will focus on new three variables and set up two new properties to the cube.

• First, we have to declare a variable called materialAttr.

var materialAttr:MaterialAttributes = new MaterialAttributes( 
               new LineAttributes( 0.5, 0x2111BB, 0.4 ),
               new LightAttributes( true, 0.1)
            )

The constructor of this class takes a variable number of parameters. In our case, we have used two. We must remember that these attributes must implement the interface IAttributes. In the Sandy library, there are already 3 classes that implement this interface, and in this example we have used two different ones:

• LineAttributes : The three parameters of the LineAttribues refer to the thickness, color and the transparency of the lines used to draw our box.

• LightAttributes : The two parameters of the LightArributes refer to the possibility to use the full light range and the level of the light (it’s more difficult to explain than to play with it)

• Now that we have defined the attribute of the material, we must specify on which kind of material we want to apply this attribute.

var material:Material = new ColorMaterial( 0xFFCC33, 1, materialAttr );

In our case, we will apply our attribute to a ColorMaterial, which is the easiest Material to use. The ColorMaterial takes three parameters: the color of the faces, the transparency of the color and the attribute of the material we have just defined.

• After this, we tell to the rendering engine to use the “light”.

material.lightingEnable = true;

This means that the color of the faces will be rendered with shading; front faces will be lighter and back faces will be darker.

• Next we define a variable app with the datatype Appearance. The Appearance constructor takes as a parameter the material we have just created.

var app:Appearance = new Appearance( material );

We need to do this, since we will set the appearance to the created object.

Well, we are done! Let’s see the result.

Well, that's all for this second basic example. Hope you are getting excited, since on the next tutorial we will add more features.