In the example below, we use the simple 3D mechanism that we built in the previous tutorial 'Simple 3D Drawing in Flas CS3'. We use our little engine to create a revolving tetrahedron. That part is easy and requires defining vertices and faces of the tetrahedron. The new elements are bitmap fills that we use to draw the projections of each face and an instance of the Loader class in AS3. We use such an instance to load external jpeg images at runtime as the user double-clicks on the faces of the tetrahedron. Please examine the functionality of the applet before we discuss the issues involved and the code.
- Flash CS3 file and jpeg files: tetrahedron.zip
Download the zip file to see the fla file with the source code for the applet. All new elements of the code are exhaustively commented in the fla file. (The zip file contains additionally the jpeg files of the photos loaded at runtime. Put the jpegs in the same directory as the fla file.) Below, we discuss the basic elements of the applet. On the subsequent two pages we focus on three aspects only: bitmap fills, loading jpegs at runtime, and setting up event listeners that provide the required functionality.
The Basic Elements
The revolving tetrahedron above that can be rotated by the user is created using the simple 3D engine from our tutorial 'Simple 3D Drawing in Flash CS3'. Please have a look at the tutorial if you'd like to become familiar with the mathematics behind the view angles and the projections - the usual 3D background. The only difference here is that each face of our solid - the tetrahedron - is drawn in a separate Sprite. In the previous tutorial, all faces were drawn in one Shape, from the back to the front, based on a simple distance sorting method. The reason for having each face in a separate Sprite is the added functionality: we want each face to respond to mouse events. This change requires only minor modifications of the code from the Simple 3D tutorial. We will show those modifications on the next page.
Our four photos are the sample photographs that come with Windows. We used Photoshop to create a larger, 260 by 195, version of each and a smaller, 30 by 23, version. The small thumbnails, LiliesSmall.jpg, HillsSmall.jpg, SunsetSmall.jpg, and WinterSmall.jpg, we imported to the fla file's Library (see next page). The larger pictures, Sunset.jpg, Winter.jpg, Lilies.jpg, and Hills.jpg, we put in the same directory as the fla file, but we didn't import them. The thumbnails provide bitmap data for bitmap fills. The large pictures are loaded at runtime via the AS3 Loader class.