In the simple applet below, all the code is placed on Frame 1 of the MainTimeline. We discuss the code below. On the next page of this tutorial, we will redo the same applet with the code placed in a custom AS3 class, TriangleBoard. As you will see the process of transferring the code into a class is very easy, almost mechanical. Variables become properties, functions become methods of the class. It all works, provided you obey by the class syntax which we discuss on the next page.
Download
- Download all files related to this tutorial in one zip file: as3_class_intro.zip The above applet corresponds to the file as3_class_intro_1.fla
The Code
Below we present the structure of the MainTimeline code rather than all the details. Download the zip file and exctract a well-commented file as3_class_intro_1.fla for details. Since the applet is simple, so is the code.
The points and the triangle created as the user clicks will reside in a Sprite, spBoard, which is a child of the MainTimeline. In the class version, as3_class_intro_2.fla, which uses our custom class TriangleBoard, spBoard will be replaced by an instance of TriangleBoard.
var spBoard:Sprite = new Sprite();
this.addChild(spBoard);
spBoard.x = 50;
spBoard.y = 10;
We create a Shape to draw our triangle in and three Sprites to hold the three points. The points have to be drawn in Sprites and not Shapes as they have to respond to mouse events. The Shape and the three Sprites are children of spBoard. The same variables will become properties of the TriangleBoard class and will be children of an instance of TriangleBoard.
var shTriangle:Shape = new Shape();
spBoard.addChild(shTriangle);
var spPoint1:Sprite = new Sprite();
var spPoint2:Sprite = new Sprite();
var spPoint3:Sprite = new Sprite();
spBoard.addChild(spPoint1);
spBoard.addChild(spPoint2);
spBoard.addChild(spPoint3);
The properties of the board, the triangle, and the points; that is, their dimensions colors etc. are stored in global variables for easy customization. In the class TriangleBoard, we will see the same variables become instance properties within the class. So will the three Boolean variables isDragging1, isDragging2, isDragging3 that control the dragging of the points.
var boardWidth:Number=400;
var boardHeight:Number=300;
var colorBack:Number=0xFFFFFF;
var colorBorder:Number=0x000000;
var colorDot:Number=0xCC0000;
var colorTriangleBorder:Number=0x000000;
var colorTriangleFill:Number=0x6699FF;
var radiusDot:Number=5;
var numPoints:int = 0;
var isDragging1:Boolean = false;
var isDragging2:Boolean = false;
var isDragging3:Boolean = false;
We are calling a function which draws the background of our board. In the TriangleBoard class, the corresponding function will be defined and will be called by the constructor of the class. 'spBoard' within the body of the function will be replaced in the class by 'this'. 'this' within a class refers to the instance of the class that is using the class methods or properties. That instance will replace spBoard.
drawBack();
function drawBack():void {
spBoard.graphics.clear();
spBoard.graphics.lineStyle(1,colorBorder);
spBoard.graphics.beginFill(colorBack);
spBoard.graphics.drawRect(0, 0, boardWidth, boardHeight);
spBoard.graphics.endFill();
spBoard.filters = [ new DropShadowFilter() ];
}
We define functions that draw a triangle and each of the three points. For simplicity, we skip here the body of those functions. We will see the corresponding methods, drawPoint and drawTriangle in our custom class. If you look at the fla file, the actions perfomed by the functions are self-explanatory. ('n' is 1,2,or 3 and means the number of the point being drawn.)
function drawPoint(n:int):void {
...............................
}
function drawTriangle():void {
...............................
}
We assign event listeners to spBoard and spPoint1, spPoint2, and spPoint3. If you look at the fla file their actions are self-explanatory. You can guess them by the way the applet functions. We will see the corresponding event listeners in the body of our class. (The helper functions limitX and limitY, defined later in the script, do not allow a point to be created or dragged outside of spBoard.)
spBoard.addEventListener(MouseEvent.CLICK, placePoint);
function placePoint(e:MouseEvent):void {
if (numPoints == 0) {
drawPoint(1);
spPoint1.x = limitX(spBoard.mouseX);
spPoint1.y = limitY(spBoard.mouseY);
numPoints = 1;
}
else if(numPoints == 1) {
drawPoint(2);
spPoint2.x = limitX(spBoard.mouseX);
spPoint2.y = limitY(spBoard.mouseY);
numPoints = 2;
}
else if (numPoints == 2) {
drawPoint(3);
spPoint3.x = limitX(spBoard.mouseX);
spPoint3.y = limitY(spBoard.mouseY);
numPoints = 3;
drawTriangle();
} else {
}
}
spPoint1.addEventListener(MouseEvent.MOUSE_DOWN, startDragging1);
spPoint2.addEventListener(MouseEvent.MOUSE_DOWN, startDragging2);
spPoint3.addEventListener(MouseEvent.MOUSE_DOWN, startDragging3);
function startDragging1(e:MouseEvent):void {
if (numPoints == 3) {
isDragging1 = true;
}
}
function startDragging2(e:MouseEvent):void {
...............................
}
function startDragging3(e:MouseEvent):void {
...............................
}
spBoard.addEventListener(MouseEvent.MOUSE_MOVE, updateTriangle);
spBoard.addEventListener(MouseEvent.ROLL_OUT, stopDragging);
spBoard.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
function updateTriangle(e:MouseEvent):void {
if (numPoints == 3) {
if (isDragging1) {
spPoint1.x = limitX(spBoard.mouseX);
spPoint1.y = limitY(spBoard.mouseY);
drawTriangle();
}
...............................
}
}
function stopDragging(e:MouseEvent):void {
...............................
}
We skip the definitions of the functions limitX and limitY. Let's mention the resetBoard listener attached to the RESET button, btnReset. Within the class the listener will correspond to a public 'resetBoard' method. In the next version of the applet, the RESET button will evoke that method in the MainTimeline portion of the script.
btnReset.addEventListener(MouseEvent.CLICK, resetBoard);
function resetBoard(e:MouseEvent):void {
var i:int;
for(i=1;i<=3;i++){
this["spPoint"+String(i)].graphics.clear();
this["isDragging"+String(i)]=false;
}
shTriangle.graphics.clear();
numPoints = 0;
}
On the next page, we look at the same applet in which, however, most of the code that we saw above is encapsulated in a custom class TriangleBoard.
