Example and Custom DisplayCube Class

We present a custom DisplayCube AS3 class. The class creates a cube from any six DisplayObjects that you pass to the constructor. The cube rotates in 3D with correct depth-sorting regardless of the projection center settings and cube's position. The sides of the cube respond to clicks and, moreover, the cube drops a 3D shadow on a plane below! We present here a little application with three instances of DisplayCube serving as Bitmap menus, but the class is very versatile and you can use it to build much more complex applications.

Download

  • Download all source files corresponding to this effect: cube3d.zip

In the zip package, you will find a fla file with well-commented Timeline code and a custom AS3 class, DisplayCube. We descibe the class below.

The DisplayCube AS3 Class

Our custom AS3 DisplayCube class is the engine behind the effect. Download the zip package below and take a look at comments in cube3d.fla to see the class in action and for detailed explanations. The DisplayCube class extends Sprite, so it inherits Sprite methods and properties. Below is the list of public properties and methods specific to the DisplayCube class.

The constructor, evoked with the keyword 'new', takes eight parameters. The first six of them represent the six sides of the cube. The last two Boolean parameters determine if a shadow will be dropped, true or false, and if the border around sides will be drawn, true or false.

new DisplayCube(obf:DisplayObject,obr:DisplayObject,
                obbk:DisplayObject,obl:DisplayObject,obt:DisplayObject,
                   obbt:DisplayObject,shis:Boolean,bis:Boolean)

Instance properties.

instance.shadDist

Number. Determines the distance of the horizonatal plane on which the shadow will be dropped from the cube. Default: 200.

instance.shadColor

Number. Shadow color in hex. Default: 0x666666.

instance.bordColor

Number. Shadow of border lines in hex. Default: 0xCC0000.

instance.bordThick

Number. The thickness of border lines in pixels. Default: 2 px.

instance.renderView(a:Number,b:Number,c:Number):void

Sets rotationX, rotationY, and rotationZ of the instance to a, b, and c, respectively. The method works after the instance has been added to the Display List. As well as the remaining seven methods below.

instance.rotateXYZ(a:Number,b:Number,c:Number):void

Increments rotationX, rotationY, and rotationZ of the instance by a, b, and c, respectively.

instance.turnFront():void

Rotates the instance so that the front side faces front.

instance.turnRight():void

Rotates the instance so that the right side faces front.

instance.turnBack():void

Rotates the instance so that the back side faces front.

instance.turnLeft():void

Rotates the instance so that the left side faces front.

instance.turnTop():void

Rotates the instance so that the top side faces front.

instance.turnBottom():void

Rotates the instance so that the bottom side faces front.

DisplayCube presented here uses the new 3D methods available in Flash Player 10. Our earlier tutorial (still very popular) 3D Menu on a Cube with Perspective, Distorting Images in ActionScript 3 was written for Flash Player 9.

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.