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
- Download the Flash CS3 'fla' file: cubemenu.fla
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.
