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 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.
Number. Determines the distance of the horizonatal plane on which the shadow will be dropped from the cube. Default: 200.
Number. Shadow color in hex. Default: 0x666666.
Number. Shadow of border lines in hex. Default: 0xCC0000.
Number. The thickness of border lines in pixels. Default: 2 px.
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.
Increments rotationX, rotationY, and rotationZ of the instance by a, b, and c, respectively.
Rotates the instance so that the front side faces front.
Rotates the instance so that the right side faces front.
Rotates the instance so that the back side faces front.
Rotates the instance so that the left side faces front.
Rotates the instance so that the top side faces front.
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.