For most of the previous demos, we have not specifically applied any particular material to the 3D objects. When no material is specified, Away3D will apply the WireColorMaterial material, which shades the 3D object with a solid color (this color is randomly selected at runtime unless a specific color is supplied) and draws the outline of the 3D objects triangle faces.

Here we will specifically create a new instance of the WireColorMaterial class and apply it to the 3D object. The color of the material has been specified by a String representing the color's name.

    protected function applyWireColorMaterial():void
    {

The initSphere() function is called to add a sphere primitive to the scene.

      initSphere();

The name of the material is assigned to the TextField text property, which will display the material name on the screen.

      materialText.text = "WireColorMaterial";

The material itself is then created and assigned to the local newMaterial variable. Here we have defined the solid color to be dodgerblue (using a String to define the color), while the color of the wireframe will be white (defined by the int 0xFFFFFF) with a width of two pixels.

      var newMaterial:WireColorMaterial = 
        new WireColorMaterial("dodgerblue", 
        {
          wirecolor: 0xFFFFFF,
          width: 2
        }
      );

The new material is then assigned to the primitive via the Mesh material property.

      currentPrimitive.material = newMaterial;
    }

The following table lists the parameters accepted by the WireColorMaterial constructor. Those in bold are passed directly to the constructor, while the remaining parameters are passed in via an init object.

The WireColorMaterial class extends the WireframeMaterial class, which means the init object parameters listed for the WireframeMaterial class also apply to the WireColorMaterial class.

The WireframeMaterial only draws the outline of the triangle faces that make up the 3D object. In this example, the wireframe color has been specified using an int. This int value is equivalent to the dodgerblue color used in the applyWireColorMaterial() function.

    protected function applyWireframeMaterial():void
    {
      initSphere();
      materialText.text = "WireframeMaterial";
      var newMaterial:WireframeMaterial = 
        new WireframeMaterial(0x1E90FF, 
        {
          width: 2
        }
      );
      currentPrimitive.material = newMaterial;
    }

The ColorMaterial applies a solid color to the surface of a 3D object. This example shows the color being supplied as the string version of the dodgerblue hexadecimal representation.

    protected function applyColorMaterial():void
    {
      initSphere();
      materialText.text = "ColorMaterial";
      var newMaterial:ColorMaterial = 
        new ColorMaterial("1E90FF");

      currentPrimitive.material = newMaterial;
    }

The ColorMaterial class extends the WireColorMaterial class, which means the init object parameters listed for the WireColorMaterial class also apply to the ColorMaterial class.

If the debug init object parameter is set to true, an instance of the ColorMaterial class will be drawn just like the WireColorMaterial class.

The BitmapMaterial class applies a bitmap texture to the surface of a 3D object. In this example, the bitmap is created from the embedded image contained in the EarthDiffuse class.

    protected function applyBitmapMaterial():void
    {
      initSphere();
      materialText.text = "BitmapMaterial";

Here we use the static bitmap() function from the Cast class to cast the EarthDiffuse class into a BitmapData object as required by the BitmapMaterial constructor.

      var newMaterial:BitmapMaterial = 
        new BitmapMaterial(Cast.bitmap(EarthDiffuse));
      currentPrimitive.material = newMaterial;
    }

var newMaterial:BitmapMaterial = new BitmapMaterial(new EarthDiffuse().bitmapData);

A bitmap material is usually applied to the surface of a 3D object based on its UV coordinates. The TransformBitmapMaterial material has a number of properties that allow its appearance to be scaled, offset, and rotated within the UV coordinates space.

Here we have used the rotation init object parameter to rotate the material by 45 degrees. This rotation shows up quite clearly on the cube, thanks to the checkerboard texture.

When transforming the material you will most likely want to set the repeat init object parameter to true. This ensures that the texture is repeated across the surface of the 3D object. If repeat is set to false (which it is, by default), the texture will be transformed and applied once, with the edge of the transformed texture then stretched across any remaining surface area. The screenshot on the left shows the result, if repeat is set to true. The screenshot on the right shows the result if repeat is set to false.

    protected function applyTransformBitmapMaterial():void
    {
      initCube();
      materialText.text = "TransformBitmapMaterial";
      var newMaterial:TransformBitmapMaterial = 
        new TransformBitmapMaterial(Cast.bitmap(Checkerboard),
        {
          repeat: true,
          rotation: 45
        }
          );

      currentPrimitive.material = newMaterial;
    }

The TransformBitmapMaterial class extends the BitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the BitmapMaterial class are also valid for the TransformBitmapMaterial class.

