CeaRO

Section 10 - Flash, ActionScript 3.0 and and our own Classes

1. Software Needed
2. Re-usable Code
3. Directory Structure for Packages
4. Directory Structure for the 'one own' class example
5. Code Structure for a class example as part of a library/module package
6. Code Structure for the 'one own' class example
7. Some external classes for re-use
8. Document Class using the External Classes from section 7
9. Not all documentation is created equal - Other structures

1. Software Needed

Up to now all the sessions in which we showed some examples, could be put together by using free and open source software or software that came with your legacy operating system.

Or with other words, all you needed was a simple text processor. And when I say simple, I mean simple. Because essentially all your files need to consist of simple ASCII text. Which means you could use Microsoft Windows NotePad. There are actually quite a lot of text processors freely available out there for just about any operating system. They are a lot faster than any full blown office type word processing program and will help you often with colour coding text according to what you are doing (i.e. HTML, PHP...) and they will often do some automatic code insertion, but not to the point where it gets in your way.

ActionScript 3.0 is a programming language, which comes with Adobe Flash. It is an official standard now with a freely available SDK (software development kit). There is even a free development environment (Flash Developer) available for some operating systems (Windows yes, Linux no). But in reality if you want quick visual feedback and combine the code with some timeline based Flash you will probably want to fork out for the full blown Adobe Flash development package. You can also download a 60 day fully functional trial version.

2. Re-usable Code

Enough about all that. Let's get programming. In the previous session we talked about OOP, or Object Oriented Programming. Languages typically come with keywords, data types and logical structures (i.e. loops,...). Most languages also come with what can be referred to as modules and libraries of code, to do quite common things. This avoids having to create all functionality over and over again with your own code written with the available keywords, data types and structures. Something along the lines of the 'DRY' principle: Don't Repeat Yourself. But soon you will find out that despite all the available modules and libraries none of them actually do exactly what you want them to. Or you often find that to do the same thing, you need to repeat the same lines of code over and over again. So you want to write your modules or libraries of classes, with their properties and methods.

When in the Flash devlopment environment, as soon as you create a new ActionScript file and save it with an .as extension, there will be a column visible near the left hand side of your screen. It shows all classes, properties and methods, as well as the packages (think modules, libraries) in which they reside, available to you. At the top it says Top Level. This shows what is available straight away without having to specify in your code in which package to find it.

All the rest requires for each class you use that you specify from which package it is taken. The Flash environment has already set up in which directories on your PC or server it will find the packages it provides. But you still do need to specify in your code which packages are needed by your code.

This is done with an import statement. For instance, say you want to draw some lines on the stage/screen, you can use the Graphics class methods. this requires importing the Graphics class from a package that is defined in the package hierarchy as sitting in 'display' and 'flash'. The statement used would be :

import flash.display.Graphics;

Suppose you wrote your own class for something, which you want to use in several programs. You will also create packages. The way the system finds them also uses the earlier mentioned import system. Because many people may have similar requirements, it is not unimaginable that they would use the same name for their classes, but the classes would not be the same. Programmers often use modules/libaries/packages that are made available by other programmers. So how do they make sure that their code knows which package to use?

3. Directory Structure for Packages

Finding these packages is all based on a directory structure. The lowest subdirectory contains the ActionScript.as files. You can give this subdirectory a name which somewhat sums up what it is intended for, such as 'interfaces' or 'utilities'. The directory structure above it is the part that is made unique. The top level typically would be /classes/ which may very well sit in the root directory of a disk drive on your PC or in the root directory of a web site on a web server. You will have to tell Flash under Edit -> Preferences -> ActionScript -> ActionScript 3.0 Settings ->Source Path, where you /classes subdirectory is sitting (for instance: C:\Documents and Settings\me_myself_and_I\My Documents\classes).

So how do we make the directory structure between the /classes/ and the subdirectory containing the class .as files unique?

