3D Menu on a Cube with Bitmaps on the Sides

In this tutorial we build on the last example from our previous tutorial 'Simple 3D Drawing in Flash CS3'. We use the 3D engine we created there to build a 3D menu on a cube were the sides of the cube are bitmaps. We use transform.matrix property of the DisplayObject class to transform bitmaps so they behave properly while rotated. The finished applet is displayed below.

Download

The fla file contains all the source code for the applet above. The code is well-commented and should be easy to follow.

An Overview

We use the 3D engine that we created in 'Simple 3D Drawing in Flash CS3' tutorial. In particular, in the first part simple3d_1.fla where we had a revolving cube. There is an important difference, though. In simple3d_1.fla, the sides of the cube were simple fills, easily drawn at runtime based on the projections of the vertices of each face. Here, we need to transform each bitmap to fit the shape enclosed by the four projected vertices, the shape that is different for each view angles. The first thing that we need to do is to get rid of the distortion for perspective factor. In simple3d_1.fla we chose a minimal distortion, anyway. Without distortion for perspective, the projection of each face for each view point is a parallelogram. We can transform a rectangular bitmap to fit any parallelogram by x and y scaling, x and y skewing, rotation, and translation. All those transformations are available via transform.matrix property of a bitmap.

On page 2 and 3 of this tutorial, we discuss transform.matrix - an important property of the DisplayObject class, in particular, the Bitmap class. We also discuss the Matrix class.

Back to Advanced and Experimental              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.