The MovieMaterial displays the output of a Sprite object, which can be animated. The sprite usually originates from another SWF file, which in this case we have embedded and referenced via the Bear class. A new instance of the Bear class is then passed to the MovieMaterial constructor.

    protected function applyMovieMaterial():void
    {
      initCube();
      materialText.text = "MovieMaterial";
      var newMaterial:MovieMaterial = 
      new MovieMaterial(new Bear());
      currentPrimitive.material = newMaterial;
    }

The MovieMaterial class extends the TransformBitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the TransformBitmapMaterial are also valid for the MovieMaterial.

The AnimatedBitmapMaterial class displays the frames from a MovieClip object. In order to increase performance, it will first render each frame of the supplied MovieClip into a bitmap. These bitmaps are stored in a cache, which increases playback performance at the cost of using additional memory.

Because of the memory overhead resulting from this cache, the AnimatedBitmapMaterial cannot be used to display movie clips longer than two seconds. If you pass a movie clip longer than two seconds an exception will be thrown.

The MovieClip object, passed to the AnimatedBitmapMaterial constructor, usually originates from another SWF file. This source SWF file needs to be implemented in the ActionScript Virtual Machine 2 (AVM2) format, which is the format used by Flash Player 9 and above. This is an important point, because a large number of video conversion tools will output AVM1 SWF files.

If you try to use an AVM1 SWF file with the AnimatedBitmapMaterial class, an exception similar to the following will be thrown:

TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::AVM1Movie@51e8e51 to flash.display.MovieClip.

    protected function applyAnimatedBitmapMaterial():void
    {
      initCube();
      materialText.text = "AnimatedBitmapMaterial";
      var newMaterial:AnimatedBitmapMaterial = 
        new AnimatedBitmapMaterial(new Butterfly());
      currentPrimitive.material = newMaterial;
   }

The AnimatedBitmapMaterial class extends the TransformBitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the TransformBitmapMaterial are also valid for the AnimatedBitmapMaterial.

By setting the interactive parameter to true, a MovieMaterial object can pass mouse events to the Sprite object it is displaying. This allows you to interact with the material as if it were added directly to the Flash stage while it is wrapped around a 3D object.

    protected function applyInteractiveMovieMaterial():void
    {
      initCube();
      materialText.text = "MovieMaterial - Interactive";
      var newMaterial:MovieMaterial = 
        new MovieMaterial(new InteractiveTexture(),
        {
          interactive: true,
          smooth: true
        }
      );
      currentPrimitive.material = newMaterial;
    } 

Refer to the previous table for the MovieMaterial class for the list of constructor parameters.

The DepthBitmapMaterial is similar to the BitmapMaterial in that it applies a bitmap texture to the surface of a 3D object. In addition, the DepthBitmapMaterial will shade the surface according to its distance from the camera. This can be used to apply a fog-like effect.

    protected function applyDepthBitmapMaterial():void
    {

The effect produced by the DepthBitmapMaterial class is best demonstrated on a 3D object that is moving relative to the camera. Setting the bounce parameter to true for the initShpere() function will cause the onEnterFrame() function to bounce the sphere along the Z-axis.

      initSphere(true);
      materialText.text = "DepthBitmapMaterial";
      var newMaterial:DepthBitmapMaterial = 
        new DepthBitmapMaterial(Cast.bitmap(EarthDiffuse),
        {

Here, we define the distances from the camera over which the base bitmap texture is shaded. When the material is closer to the camera than the minZ parameter, it takes on the color defined by the minColor parameter. When it is further from the camera than the maxZ parameter, it should take on the color defined by the maxColor parameter.

          minZ: 400,
          maxZ: 500,
          maxColor: 0xFF000000
        }
      );
      currentPrimitive.material = newMaterial;
    }

DepthBitmapMaterial is a composite material, meaning it uses two or more base materials to achieve its final appearance. One of the base materials is the BitmapMaterial, and the init object supplied to the DepthBitmapMaterial is also passed along to the BitmapMaterial constructor. This means that in addition to those parameters in the following list, the init object parameters listed for the BitmapMaterial are also valid for the DepthBitmapMaterial.

The EnviroBitmapMaterial class achieves the appearance of a reflective surface by applying a second bitmap as an environment map over a base BitmapMaterial.

    protected function applyEnviroBitmapMaterial():void
    {
      initTorus();
      materialText.text = "EnviroBitmapMaterial";
      var newMaterial:EnviroBitmapMaterial = 
        new EnviroBitmapMaterial(
          Cast.bitmap(Bricks), 
          Cast.bitmap(Marble)
        );
      currentPrimitive.material = newMaterial;
    }

Like the DepthBitmapMaterial material, EnviroBitmapMaterial is a composite material that passes the init object to a contained instance of the BitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the BitmapMaterial are also valid for the DepthBitmapMaterial.

