The CubeMenu Class

The CubeMenu class loads all the images at runtime (using the ImageLoader class) and creates and controls a loading/loading error TextField. If loading is successful, the class creates a bitmap cube and initializes the 3D rotation functionality. For that, it uses the custom BitmapTransformer class and the basic 3D engine that we developed in the tutorial Simple 3D Drawing in Flash CS3.

The class is too long to present all the code here. Let us only emphasize a few important points and present the public methods and properties. The CubeMenu class extends Sprite.

package com.flashandmath.bitmaps {

 

import flash.display.*;

import flash.events.*;

import flash.text.*;

import flash.geom.Matrix;

import flash.geom.Point;

import com.flashandmath.bitmaps.ImageLoader;

import com.flashandmath.bitmaps.BitmapTransformer;

 

public class CubeMenu extends Sprite {

 

private var imgLoader:ImageLoader;

private var errorBox:TextField;

private var bd0:BitmapData;

private var bd1:BitmapData;

private var bd2:BitmapData;

private var bd3:BitmapData;

private var bd4:BitmapData;

private var bd5:BitmapData;

private var bdTransform:BitmapTransformer;

 

...................

 

public var fLen:Number;

public var side0:Sprite;

public var side1:Sprite;

public var side2:Sprite;

public var side3:Sprite;

public var side4:Sprite;

public var side5:Sprite;

/*
The constructor takes two parameters: an array of strings representing local addresses of image files to be loaded and the size of the cube. Most commonly, the size of the cube would coincide with the size of the square images loaded but it is not a requirement.
*/

public function CubeMenu(imgs:Array,size:Number) {

 

cubeSize=size;

/*
The next variable controls the size of the board behind the cube. The board has listeners added to it that allow for better rotation properites. You can adjust colors of the background and border of the board using public methods defined below. The size is set automatically based on the size of the cube.
*/

boardSize=2*cubeSize+20;

/*
The constant 'fLen' is responsible for perspective distortion. It is public; you can change its value from the outside of the class. Higher values will reuslt in less distortion, lower with more distortion. Values lower than the size of the cube will produce undesirable results.
*/

fLen=500;

 

...................

 

prepImgs(imgs);

 

}

 

//End of constructor.

 

'prepImgs' method called by the constructor creates an instance of our custom class, ImageLoader, and evokes its 'load' method. The instance loads images concurrently and dispatches custom events, one when images finished loading, another if there is a loading error.

 

...................

 

private function prepImgs(a:Array):void {

 

imgLoader=new ImageLoader();

imgLoader.addEventListener(ImageLoader.LOAD_ERROR,errorLoading);

imgLoader.addEventListener(ImageLoader.IMGS_LOADED,allLoaded);

imgLoader.loadImgs(a);

}

 

private function errorLoading(e:Event):void {

 

errorBox.visible=true;

errorBox.text="There has been an error loading images. The server may be busy.

Try refreshing the page.";

 

}

 

private function allLoaded(e:Event):void {

 

errorBox.visible=false;

initApp();

 

}

 

...................

 

The function 'initApp' defined later within the class, intializes the cube. In particular, it retrieves and stores BitmapData objects corresponding to loaded images in the variables b0, b1,...,b5. It also creates an instance of the BitmapTransformer class and stores in the global variable bdTransform. The constructor of the BitmapTransformer class takes the width and the height of the BitmapData objects to be processed as parameters. (We are assuming here that the images passed to the CubeMenu constructor are square images of the same size.) Two other optional parameters control the number of horizonatal and vertical subdivisions when subdividing a bitmap. Higher values produce better pictures. Defaults are 5, 5. Below we go with 10 and 10. We explain on the next page the meaning of the subdivisions.

 

...................

 

private function initApp():void {

 

var imgsSize:Number;

bd0=imgLoader.bitmapsArray[0].bitmapData;

bd1=imgLoader.bitmapsArray[1].bitmapData;

bd2=imgLoader.bitmapsArray[2].bitmapData;

bd3=imgLoader.bitmapsArray[3].bitmapData;

bd4=imgLoader.bitmapsArray[4].bitmapData;

bd5=imgLoader.bitmapsArray[5].bitmapData;

imgsSize=bd0.width;

bdTransform=new BitmapTransformer(imgsSize,imgsSize,10,10);

 

...................

 

}

 

...................

 

The BitmapTransform instance is used later within a private function 'renderView' that renders the view of the cube corresponding to vertical and horizontal displacements of the observer. The 'mapBitmapData' method of the class maps each bitmap onto the quadrangle corresponding to the projection of each side onto the view plane. Here is the method in action inside the 'renderView' function:

 

...................

 

private function renderView(t:Number,p:Number):void {

 

...................

 

/*
'curImg' below is one of the BitmapData variables bd0, bd1,...,bd5. That is, it is one of the BitmapData objects corresponding to the images on the cube. The global public variables side0, side1,...,side5 are Sprites. Each contains the drawing of the corresponding bitmap. curv0,...curv3 are vertices of the projection of the current face being processed. Instead of calculating transform matrices for the projections of the sides of our cube (which now are not parallelograms so such matrices may not exist), we use our instance of the BitmapTransformer class to distort each bitmap so it fits the projecion. BitmapTransformer will transform any BitmapData to fit any quadrangle. The parameters for the mapBitmapData method are: a BitmapData object, the four vertices of the quadrangle (top-left, top-right, bottom-right, bottom-left) and a target (a Shape, a Sprite, or a MovieClip) in which the Shape filled with the distorted bitmap will be drawn.
*/

bdTransform.mapBitmapData(curImg,new Point(curv0[0],curv0[1]),new Point(curv1[0],curv1[1]),

new Point(curv2[0],curv2[1]),new Point(curv3[0],curv3[1]),this["side"+String(curFace)]);

 

...................

 

}

 

...................

 

The CubeMenu class has the following public properties:

  • instance.fLen:Number  A constant responsible for projection distortion. Higher velues correspond to less distortion. Values lower than the size of the cube will produce undesirable effects. Default: 500.
  • instance.side0:Sprite  The first side of the cube. It is a Sprite that contains the distorted image corresponding to the first face of the cube. The Sripte is public and enabled for double-clicks. Thus, you can add your own listeners to it as we did in the FlowerMenu class.
  • instance.side1:Sprite  Analogous to side0.
  • instance.side2:Sprite  Analogous to side0.
  • instance.side3:Sprite  Analogous to side0.
  • instance.side4:Sprite  Analogous to side0.
  • instance.side5:Sprite  Analogous to side0.

The CubeMenu class has the following public methods:

  • The constructor evoked with the key word 'new': new CubeMenu(imgs:Array,size:Number)  The constructor takes two parameters: an array of strings representing local addresses of image files to be loaded and the size of the cube. Most commonly, the size of the cube would coincide with the size of the square images loaded but it is not a requirement. BitmapTransformer is flexible enough to handle either case.
  • instance.setBackLook(b:Number,r:Number,t:Number): void  The method allows you to control: color of the cube's background, color of the border of the background, and thickness of the border. Defaults: black, dark gray, 1. The size of the background is automatically set based on the size of your cube passed to the constructor.
  • instance.setErrorBoxFormat(colo:Number,s:Number): void  The method gives you to control over the appearance of the TextField in which messages about the loading procees are displayed: the color and the size of the font. Defaults: gray, 14.
  • instance.setErrorBoxSizeAndPos(w:Number,h:Number,a:Number,b:Number): void  The method gives you to control over the width, heigth, and the position of the error field relative to the upper left corner of the cube's background. Defaults: 300, 100,20,20.

Download

  • Download all 'fla', 'as', and 'jpg' files corresponding to this tutorial: menu3d.zip

On the next page, we discuss the BitmapTransformer class.

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