The FlowerMenu Class -- Our Document Class

To keep all of our code in external files, we created 'FlowerMenu' class which serves as the Document Class. That is, there is no code on the Timeline. Instead in the field 'Document Class' in the fla file 'menu3d.fla', we entered the name: FlowerMenu. The class and the fla file have to be in the same directory for the fla file to compile. When the movie opens, an instance of the Document Class is automatically created and that instance becomes our MainTimeline. Since the class FlowerMenu uses classes in the nested folders: com -- flashandmath -- bitmaps, those nested folders must also reside in the same directory for Flash to find them.

The Flower menu class creates an instance of the CubeMenu class (which appears as our rotating cube and its background), positions it on the Stage, and adds event listeners to the cube's faces that respond to double-clicks. The effect of a face turning toward the user when double-clicked is built into the CubeMenu class. In FlowerMenu, we add another listener that displays the corresponding flower's name. The TextField in which the name appears is also created and formatted by FlowerMenu. (The loading/loading error box is built into CubeMenu.)

It is worth noting that we could have created several instances of CubeMenu in the Document Class, with different sizes and different images.

Below is most of the code in the FlowerMenu class.

/*
We are creating a Document Class for our cube. You could put the corresponding code on the MainTimeline, skipping the class wrapper and the 'private' and 'public' attributes. In that case, the only class that you would have to import would be the CubeMenu class; others would be automatically imported.
*/

package {

import flash.display.*;

import flash.events.*;

import flash.text.*;

import com.flashandmath.bitmaps.CubeMenu;

 

public class FlowerMenu extends MovieClip {

 

private var cube:CubeMenu;

private var infoBox:TextField;

 

//The class constructor. The constructor will be evoked automatically when the movie opens.

 

public function FlowerMenu(){

/*
We are creating an instance of our custom class, CubeMenu, and storing it in the variable 'cube' with datatype 'CubeMenu'. The constructor of the CubeMenu class takes two parameters: an array of strings that represent local addresses of the image files to be loaded (in our case, the swf, the html, and the image files are all in the same directory on the server), and the size of the cube. The most natural choice is for the size of the cube to be equal to the size of your square images but it is not a requirement. The BitmapTranformer class is flexible enough to handle any case. Try changing 160 to 180 or 80, for example. You could create more than one instance of CubeMenu in your movie with a different size and different images on the sides. You just create, say, 'cube2', the same way as we create 'cube' below.
*/

cube=new CubeMenu(["anemon.jpg","parodia.jpg",

"anagallis.jpg","lila.jpg","cosmos.jpg","adonis.jpg"],160);

 

/*
The CubeMenu class extends Sprite, so every instance of it is a display object. We are adding our cube to the Display List as a child of the MainTimeline. (The MainTimeline is an instance of this document class.)
*/

 

this.addChild(cube);

cube.x=20;

cube.y=55;

setUpListeners();

/*
The commented out lines below illustrate the public methods of the CubeMenu class that allow you to customize the appearance of your instance. We commented them out as we go with the default values in our movie. 'fLen' is the perspective constant. Default: 500.
*/

//cube.fLen=1500;

//cube.setBackLook(0xFFFFFF,0xFF0000,2);

//cube.setErrorBoxFormat(0x0000FF,12);

//cube.setErrorBoxSizeAndPos(300,80,30,30);

 

setUpInfoBox();

}

 

//End of constructor.

 

/*
Sides of 'cube' are public properties of the class and they are enabled for double-clicks. We add listeners that will display the names of the flowers in the infoBox. infoBox is created below and added to our movie. The effect of the side turning toward the user when double-clicked is built into the CubeMenu class.
*/

private function setUpListeners():void {

 

cube.side0.addEventListener(MouseEvent.DOUBLE_CLICK,side0Clicked);

 

//Similar listeners for other faces.

 

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

 

}

private function side0Clicked(e:MouseEvent):void {

 

infoBox.text="ANEMONE HUPEHENSIS";

 

}

 

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

 

private function setUpInfoBox():void {

 

var infoFormat:TextFormat=new TextFormat();

infoBox=new TextField();

this.addChild(infoBox);

infoBox.x=382;

infoBox.y=165;

infoBox.width=255;

infoBox.height=100;

infoBox.wordWrap=true;

infoBox.mouseEnabled=false;

infoFormat.color=0xFF9900;

infoFormat.align="center";

infoFormat.size=14;

infoFormat.font="Arial";

infoBox.defaultTextFormat=infoFormat;

 

}

}

}

Download

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

On the next page, we discuss the CubeMenu 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.