The EnviroColorMaterial is similar to EnviroBitmapMaterial, with the exception that it uses a solid color instead of a bitmap as the base texture.

    protected function applyEnviroColorMaterial():void
    {
      initTorus();
      materialText.text = "EnviroColorMaterial";
      var newMaterial:EnviroColorMaterial = 
        new EnviroColorMaterial(
          "sandybrown", 
          Cast.bitmap(Marble)
        );
      currentPrimitive.material = newMaterial;
    }

The EnviroColorMaterial class indirectly extends the ColorMaterial class, which means the init object parameters listed for the ColorMaterial class also apply to the EnviroColorMaterial class.

The WhiteShadingBitmapMaterial class uses flat shading to apply lighting over a bitmap texture. As the class name suggests, the lighting is always white in color, ignoring the color of the source light.

    protected function applyWhiteShadingBitmapMaterial():void
    {
      initSphere();
      initPointLight();
      materialText.text = "WhiteShadingBitmapMaterial";
      var newMaterial:WhiteShadingBitmapMaterial = 
        new WhiteShadingBitmapMaterial(
          Cast.bitmap(EarthDiffuse)
        );
      currentPrimitive.material = newMaterial;
    }

The WhiteShadingBitmapMaterial class extends the BitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the BitmapMaterial are also valid for the WhiteShadingBitmapMaterial.

The ShadingColorMaterial class uses flat shading to apply lighting over a solid base color.

    protected function applyShadingColorMaterial():void
    {
      initSphere();
      initPointLight();
       materialText.text = "ShadingColorMaterial";
      var newMaterial:ShadingColorMaterial = 
        new ShadingColorMaterial(
          Cast.trycolor("deepskyblue")
        );
      currentPrimitive.material = newMaterial;
    }

The ShadingColorMaterial class extends the ColorMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the ColorMaterial class are also valid for the ShadingColorMaterial class.

The PhongBitmapMaterial uses phong shading to apply lighting over a TransformBitmapMaterial base material.

    protected function applyPhongBitmapMaterial():void
    {
      initSphere();
      initDirectionalLight();
      materialText.text = "PhongBitmapMaterial";
      var newMaterial:PhongBitmapMaterial = 
        new PhongBitmapMaterial(Cast.bitmap(EarthDiffuse));
      currentPrimitive.material = newMaterial;
    }

PhongBitmapMaterial is a composite material that passes the init object to a contained instance of the TransformBitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the TransformBitmapMaterial are also valid for the PhongBitmapMaterial.

The PhongColorMaterial uses phong shading to apply lighting over a solid color base material.

    protected function applyPhongColorMaterial():void
    {
      initSphere();
      initDirectionalLight();
      materialText.text = "PhongColorMaterial";
      var newMaterial:PhongColorMaterial = 
      new PhongColorMaterial("deepskyblue");
      currentPrimitive.material = newMaterial;
    }

The PhongMovieMaterial uses phong shading to apply lighting over an animated MovieMaterial base material.

    protected function applyPhongMovieMaterial():void
    {
      initSphere();
      initDirectionalLight();
      materialText.text = "PhongMovieMaterial";
      var newMaterial:PhongMovieMaterial = 
        new PhongMovieMaterial(new Bear());
      currentPrimitive.material = newMaterial;
    }

PhongMovieMaterial is a composite material that passes the init object to a contained instance of the MovieMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the PhongMovieMaterial are also valid for the MovieMaterial.

The Dot3BitmapMaterial uses normal mapping to add depth to a 3D object.

    protected function applyDot3BitmapMaterial():void
    {
      initSphere();
      initDirectionalLight();
      materialText.text = "Dot3BitmapMaterial";
      var newMaterial:Dot3BitmapMaterial = 
        new Dot3BitmapMaterial(
          Cast.bitmap(EarthDiffuse), 
          Cast.bitmap(EarthNormal)
        );
      currentPrimitive.material = newMaterial;
    }

Dot3BitmapMaterial is a composite material that passes the init object to a contained instance of the BitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the BitmapMaterial are also valid for the Dot3BitmapMaterial.

The Dot3BitmapMaterialF10 class is a Pixel Bender version of the Dot3BitmapMaterial class.

    protected function applyDot3BitmapMaterialF10():void
    {
      initSphere();
      initDirectionalLight();
      materialText.text = "Dot3BitmapMaterialF10";
      var newMaterial:Dot3BitmapMaterialF10 = 
        new Dot3BitmapMaterialF10(
          Cast.bitmap(EarthDiffuse), 
          Cast.bitmap(EarthNormal)
        );
      currentPrimitive.material = newMaterial;
    }

The Dot3BitmapMaterialF10 class extends the BitmapMaterial class, which means the init object parameters listed for the BitmapMaterial class also apply to the Dot3BitmapMaterialF10 class.

