In this tutorial, we provide several custom classes which make building 3D menus like the cube menu below easy. On this page, we provide an overview of the classes. We discuss each class on the subsequent pages of this tutorial. You can download all 'fla', 'as', and jpeg files corresponding to this tutorial in the zip file below the applet.
- Download all 'fla', 'as', and 'jpg' files corresponding to this tutorial: menu3d.zip
The source code files are well-commented and should be easy to follow.
In this tutorial, we use the simple 3D engine that we built in Simple 3D Drawing in Flash CS3, (Advanced Section) to manipulate vertices of our cube. The diffculty is in rotating bitmap faces in 3D and, in particular, in distorting them for perspective. Without perspective the projection of each face corresponding to each view is a parallelogram. A rectangular bitmap can be mapped onto a parallelogram with an application of one transform matrix. With perspective, such a projection is, in essence, an arbitrary quadrangle. Mapping a rectagular bitmap onto a quadrangle requires a bit more work. This work is done by the custom BitmapTransformer class that we provide in the package.
Another issue that we take up is loading at runtime images that constitute our cube's faces, rather than storing them in the Library. For that we use our custom ImageLoader class introduced already in the tutorial Loading External Images and Spinning them in 3D in Terms of Custom AS3 Classes, (Bridging the Gap Section).
Another class that you will find in the zip file is the CubeMenu class. This is the class that given six images to be loaded, loads them at runtime (using ImageLoader), creates a cube, and rotates the cube in 3D (using the BitmapTransformer class).
Finally, to keep all our code external, we write a short class, FlowerMenu, that creates an instance of CubeMenu and serves as our Document Class.
On the next page, we discuss our Document Class, FlowerMenu, that is the starting point of the application.