Simple, we borrow from a system designed to provide unique addresses: the domain name system. This is best illustrated with a simple example:

/classes/com/cearocorp/interfaces/

is the subdirectory containing the class .as files I wrote myself for my own use. /classes may be used by others, so may 'interfaces' and the class names in it. But I am the only one to whom the domain name cearocorp.com belongs.

4. Directory Structure for the 'one own' class example

First we start with an example of one class, which is commonly referred to as the Document class, and contains the code that will most likely show something on the screen or at least in the OUTPUT window of your Flash development environment.

For this example the subdirectory in which the code .as file is sitting is called myClass, the class is called MyClass. The myClass subdirectory and the MyClass.fla Flash file will be sitting in the same directory. Nothing to do with the complete directory structure in section 3.

On a Microsoft Windows system it could be a structure on a C: drive, and could look like this:

C:\Documents and Settings\me_myself_and_i\My Documents\

which has in it a MyClass.fla and a subdirectory /myClass containing the file MyClass.as

In the previous line you see myClass three times: twice with a capital M (for the .as and .fla filename) and once with lowercase m for the subdirectory name: that is an essential convention you have to follow to have it all working as required.

On a Linux operating system it could be:

/home/me_myself_and_i/myClass

and the same /myClass subdirectory and MyClass.fla and MyClass.as files.

Typically on a Linux system in this case the username would be the me_myself_and_i username the user signed in with, similar to the Microsoft 'My Documents' way of doing things.

5. Code Structure for a class example as part of a library/module package
for re-use as it would be in the directory structure for packages example

package com.cearocorp.interfaces {

// import of some packages provided by flash

import flash.display.MovieClip; // example of import to be able to use MovieClip class

import flash.events.Event;// example of import to be able to use Event class

public class CeaROLibClass {

private var myNumber:Number; // example of a variable of type Number

// used as property for CeaROLibClass class

private var myMovieClip:MovieClip; // example of a variable of type MovieClip

// used as property for CeaROLibClass class

public function CeaROLibClass (argument1:Number, argument2:MovieClip) {

// public function with the same name as the class is a constructor method

// which can be used to create instances (objects) of the class

// and which can take arguments.

myNumber:argument1; // setting the myNumber property of MyClass to argument1

myMovieClip:argument2; // setting the myMovieClip property of MyClass to argument2

myCeaROMethod(); // example of calling a private method

addEventListener(Event.ADDED_TO_STAGE, init); // making this listen for the event that

// says the stage is ready to process further code

} // constructor CeaROLibClass

private function init(e:Event) {

// code which will be called when the stage is ready to react;

myMovieClip = new MovieClip(); // example of code needed to set up one of the properties

} // end of private function init()

private function myCeaROMethod() {

// code called from the CeaROLibClass constructor class;

} // end of private function myCeaROMethod() code

} // end of class CeaROLibClass code

} // end of package

6. Code Structure for the 'one own' class example

package myClass {

// import of some packages provided by flash

import flash.display.MovieClip; // example of import to be able to use MovieClip class

import flash.events.Event;// example of import to be able to use Event class

import com.cearocorp.interfaces.CeaROLibClass;

// if you want to use a CeaROLibClass kept in your packages

// library of self written code

public class MyClass {

private var myNumber:Number; // example of a variable of type Number

//used as property for MyClass class

private var myString:String; // example of a variable of type String

// used as property for MyClass class

private var myCeaROLibClass:CeaROLibClass;

// example of an instance of the CeaROLibClass used as property for

// MyClass class

public function MyClass (argument1:Number, argument2:String) {

// public function with the same name as the class is a constructor method

// which can be used to create instances (objects) of the class

// and which can take arguments.

myNumber:argument1; // setting the myNumber property of MyClass to argument1

myString:argument2; // setting the myString property of MyClass to argument2

myMethod(); // example of calling a private method

addEventListener(Event.ADDED_TO_STAGE, init); // making this listen for the event that

// the stage is ready to process further code

} // constructor MyClass

private function init(e:Event) {

// code which will be called when the stage is ready to react;

myCeaROLibClass = new CeaROLibClass();

// example of code needed to set up one of the properties

} // end of private function init()

private function myMethod() {

// code called from the MyClass constructor class;

} // end of private function myMethod() code

} // end of class MyClass code

} // end of package myClass code