The PhongPBMaterial class uses phong shading and normal mapping to add depth and illuminate a 3D object. In addition, it uses a specular map to define the strength of the reflected light, with brighter areas reflecting more light than darker areas.

In the following image, which is embedded in the application as the class EarthSpecular, the oceans are shown in white, meaning that light will be reflected off those areas. The land masses are shown in black, which prevents light from being reflected off those areas.

    protected function applyPhongPBMaterial():void
    {
      initSphere();
      initPointLight();
      materialText.text = "PhongPBMaterial";
      var newMaterial:PhongPBMaterial = new PhongPBMaterial(
        Cast.bitmap(EarthDiffuse), 
        Cast.bitmap(EarthNormal), 
        currentPrimitive, 
        Cast.bitmap(EarthSpecular));
      currentPrimitive.material = newMaterial;
    }

The PhongPBMaterial class indirectly extends the TransformBitmapMaterial class, which means the init object parameters listed for the TransformBitmapMaterial class also apply to the PhongPBMaterial class.

The PhongMultiPassMaterial class is like the PhongPBMaterial class, except that it can be illuminated from multiple light sources.

    protected function applyPhongMultiPassMaterial():void
    {
      initSphere();
      initPointLight();
      materialText.text = "PhongMultiPassMaterial";
      var newMaterial:PhongMultiPassMaterial =
        new PhongMultiPassMaterial(
          Cast.bitmap(EarthDiffuse), 
          Cast.bitmap(EarthNormal), 
          currentPrimitive, 
          Cast.bitmap(EarthSpecular)
        );
      currentPrimitive.material = newMaterial;
    }

The PhongMultiPassMaterial class indirectly extends the TransformBitmapMaterial class, which means the init object parameters listed for the TransformBitmapMaterial class also apply to the PhongMultiPassMaterial class.

The Fresnel effect refers to the phenomenon where the amount of reflectance seen on a surface depends on the viewing angle. The most common example of this is seen on the surface of a body of water. If you look down directly at a pool of water you will be able to see down through the water without much reflected light. But if you look at the water's surface from an angle you will see much more reflected light.

The FresnelPBMaterial class replicates this effect by reflecting a sphere map that represents the surrounding environment by a varying degree according to the viewing angle of the surface.

    protected function applyFresnelPBMaterial():void
    {
      initPlane();
      materialText.text = "FresnelPBMaterial"; 

The reflected image comes from a sphere map, which is a texture that displays the surroundings of an object as if it were reflected off the surface of a sphere. This texture has been embedded as the SphereMap class.

      var newMaterial:FresnelPBMaterial = new FresnelPBMaterial(
        Cast.bitmap(Water), 
        Cast.bitmap(WaterNormal), 
        Cast.bitmap(SphereMap), 
        currentPrimitive,
          {
            smooth: true
          }
      );
      currentPrimitive.material = newMaterial;
    }

You can see how the Fresnel reflection works in the following images. In the image on the left, the flat areas reflect the base blue water material. When looking at the surface from a more side on angle, the orange environment material is now reflected.

The FresnelPBMaterial class indirectly extends the TransformBitmapMaterial class, which means that the init object parameters listed for the TransformBitmapMaterial class also apply to the FresnelPBMaterial class.

The CubicEnvMapPBMaterial uses environment mapping to add the reflection of a cube of textures to a base-normal mapped texture.

    protected function applyCubicEnvMapPBMaterial():void
    {
      initSphere();
      materialText.text = "CubicEnvMapPBMaterial"; 

The reflections shown by the CubicEnvMapPBMaterial class come from six textures that form a cube that appears to surround the 3D object. These six textures are placed into the sky Array.

      var sky:Array = new Array();
      sky[CubeFaces.LEFT] = Cast.bitmap(Skyleft);
      sky[CubeFaces.FRONT] = Cast.bitmap(Skyfront);
      sky[CubeFaces.RIGHT] = Cast.bitmap(Skyright);
      sky[CubeFaces.BACK] = Cast.bitmap(Skyback);
      sky[CubeFaces.TOP] = Cast.bitmap(Skyup);
      sky[CubeFaces.BOTTOM] = Cast.bitmap(Skydown);

      var newMaterial:CubicEnvMapPBMaterial =
      new CubicEnvMapPBMaterial(
          Cast.bitmap(EarthDiffuse),
          Cast.bitmap(EarthNormal),
          sky,
          currentPrimitive,
            {
              envMapAlpha: 0.5
            }
          );

      currentPrimitive.material = newMaterial;
    }

The CubicEnvMapPBMaterial class indirectly extends the TransformBitmapMaterial class, which means the init object parameters listed for the TransformBitmapMaterial class also apply to the CubicEnvMapPBMaterial class.