As we concluded on the previous page, the only way to make our code user-friendly and easily customizable is by putting it in an ActionScript class. We have done that and created a class SpinSurfaceBoard. The class code is too long to quote it here in its entirety. Please download the zip file below (if you haven't done so yet). The class is contained in the file SpinSurfaceBoard.as. Indeed, the name of a class and the name of the file in which the class resides have to be the same.

Download

• Download all Flash CS3 'fla' files and AS3 'as' class file: surfaces.zip

The Anatomy of a Class

This tutorial is not intended as an introduction to writing classes in AS3. We are preparing a series of simpler tutorials that will bridge the gap between Timeline scripting and class-based development. Nonetheless, let's have a look at the basic anatomy of a class.

If you look at the class code, you see:

package {

import flash.display.Sprite;

import flash.display.Shape;

import flash.events.MouseEvent;

import flash.text.*;

public class SpinSurfaceBoard extends Sprite {

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

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

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

}

}

Every AS3 class has to be included in a package. A package is the pathway through a series of nested subfolders at the end of which the class resides. If the class is meant to reside in the same folder as the fla file that uses it, you can simply use the keyword 'package' as we did above.

The import statements deserve a comment. When you place your code on the Timeline, attached to a frame in your fla file, all the main AS3 packages, like flash.display.*, flash.text.* are automatically imported. Occassionally, you may have to import some event classes for components and, of course, any custom classes you are using if they are not in the same folder. It is not so if you are putting your code in a class. You have to specifically import the packages of AS3 built-in classes or individual classes that you need.

Our class extends Sprite which means any instance of SpinSurfaceBoard will be a Sprite with special additional properties and methods that we define in the class. Let's look past the 'package' and import statements.

public class SpinSurfaceBoard extends Sprite {

private var boardSize:Number;

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

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

}

We see the familiar variable 'boardSize' that we saw on the previous page in our Timeline code. The variable has the attribute 'private'. Variables within a class (variables in a class are called 'properties') have attributes that control access to it. 'private' means that the variable is accessible only from within a class. We declare it as 'private' since we do not want a programmer to change the value of this variable directly. Otherwise, we would declare it as 'public'. Moving along... After a list of variables, some of which come directly from our Timeline code, we see the class constructor:

public class SpinSurfaceBoard extends Sprite {

private var boardSize:Number;

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

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

public function SpinSurfaceBoard(s:Number){

this.boardSize=s;

this.cubeSize=Math.round(boardSize/3.2);

this.fLen=2000;

this.nMesh=20;

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

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

}

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

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

}

The constructor of a class is a public function with the same name as the class itself. The constructor is evoked when, in your script that uses the class, you create an instance of the class. For example:

var spBoard:SpinSurfaceBoard=new SpinSurfaceBoard(110);

In the two examples on the next two pages, we will instantiate the class and show how to use it. As we see, our constructor takes one parameter, the size of the square board that will hold our surfaces. Any construtor must return nothing and its return type must not be specified (not even 'void'). Typically, a contructor sets intial values to all variables, and performs other initialization tasks. So does our constructor.

If you look into the body of SpinSurfaceBoard class, following the constructor, you will see the familiar functions 'setTilesArray' and 'renderView', both declared as private. The code in those functions has not changed at all. The way a programmer is going to use the class is through evoking functions declared as 'public'. A function within a class is called a 'method'. You see several public methods in the body of our class. Let's look at two public methods in conjuction with a private method that they use:

private function drawBack():void {

shBack.graphics.clear();

shBack.graphics.lineStyle(bordThick,bordColor);

shBack.graphics.beginFill(backColor);

shBack.graphics.drawRect(0,0,boardSize,boardSize);

shBack.graphics.endFill();

}

public function changeBackColor(colo:Number):void {

backColor=colo;

drawBack();

}

public function changeBorderColorAndThick(colo:Number,t:Number):void {

bordColor=colo;

bordThick=t;

drawBack();

}

Now if you call in your script in which spBoard is an instance of SpinSurfaceBoard:

spBoard.changeBackColor(0xFFFF00);

the color of the background will change to yellow.

Public Methods and Properties of SpinSurfaceBoard Class

The class has only one public static constant:

• SpinSurfaceBoard.EXAMPLES_TOTAL - the number of examples in the class which is 11.

Here are public instance methods:

• instance.changeExampleNum(n:uint): void - the method changes the number of the example being currently displayed from the list of 11 examples. If you enter an integer greater than 11, example 1 will load. If you enter an integer less than 1, example 11 will load.
• instance.getExampleNum(): uint - the method returns the number of the example currently displayed.
• instance.changeBackColor(c:Number): void - the method changes the color of the board's background.
• instance.changeBorderColorAndThick(c:Number,t:Number): void - the method changes the color and the thickness of the board's border.
• instance.enableMessageBox(): void - the method will create a text box in which a message to the user can be displayed. Default: the message 'Mouse over.' in red, size 11, in the upper left corner of the board.
• instance.setMessageBoxFormat(c:Number,s:Number,mes:String): void - the method sets the color, the size, and the text of the message in the message box.
• instance.setMessageBoxPos(a:Number,b:Number): void - the method sets the message box's position (relative to the graphing board).
• instance.frameOn(b:Boolean): void - the method sets the wireframe display status to true or false according to the parameter b.
• instance.getFrameStatus(): Boolean - the method returns the wireframe's current display status. The method is useful for toggling the wireframe display.
• instance.changeFrameColor(c:Number): void - the method changes the wireframe's color.
• instance.changeMesh(m:Number): void - the method changes the fineness of the mesh.
• instance.changeOpacity(p:Number): void - the method changes the opacity of the tiles.
• instance.changeBoardSize(s:Number): void - the method changes the size of the graphing board.
• instance.combineRGB(r:Number,g:Number,b:Number): Number - this very useful function gives the number of a color given its red, green,and blue components. Following the logic of the class, the method should be private but it is so useful that we made it public.
• instance.destroy(): void - should you want to remove an instance of SpinSurfaceBoard at runtime you should call this method first. The method clears graphics and most importantly removes all the event listeners that otherwise may linger on.
• instance.getExamplesTotal(): uint - the instance method that returns the value of EXAMPLES_TOTAL. The method is superflous as you can access the value via SpinSurfaceBoard.EXAMPLE_TOTAL. In either case, the value is 11 until you decide to augment the class by more examples.

On the next two pages we give two examples that explain all the methods and show them in action.