Away3D 3.6: Applying Animated and Composite materials

Exclusive offer: get 50% off this eBook here
Away3D 3.6 Essentials

Away3D 3.6 Essentials — Save 50%

Take Flash to the next dimension by creating detailed, animated, and interactive 3D worlds with Away3D

$29.99    $15.00
by Matthew Casperson | March 2011 | Open Source Web Graphics & Video

In this article by Matthew Casperson, author of Away3D 3.6 Essentials we will explore Animated and Composite materials. A number of materials can be used to display animations on the surface of a 3D object. These animations are usually movies that have been encoded into a SWF file. You can also display an interactive SWF file, like a form, on the surface of a 3D object. Composite materials are used to display a number of effects like shading, bump mapping, environment mapping, and lighting. The reader will comprehend this article better by referring the previous articles on:

 

Away3D 3.6 Essentials

Away3D 3.6 Essentials

Take Flash to the next dimension by creating detailed, animated, and interactive 3D worlds with Away3D

        Read more about this book      

(For more resources on 3D, see here.)

Animated materials

As mentioned above a number of materials can be used to display animations on the surface of a 3D object. These animations are usually movies that have been encoded into a SWF file. You can also display an interactive SWF file, like a form, on the surface of a 3D object.

MovieMaterial

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;
}

Away3D 3.6: Applying Animated and Composite materials

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.

Away3D 3.6: Applying Animated and Composite materials

AnimatedBitmapMaterial

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 need to display a SWF movie in AVM1 format, use MovieMaterial class instead.

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
.

FFmapeg is a free, cross-platform tool that can be used to convert video files into AVM2 SWF files. It can be downloaded from , and precompiled Windows binaries can be downloaded from http://sourceforge.net/projects/mplayer-win32/files/FFmpeg/. The following command will convert a WMV video into a two second AVM2 SWF file with a resolution of 320 x 240 without any audio.

ffmpeg -i Butterfly.wmv -t 2 -s 320x240 -an -f avm2 Butterfly.SWF

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.

Away3D 3.6: Applying Animated and Composite materials

Interactive MovieMaterial

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;
}

Away3D 3.6: Applying Animated and Composite materials

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

Away3D 3.6 Essentials Take Flash to the next dimension by creating detailed, animated, and interactive 3D worlds with Away3D
Published: January 2011
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on 3D, see here.)

Composite materials

Composite materials combine two or more base materials to achieve their final appearance. Composite materials are used to display a number of effects like shading, bump mapping, environment mapping, and lighting.

DepthBitmapMaterial

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.

There is a bug in Away3D 3.6 that causes the DepthBitmapMaterial class to interpret the maxColor parameter incorrectly. As it stands, supplying any color other than 0 to the maxColor parameter is required for the DepthBitmapMaterial object to apply a shade of black to its underlying bitmap material as it moves further from the camera. Leaving the maxColor parameter as its default value of 0x000000 (which is the same as 0) will cause the DepthBitmapMaterial object to completely ignore the base bitmap texture and only display the black shading.
As you can see in the following example, we supply a black color with the alpha component defined. This value does not equal zero, and so it is sufficient to work around this bug.
The actual value assigned to the maxColor parameter is incorrectly consumed by one of the classes contained in the DepthBitmapMaterial class.
The fix for this is quite simple. Change line 122 in the DepthBitmapMaterial.as file (download code: ch:5) from:

_depthShader = new DepthShader({minZ:_minZ, maxZ:_
maxZ, color:_maxColor});

to:

_depthShader = new DepthShader({minZ:_minZ, maxZ:_
maxZ, shadingColor:_maxColor});

Also change line 208 of the DepthShader.as file from:

color = ini.getNumber("color", 0x000000);

to:

color = ini.getNumber("shadingColor", 0x000000);

Let us complete the function we started above:

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.

Away3D 3.6: Applying Animated and Composite materials

Away3D 3.6: Applying Animated and Composite materials

EnviroBitmapMaterial

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;
}

Away3D 3.6: Applying Animated and Composite materials

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.

Away3D 3.6: Applying Animated and Composite materials

EnviroColorMaterial

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;
}

Away3D 3.6: Applying Animated and Composite materials

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.

Away3D 3.6: Applying Animated and Composite materials


Further resources on this subject:


Away3D 3.6 Essentials Take Flash to the next dimension by creating detailed, animated, and interactive 3D worlds with Away3D
Published: January 2011
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


Matthew Casperson

Matthew Casperson has worked in IT for nearly a decade in a variety of roles including development and support, and in his spare time loves nothing more than to experiment with the latest web and multimedia technologies. Many of these experiments can be found on Matthews personal website at http://goo.gl/2Hgr.

Away3D Essentials is Matthews first book, but hopefully won't be the last!

Books From Packt


Away3D 3.6 Cookbook
Away3D 3.6 Cookbook

OGRE 3D 1.7 Beginner's Guide
OGRE 3D 1.7 Beginner's Guide

3D Graphics with XNA Game Studio 4.0
3D Graphics with XNA Game Studio 4.0

Panda3D 1.6 Game Engine Beginner's Guide
Panda3D 1.6 Game Engine Beginner's Guide

Unity 3D Game Development by Example Beginner's Guide
Unity 3D Game Development by Example Beginner's Guide

Papervision3D Essentials
Papervision3D Essentials

Blender 2.5 Materials and Textures Cookbook
Blender 2.5 Materials and Textures Cookbook

OpenSceneGraph 3.0: Beginner's Guide
OpenSceneGraph 3.0: Beginner's Guide


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software