7. Some external classes for re-use

We mentioned before that sometimes we want to replace several lines of code which are used over and over again with one line of code.

For instance: in the Graphics class there is code that allows you to move to a point (moveTo(x,y) and then draw a curved line to another point with a curvature determined by another point that so to speak pulls the curve out.

First of all we don't like the fact that we need a separate line each time for defining our starting point, when we draw a line or curve. The first class deals with that for the line.

The second and third classes deal with it for curves. The standard curve has a start and an end point. It also has what I would call a 'control' or 'pull' point. That is the second class. We would also like to be able to define the curve as going through a middle point rather than being 'pulled' by it. That is the third class.

A fourth recurring piece of code is for drawing a box with rounded corners, often as part of an overlay over a screen which shows data inside or controls like buttons or sliders.

A fifth recurring piece of code is used to position and format a textfield. This is particularly useful because otherwise you need to use both a TextField and a TextFormat class each time.

And last but not least some code to quickly create a uniform background on the stage. After all, why would we always start out with the default white background? Also read the NOTE in the code. The use of the ADDED_TO_STAGE event you can also find in some other classes. If you run your code and you get a balnk window as result without error messages, then there is a good chance that you were trying to access the stage before the program was ready for it. This bit of extra code makes sure your program doesn't start trying to do anything before the stage is ready.

So we can code six new classes in our 'interfaces' subdirectory, for which these are the code .as files:

First Class:

LineFromTo.as

package com.cearocorp.interfaces {

// draw a straight line from a start point to an end point

To use this class you need to insert the following lines of code in your code:

In the import section:

import com.cearocorp.interfaces.LineFromTo;

In the class something like this to create an instance, before the constructor function:

private var myLineFromTo:LineFromTo;

In the constructor function or in a function called from it, something like this:

myLineFromTo = new LineFromTo(

the line width, the line colour, the line alpha,

start point x coordinate, y coordinate,

end point x coordinate, y coordinate

);

// IMPORTS

import flash.display.Graphics;

import flash.display.MovieClip;

import flash.display.LineScaleMode;

// CLASS

public class LineFromTo extends MovieClip {

// PRIVATE VARIABLES

private var iLfT:MovieClip;

private var lineWidth:uint;

private var colour:uint;

private var cAlpha:Number;

private var sLfTX:uint;

private var sLfTY:uint;

private var eLfTX:uint;

private var eLfTY:uint;

// PUBLIC CONSTRUCTOR FUNCTION

public function LineFromTo(

curveLineWidth:uint = 1, curveColour:Number = 0xff0000, curveAlpha:uint = 1,

startX:uint = 100, startY:uint = 100,

endX:uint = 300, endY:uint = 200):void {

trace("In LineFromTo constructor function.");

lineWidth = curveLineWidth;

colour = curveColour;

cAlpha = curveAlpha;

sLfTX = startX;

sLfTY = startY;

eLfTX = endX;

eLfTY = endY;

init();

} // end of public constructor function CurveFRomByTo(...)

// PRIVATE FUNCTIONS

private function init():void {

trace("In LineFromTo private init() function.");

iLfT = new MovieClip();

iLfT.graphics.lineStyle(lineWidth, colour);

iLfT.graphics.moveTo(sLfTX, sLfTY);

iLfT.graphics.lineTo(eLfTX, eLfTY);

addChild(iLfT);

} // end of private function init(...)

// END OF PRIVATE FUNCTIONS

} // end of class LineFromTo

} // end of package LineFromTo

Second Class:

CurveFromByTo.as

package com.cearocorp.interfaces {

// draw a curve from start point, by a control point, to an end point

To use this class you need to insert the following lines of code in your code:

In the import section:

import com.cearocorp.interfaces.CurveFromByTo;

In the class something like this to create an instance, before the constructor function:

private var myCurveFromByTo:CurveFromByTo;

In the constructor function or in a function called from it, something like this:

myCurveFromByTo = new CurveFromByTo(

the line width, the curve colour, the curve alpha,

start point x coordinate, y coordinate,

control point x coordinate, y coordinate,

end point x coordinate, y coordinate

);

// IMPORTS

import flash.display.Graphics;

import flash.display.MovieClip;

import flash.display.LineScaleMode;

// CLASS

public class CurveFromByTo extends MovieClip {

// PRIVATE VARIABLES

private var iCfBt:MovieClip;

private var lineWidth:uint;

private var colour:uint;

private var cAlpha:Number;

private var sCfTtX:uint;

private var sCfTtY:uint;

private var cCfTtX:uint;

private var cCfTtY:uint;

private var eCfTtX:uint;

private var eCfTtY:uint;

// PUBLIC CONSTRUCTOR FUNCTION

public function CurveFromByTo(

curveLineWidth:uint = 1,

curveColour:Number = 0xff0000,

curveAlpha:uint = 1,

startX:uint = 100, startY:uint = 100,

byX:uint = 10, byY:uint = 10,

endX:uint = 300, endY:uint = 200):void {

trace("In CurveFromByTo constructor function.");

lineWidth = curveLineWidth;

colour = curveColour;

cAlpha = curveAlpha;

sCfTtX = startX;

sCfTtY = startY;

cCfTtX = byX;

cCfTtY = byY;

eCfTtX = endX;

eCfTtY = endY;

init();

} // end of public constructor function CurveFRomByTo(...)

// PRIVATE FUNCTIONS

private function init():void {

trace("In CurveFromByTo private init() function.");

iCfBt = new MovieClip();

iCfBt.graphics.lineStyle(lineWidth, colour);

iCfBt.graphics.moveTo(sCfTtX, sCfTtY);

iCfBt.graphics.curveTo(cCfTtX, cCfTtY, eCfTtX, eCfTtY);

addChild(iCfBt);

} // end of private function init(...)

// END OF PRIVATE FUNCTIONS

} // end of class CurveFromByTo

} // end of package curveFromByTo

Third Class:

CurveFromThroughTo.as

package com.cearocorp.interfaces {

// draw a curve from start point, by a control point, to an end point

To use this class you need to insert the following lines of code in your code:

In the import section:

import com.cearocorp.interfaces.CurveFromThroughTo;

In the class something like this to create an instance, before the constructor function:

private var myCurveFromThroughTo:CurveFromThroughTo;

In the constructor function or in a function called from it, something like this:

myCurveFromThroughTo = new CurveFromThroughTo(

the line width, the curve colour, the curve alpha,

start point x coordinate, y coordinate,

middle point x coordinate, y coordinate,

end point x coordinate, y coordinate

);

// IMPORTS

import flash.display.Graphics;

import flash.display.MovieClip;

import flash.display.LineScaleMode;

// CLASS

public class CurveFromThroughTo extends MovieClip {

// PRIVATE VARIABLES

private var iCfTt:MovieClip;

private var lineWidth:uint;

private var colour:uint;

private var cAlpha:Number;

private var sCfTtX:uint;

private var sCfTtY:uint;

private var tCfTtX:uint;

private var tCfTtY:uint;

private var eCfTtX:uint;

private var eCfTtY:uint;

// PUBLIC CONSTRUCTOR FUNCTION

public function CurveFromThroughTo(

curveLineWidth:uint = 1, curveColour:Number = 0xff0000, curveAlpha:uint = 1,

startX:uint = 100, startY:uint = 100,

throughX:uint = 10, throughY:uint = 10,

endX:uint = 300, endY:uint = 200):void {

trace("In CurveFromThroughTo constructor function.");

lineWidth = curveLineWidth;

colour = curveColour;

cAlpha = curveAlpha;

sCfTtX = startX;

sCfTtY = startY;

eCfTtX = endX;

eCfTtY = endY;

tCfTtX = throughX * 2 - (sCfTtX + eCfTtX)/2;

tCfTtY = throughY * 2 - (sCfTtY + eCfTtY)/2;

init();

} // end of public constructor function CurveFromThroughTo(...)

// PRIVATE FUNCTIONS

private function init():void {

trace("In private init() function.");

iCfTt = new MovieClip();

iCfTt.graphics.lineStyle(lineWidth, colour);

iCfTt.graphics.moveTo(sCfTtX, sCfTtY);

iCfTt.graphics.curveTo(tCfTtX, tCfTtY, eCfTtX, eCfTtY);

addChild(iCfTt);

} // end of private function init(...)

// END OF PRIVATE FUNCTIONS

} // end of class CurveFromThroughTo

} // end of package curveFromThroughTo

Fourth Class:

Box.as

package com.cearocorp.interfaces {

// draw a box with rounded corners

To use this class you need to insert the following lines of code in your code:

In the import section:

import com.cearocorp.interfaces.Box;

In the class something like this to create an instance, before the constructor function:

private var myBox:Box;

In the constructor function or in a function called from it, something like this:

myBox = new Box(

box line width,

box x coordinate, y coordinate,

box width of corner in x direction, height of corner in y direction,

box width, box height, box line colour, box alpha,

is there a top line (true or false),

is there a right line (true or false),

is there a bottom line (true or false),

is there a left line (true or false)

);

import flash.display.Graphics;

import flash.display.MovieClip;

import flash.display.LineScaleMode;

public class Box extends MovieClip {

private var box:MovieClip;

private var lineWidth:uint;

private var bX:uint;

private var bY:uint;

private var bcW:uint;

private var bcH:uint;

private var bW:uint;

private var bH:uint;

private var bC:uint;

private var bA:Number;

private var bTl:Boolean;

private var bRl:Boolean;

private var bBl:Boolean;

private var bLl:Boolean;

public function Box(

boxLw:uint = 1,

boxX:uint = 100, boxY:uint = 100,

boxSx:uint = 10, boxSy:uint = 10,

boxW:uint = 300, boxH:uint = 200,

boxColour:Number = 0x000000, boxAlpha:uint = 1,

topLine:Boolean = true,

rightLine:Boolean = true,

bottomLine:Boolean = true,

leftLine:Boolean = true):void {

lineWidth = boxLw;

bX = boxX;

bY = boxY;

bcW = boxSx;

bcH = boxSy;

bW = boxW;

bH = boxH;

bC = boxColour;

bA = boxAlpha;

bTl = topLine;

bRl = rightLine;

bBl = bottomLine;

bLl = leftLine;

trace("In Box constructor function.");

init();

}

private function init():void {

trace("In Box private init() function.");

box = new MovieClip();

box.graphics.lineStyle(lineWidth, bC);

box.graphics.moveTo(bX, bY + bcW);

box.graphics.curveTo(bX, bY, bX + bcW, bY);

box.graphics.lineTo(bX + bW - bcW, bY);

box.graphics.curveTo(bX + bW, bY, bX + bW, bY + bcH);

box.graphics.lineTo(bX + bW, bY + bH - bcH);

box.graphics.curveTo(bX + bW, bY + bH, bX + bW - bcW, bY + bH);

box.graphics.lineTo(bX + bcW, bY + bH);

box.graphics.curveTo(bX, bY + bH, bX, bY + bH - bcW);

box.graphics.lineTo(bX, bY + bcW);

addChild(box);

} // end of private init() function

} // end of class Box

} // end of package

Fifth Class:

TxtFldCtrl.as

package com.cearocorp.interfaces {

// create a text field with all formatting included,

// as provide by combination of TextField and TextFormat classes

/* create new TxtFldCtl with:

import com.cearocorp.interfaces.TxtFldCtl;

private var myTxtFldCtl:TxtFldCtl;

myTxtFldCtl = new TxtFldCtl(background flag,

border flag,

foreground colour,

background colour,

border colour,

background alpha,

text size,

text font,

text bold flag,

text italic flag,

text x,

text y,

text width,

text height,

text string,

text colour);

addChild(myTxtFldCtl();

import flash.display.MovieClip;

import flash.events.Event;

import flash.text.TextField;

import flash.text.TextFormat;

public class TxtFldCtl extends MovieClip {

private var txtFld:TextField;

private var txtFmt:TextFormat;

private var bgFlag:Boolean;

private var brdFlag:Boolean;

private var txtBFlag:Boolean;

private var txtIFlag:Boolean;

private var fgColour:Number;

private var bgColour:Number;

private var brdColour:Number;

private var bgAlpha:Number;

private var txtSize:uint;

private var txtFont:String;

private var txtX:uint;

private var txtY:uint;

private var txtWidth:uint;

private var txtHeight:uint;

private var txtText:String;

private var txtColor:Number;

public function TxtFldCtl(

bgF:Boolean = true,

brdF:Boolean = true,

fgC:Number = 0x000000,

bgC:Number = 0xFFFFFF,

brC:Number = 0x000000,

bgA:Number = 1,

tS:uint = 12,

tF:String = "Arial",

tB:Boolean = false,

tI:Boolean = false,

tX:uint = 110,

tY:uint = 110,

tW:uint = 110,

tH:uint = 110,

tT = "TxtFldCtl",

tC = 0xcc66cc

):void {

trace("In TxtFldCtl constructor function.");

txtFld = new TextField();

txtFmt = new TextFormat();

bgFlag = new Boolean(bgF);

brdFlag = new Boolean(brdF);

txtBFlag = new Boolean(tB);

txtIFlag = new Boolean(tI);

fgColour = new Number(fgC);

bgColour = new Number(bgC);

brdColour = new Number(brC);

bgAlpha = new Number(bgA);

txtSize = new uint(tS);

txtFont = new String(tF);

txtX = new uint(tX);

txtY = new uint(tY);

txtWidth = new uint(tW);

txtHeight = new uint(tH);

txtText = new String(tT);

txtColor = new Number(tC);

addEventListener(Event.ADDED_TO_STAGE, init);

} // constructor TxtFldCtl

private function init(e:Event) {

trace("In TxtFldCtl private init() function.");

txtFld.background = bgFlag;

txtFld.border = brdFlag;

txtFld.backgroundColor = bgColour;

txtFmt.bold = txtBFlag;

txtFmt.italic = txtIFlag;

txtFld.borderColor = brdColour;

txtFld.alpha = bgAlpha;

txtFld.textColor = fgColour;

txtFmt.size = txtSize;

txtFmt.font = txtFont;

txtFld.x = txtX;

txtFld.y = txtY;

txtFld.width = txtWidth;

txtFld.height = txtHeight;

txtFld.text = txtText;

txtFmt.color = txtColor;

addChild(txtFld);

txtFld.setTextFormat(txtFmt);

} // private function init()

} // class TxtFldCtl

} // package

Sixth Class:

StageBackground.as

package com.cearocorp.interfaces {

// fill the stage with a background colour

To use this class you need to insert the following lines of code in your code:

In the import section:

import com.cearocorp.interfaces.StageBackground;

In the class something like this to create an instance, before the constructor function:

private var myStageBackground:StageBackground;

In the constructor function or in a function called from it, something like this:

myStageBackground = new StageBackground(colour, alpha);

NOTE: using the addEventListener function with the ADDED_TO_STAGE event

is a good way of making sure that the code is far enough along to

be able to read stageWidth and stageHeight from the stage

import flash.display.MovieClip;

import flash.display.DisplayObjectContainer;

import flash.events.*;

import flash.filters.*;

import flash.events.Event;

import flash.display.Graphics;

import flash.display.LineScaleMode;

public class StageBackground extends MovieClip {

private var stBgColour:Number;

private var stBgAlpha:Number;

private var stWidth:uint=550;

private var stHeight:uint=440;

private var bGround:MovieClip;

public function StageBackground(c:Number=0x000000,a:Number=1) {

trace("In StageBackground constructor.");

stBgColour = c;

stBgAlpha = a;

addEventListener(Event.ADDED_TO_STAGE, init);

} // constructor StageBackground

private function init(e:Event) {

trace("In StageBackground init function.");

stWidth = stage.stageWidth;

stHeight = stage.stageHeight;

bGround = new MovieClip();

bGround.graphics.beginFill(stBgColour,stBgAlpha);

bGround.graphics.moveTo(0,0);

bGround.graphics.lineTo(stWidth,0);

bGround.graphics.lineTo(stWidth,stHeight);

bGround.graphics.lineTo(0,stHeight);

bGround.graphics.lineTo(0,0);

bGround.graphics.endFill();

addChildAt(bGround,0);

} // private function init()

} // end of class StageBackground

} // end of package

8. Document Class using the External Classes from section 7

And now the code for a document class using all of the above.

We start with a black background using the StageBackGround class.

Then we add two boxes with rounded corners side by side filling the window using the Box class.

Then we draw straight lines starting in the top left corner of the left box and fanning out to the bottom line of that box. We actually start at the bottom and make them converge to one point at the top.

Then we do the same with two sets of curved lines, one 'pulled' towards a control point, the second going through that point (classes LineFromTo, CurveFromByTo, CurveFromThroughTo).

We end by putting a controlled textfield in the right hand box (class TxtFldCtl).

And this is the code:

Test.as

package test {

import flash.display.MovieClip;

import flash.events.Event;

import com.cearocorp.interfaces.*;

public class Test extends MovieClip {

private var myStageBackground:StageBackground;

private var myLineFromTo:LineFromTo;

private var myCurveFromByTo:CurveFromByTo;

private var myCurveFromThroughTo:CurveFromThroughTo;

private var myBoxLeft:Box;

private var myBoxRight:Box;

private var myTxtFldCtl:TxtFldCtl;

public function Test() {

addEventListener(Event.ADDED_TO_STAGE, init);

} // constructor Test

private function init(e:Event) {

myStageBackground = new StageBackground(0x000000, 1);

addChildAt(myStageBackground, 0);

myBoxLeft = new Box(

1,// line width

10,// top left corner x

10,// top left corner y

5,// corner width

5,// corner height

260,// box width

stage.stageHeight - 20, // box height

0xFFFFFF, // line colour

1, // line alpha

true, // top line shown

true, // right line shown

true, // bottom line shown

true// left line shown

);

addChild(myBoxLeft);

myBoxRight = new Box(

1,// line width

stage.stageWidth - 270,//

10,//

5,//

260,//

stage.stageHeight - 20,//

0xFFFFFF,// line colour

1,// line alpha

true,// top line shown

true,// right line shown

true,// bottom line shown

true// left line shown

);

addChild(myBoxRight);

for (var i=0; i<20; i++) {

myLineFromTo = new LineFromTo(

3, // line width

int(Math.random()*16777215), // line colour

1, // line alpha

12 + i*10,// start point x

stage.stageHeight - 12,// start point y

12,// end point x

12// end point y

);

addChild(myLineFromTo);

}

for (i=0; i<20; i++) {

myCurveFromThroughTo = new CurveFromThroughTo(

3,// line width

int(Math.random()*16777215),// line colour

1,// line alpha

12 + i*10,// start point x

stage.stageHeight - 12, // start point y

250, // middle point x

220,// middle point y

12,// end point x

12// end point y

);

addChild(myCurveFromThroughTo);

}

for (i=0; i<20; i++) {

myCurveFromByTo = new CurveFromByTo(

3,// line width

int(Math.random()*16777215),// line colour

1,// line alpha

12 + i*10,// start point x

stage.stageHeight - 12,// start point y

250,// control point x

220,// control point y

12,// end point x

12// end point y

);

addChild(myCurveFromByTo);

}

myTxtFldCtl = new TxtFldCtl(

true, // background flag

false, // border flag

0xcccccc, // foreground colour

0xFFFFFF,// background colour

0x000000,// border colour

.5,// background alpha,

14,// text size,

"Arial",// text font,

true,// text bold flag,

false,// text italic flag,

290,// text start position x,

20,// text start position y,

240,// text width,

360,// text height,

"\n EXAMPLES

\n of

\n RE-USABLE\nEXTERNAL\nCLASSES

\n Everything you see in this

\n window,

\n is generated by

\n using external classes.

\n These classes draw

\n straight lines,

\n curved lines,

\n controlled by

\n a control point

\n or going through

\n a middle point,

\n boxes with rounded corners

\n and

\n create formatted text areas.",

// text string,

0x666666// text colour

);

addChild(myTxtFldCtl);

} // private function init()

} // class Test

} // package test

9. Not all documentation is created equal - Other structures

If you work a lot with books to study programming, you have probably become quite frustrated at times. Why? Books either are overly detailed and you have no real overview of what is happening. Or they give partial code. This is fine for people who go from front to back through the book and add code as they go as in the book. Not helpful if you get back to the book after a while for looking something up in the middle of the book. Then you have the books that explain and publish code in the book as well as provide the code for download. But they give it a completely different structure from the book.

I will mention here two structures you may come across, which are different from what you learn in this article.

The first is code files where the package has no name. This means that whatever file structured like that and sitting in the same subdirectory has access to any other file (and class in it) with that same nameless package construct. Remember however the golden rule for these and any other code files: one class only can be defined per file.

On our web side we try to show complete code,which can be copied and run. This sometimes leads to a fair bit of repetition. But at least we are not killing trees, doing so.

In this particular article you do have to go through it from the start if you are a new comer to ActionScript 3.0, because the directory structure and file naming conventions are as essential as the actual code.

Another example of a completely different approach was one in which no .as files were showing at all in the code downloaded to go with a book full of code. One would assume that the code would be found in .as files. Every .fla file contained the code in the first frame on the timeline (accessible through the ACTION tab when sitting on that frame).

Also when dealing with books, always be aware of what software version they are about. Because it takes some time to issue a book, often they include information about a next version, which was not available in its final version at the time of writing. So that information is not necessarily correct for the final version you use. Often publishers will show these nice little boxes on the front cover claiming that the book covers the latest or next version. That coverage may be limited inside and the bulk of the book may still be straight out of the previous edition.

Especially when buying books be aware of all this, to avoid disappointment.

Section 10 - Flash, ActionScript 3.0 and and our own Classes

1. Software Needed

2. Re-usable Code

3. Directory Structure for Packages

4. Directory Structure for the 'one own' class example

5. Code Structure for a class example as part of a library/module packagefor re-use as it would be in the directory structure for packages example

6. Code Structure for the 'one own' class example

7. Some external classes for re-use

First Class:

Second Class:

Third Class:

Fourth Class:

Fifth Class:

Sixth Class:

8. Document Class using the External Classes from section 7

9. Not all documentation is created equal - Other structures

5. Code Structure for a class example as part of a library/module package
for re-use as it would be in the directory structure for packages example