Two custom AS3 classes are behind the applets: the BitmapTransformer class and the BitmapSphere class. The former allows to map any Bitmap (more precisely, a BitmapData object) onto any planar quadrangle not necessarily a parallelogram. The BitmapSphere class creates a sphere with from a given Bitmap (or rather a BitamData object) passed to the constructor of the class. Those two classes do all the work. The code on the MainTimeline of each of the applets consists of a few lines that load the image at runtime and create an instance of BitmapSphere. The following pictures and explanation should clarify the basic ideas behind the bitmap spheres.
We pass the BitmapData object corresponding to our image to the constructor of the BitmapSphere class. The class determines the radius of the sphere based on the size of the image and creates a wireframe of 3D vertices on the sphere. The coordinates of the vertices are obtained from parametric equations of a sphere. Each vertex corresponds to a pair of values for the two parameters. The pairs of parametrs can be visualized as points in a rectangle:
It is the BitmapSphere class that is responsible for calculating 3D coordinates of each vertex and recalculating them when the sphere is rotated. The class projects the vertices onto the 2D view plane. The 3D mechanism that we use is the same as in our tutorial: Simple 3D Drawing in Flash CS3. In particular, in the last part of the tutorial where we draw a sphere. In the 'Simple 3D' tutorial, however, we draw the projected quadrangles using AS3 drawing methods and color them based on their position. This is what is different here.
To map an image onto a sphere, the BitmapSphere class uses the custom BitmapTransformer class. We cut the image into a grid of small pieces. The grid corresponds to the grid in the space of parameters above so the vertices of the grid correspond to the vertices on the wireframe. Then we use the BitmapTransformer class to map each small image onto the corresponding projected quadrangle:
That is all there is to it. You will find a detailed description of the BitmapTransformer class in our tutorial: Cube in Bloom: Distorting Images in AS3, 3D Menu on a Cube, in the BitmapTransformer part.
As we mentioned above, the code on the MainTimeline of each applet loads an image at runtime via the built-in Loader class. The usage of the Loader class should be self-explanatory, but if you'd like, you can find detailed explanation of the Loader class in another of our tutorials: 3D Menu, Bitmap Fills, and Loading External Images in Flash CS3.
Besides loading the image, the code on the MainTimeline creates an instance of the BitmapSphere class. The class extends Sprite, so the instance is positioned in the main movie using Sprite methods.
You will find well-commented source code and all the necessary files in the zip file linked below.
Download
- Download all 'fla', 'as', and 'jpg' files corresponding to this tutorial: sphere.zip
