AS3: Learn how to create a re-usable Class

01/02/2010 in RIA Comments

AS3: Learn how to create a re-usable class

Download an entire Flash project using this example here.

One thing that I found hard, being a designer turn developer turn pseudo programmer, was understanding how packages, classes, and overall re-usable code is handled. Once it clicked with me then I was off and running, but every example that I found was so complex or a small part of a larger project. What I am presenting below is a simple walk through of how to create a very simple package, and use it passing arguments.

You will need 3 files, newBox.fla, newBox.as, and setNewBox.as. Feel free to use any name for this, but it will be easier to follow along if you name them as I have. To start off, set your document class in the newBox.fla file. I have named my document class newBox.as. That is all you need to do in the .fla, no “frame coding” going on here…

Our constructor function, or the function that gets called in when you assign a document class…is then created as follows:

package com.connatserdev{
 
	//FLASH CLASS IMPORTS
	import flash.display.MovieClip;
 
	//CUSTOM CLASS IMPORT
	import com. connatserdev.setNewBox;
 
	public class newBox extends MovieClip {
 
		public function newBox() {
 
		}
	}
}

Next, we can start creating our re-usable classes, in this instance a class to create a simple box. You will notice in the setNewBox method, we are setting several variables. These values get passed as arguments from the document class, newBox.as. This is what helps make a class re-usable, meaning I can create as many children that I want in the document class by simple creating a new instance and pass these values.

package com. connatserdev{
 
	//FLASH CLASS IMPORTS
	import flash.display.MovieClip;
 
	public class setNewBox extends MovieClip {
 
		public function setNewBox(boxXLoc:Number, boxYLoc:Number, boxWidth:Number, boxHeight:Number, boxColor:uint, borderThickness:Number, borderColor:uint, boxRotation:Number) {
 
			var newBox:MovieClip = new MovieClip();
			newBox.graphics.lineStyle(borderThickness, borderColor);
			newBox.graphics.beginFill(boxColor);
			newBox.graphics.drawRect(boxXLoc,boxYLoc,boxWidth,boxHeight);
			newBox.graphics.endFill();
			newBox.rotation = boxRotation;
			addChild(newBox);
 
		}
	}
}

Now all we need to do to use the class is add some actionscript to the constructor function in newBox.as, as follows:

var boxOne:setNewBox = new setNewBox(20,100,100,20,0xCCCCCC,.5,0x000000, 0);
addChild(boxOne);
 
var boxTwo:setNewBox = new setNewBox(100,125,100,20,0x666666,.5,0x000000, 20);
addChild(boxTwo);

Finally, here are our final .as files:

newBox.as

package com.connatserdev{
 
	//FLASH CLASS IMPORTS
	import flash.display.MovieClip;
 
	//CUSTOM CLASS IMPORT
	import com.connatserdev.setNewBox;
 
	public class newBox extends MovieClip {
 
		public function newBox() {
 
			//X, Y, width, height, background color, border thickness, border color, rotation
 
			var boxOne:setNewBox = new setNewBox(20,100,100,20,0xCCCCCC,.5,0x000000, 0);
			addChild(boxOne);
 
			var boxTwo:setNewBox = new setNewBox(100,125,100,20,0x666666,.5,0x000000, 20);
			addChild(boxTwo);
 
		}
	}
}

setNexBox.as

package com.connatserdev{
 
	//FLASH CLASS IMPORTS
	import flash.display.MovieClip;
 
	public class setNewBox extends MovieClip {
 
		public function setNewBox(boxXLoc:Number, boxYLoc:Number, boxWidth:Number, boxHeight:Number, boxColor:uint, borderThickness:Number, borderColor:uint, boxRotation:Number) {
 
			var newBox:MovieClip = new MovieClip();
			newBox.graphics.lineStyle(borderThickness, borderColor);
			newBox.graphics.beginFill(boxColor);
			newBox.graphics.drawRect(boxXLoc,boxYLoc,boxWidth,boxHeight);
			newBox.graphics.endFill();
			newBox.rotation = boxRotation;
			addChild(newBox);
 
		}
	}
}