AS3IsoLib Tutorial Series - Materials

PLAY THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

The black and white appearance of the primitives is kind of boring, but thankfully it is quite easy to change. In order to apply a texture to the boxes we first embed some image files into the SWF.

[Embed (source="../media/material1.jpg")]
protected var ImgMaterial1:Class;

[Embed (source="../media/material2.jpg")]
protected var ImgMaterial2:Class;

The creation of the scene, the box and rendering the scene is all the same as the last tutorial.

protected var scene:IsoScene = null;
protected var box1:IsoBox = null;

protected function appComplete():void
{
 var spriteContainer:SpriteUIComponent = new SpriteUIComponent();
 this.addChild(spriteContainer);
 
 scene = new IsoScene();
 scene.hostContainer = spriteContainer;
 
 box1 = new IsoBox();
 box1.setSize(75, 75, 75);
 box1.moveTo(300, 50, 0);
 scene.addChild(box1);
      
 this.addEventListener(Event.ENTER_FRAME, enterFrame);
}

protected function enterFrame(event:Event):void
{
 scene.render();
}

Here we add some standard Flex buttons to the application. The first two assign a BitmapFill object to the IsoBox fill property. The BitmapFill class is used to paint a bitmap onto the isometric objects. The first parameter of the BitmapFill constructor can be a number of graphical objects or a string to an image file. Here we supply a reference to the embedded image files.

mx:Button x="10" y="10" label="Material 1" click="{box1.fill = new BitmapFill(ImgMaterial1);}"
mx:Button x="10" y="40" label="Material 2" click="{box1.fill = new BitmapFill(ImgMaterial2);}"

The second two buttons assign a SolidColorFill object to the IsoBox fill property. The SolidColorFill class is used to paint the isometric objects with a single colour with varying degrees of transparency. The first parameter in the SolidColorFill constructor is the color, and the second is the transparency (between 0: transparent, and 1: opaque).

mx:Button x="10" y="70" label="Solid Red"  click="{box1.fill = new SolidColorFill(0xFF2222, 1);}"
mx:Button x="10" y="100" label="Transparent"  click="{box1.fill = new SolidColorFill(0xFF2222, 0.2);}"

When the application is run the appearance of the cube can be modified at run time by clicking one of the four buttons.