AS3IsoLib Tutorial Series - Height

PLAY THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

On aspect that can be hard to display in an isometric 3d display is the height of an object, because without perspective object in the air appear exactly the same of objects further off in the distance. A common solution to this is to display a shadow on the ground below an object that is in the air.

The as3isolib scene object has a property called styleRenderers, to which you can assign an array of ClassFactory’s. A ClassFactory is used to create a number of identical objects of a given class. Earlier versions of as3isolib included their own versions of the ClassFactory and IFactory based on the class of the same name from the Flex SDK. In later versions these are just place holders, doing nothing more than providing the minimum code required to extend the original Flex classes. For this reason we will use the Flex ClassFactory class, and not the one included with as3isolib.

Main.mxml

In the appComplete function we create the SpriteUIComponent and scene like normal.

protected function appComplete():void
{
 var spriteContainer:SpriteUIComponent = new SpriteUIComponent();
 this.addChild(spriteContainer);
 
 scene = new IsoScene();
 scene.hostContainer = spriteContainer;   

We then create a new ClassFactory, with the first parameter in the constructor being the DefaultShadowRenderer class. In this way the ClassFactory can be used to create new instances of the DefaultShadowRenderer class.

 var factory:ClassFactory = new ClassFactory(DefaultShadowRenderer);

The values to be set on each instance of the DefaultShadowRenderer class created by the ClassFactory are assigned to the ClassFactory properties property.

 factory.properties = {shadowColor:0x112244, shadowAlpha:0.15, drawAll:false};

The IsoScene styleRenderers property is then set to a new Array, which in this case contains the one element which is the ClassFactory we just created.

 scene.styleRenderers = [factory];

A new IsoBox is created, and animated with TweenMax to move up and down in a continuous loop.

 box1 = new IsoBox();
 box1.setSize(75, 75, 75);
 box1.moveTo(300, 50, 50);
 scene.addChild(box1);
 
 TweenMax.to(box1, 2, {z:0, yoyo:true, repeat:-1});
      
 this.addEventListener(Event.ENTER_FRAME, enterFrame);
}