ACTIONSCRIPT DRAWING CLASSES
toc
why
Almost from very begining of me development Flash apps I hated to be tied to frames, movieclips, tweens and other rubbish stuff that makes any Flash programmers life a living hell when it comes to apps larger than trace("Hello World").
Theses classes are final code from many years writing AS only sites.
what
Actionscript Drawing Classes are designed in a way to let users to get most out of Flash drawing API while keeping things simple and clear as possible.
to do
Polygon class and any other class extending it should be served with safeMode property in order to deal with situations when corner radius is larger than corner size, which makes curves to overlap and look ugly.
known issues
No issues atm
download
Get rar archive
com
jR
Drawing
Base.as
Ellipse.as
Polygon.as
Rectangle.as
TransformMatrix.as
Triangle.as
Utils.as
contacts
name: Jānis Radiņš
location: Europe->Latvia->Riga
email: janis@mediaverk.lv

I forgot to mention that if you do anyting cool with these classes I'd like to know about that.
Also gimme a message if you find any bugs in code.
Donate
If you feel theese classes have made your life better
and help me free more time for opensource activities!
com.jR.Drawing.Base
This is a top level class extended by all drawing instances which holds all common functionality.
You can not use this class in a direct way or at least there is no point of doing so. This class is important because all methods and properties are inherited by sub classes.
This class provides some key features like manipulating MovieClip properties, generation of of fills and lines.

Public properties:
Property
Description
mc:MovieClip Read only reference to drawing object host MovieClip.
x:Number Read/write reference to host movieclip _x property.
y:Number Read/write reference to host movieclip _y property.
autoClear:Boolean Boolean value indicating whether previous drawings should be clear on each draw attempt.
Set this property to false if you want to use single drawing object to draw several shapes, otherwise all previous drawings will be clear before drawing new one.
Default value for this property is true.
rotation:Number Property indicating rotation in degrees for next drawing attempt. Different drawing objects might have different rotation center point. For instance com.jR.Drawing.Ellipse will rotate from center of object, com.jR.Drawing.Rectangle will rotate at top left corner. At this stage those issues still might change.
skewX:Number X skew property of drawing object. Valid values are in a range from -90 to 90 degrees.
Not all drawing objects pay attention to this setting, for instance com.jR.Drawing.Ellipse ignores skewX and skewY because exactly the same results can be achieved by setting radiusX, radiusY and rotation. Therefore including skewing support would only make bigger mess with no gain.
skewY:Number Y skew property of drawing object. Valid values are in a range from -90 to 90 degrees.
lineSize:Number Line size in pixels. This is same value that goes for MovieClip.lineStyle(); first argument.
Set this value to null in order to disable any line.
lineRgb:Number Line color hex value.
lineAlpha:Number Line alpha value within range from 0-100. Default value is null which is translated to 100, set any numeric value to define exact line alpha.
fillRgb:Number Drawing fill color hex value.
This property effects only drawSolid() function.
fillAlpha:Number Solid fill alpha value within range from 0-100. Default value is null which is translated to 100, set any numeric value to define exact fill alpha.
This property effects only drawSolid() function.
gradientType:String Property indicating gradient fill type. Available values are limited to lineal and radial. Default value is linear.
gradientColors:Array Array of color values to be used with gradient fills. This is only value that is a must if you want to make gradient fills. All other gradientFill values can be and will be generated in case you haven't provided any valid value except this one.
gradientAlphas:Array Array of gradient fill alpha values. This array length should be equal to length of gradientColors array. If you don't provide any value for this property before calling drawGradient() method, empty value will be replaced by auto generated array with same length as gradientColors array with all values equal to 100.
gradientRatios:Array Array of gradient fill alpha values. This array length should be equal to length of gradientColors array. If you don't provide any value for this property before calling drawGradient() method, empty value will be replaced by auto generated array spreading all gradient colors equally.
gradientMatrix_x:Number Gradient fill x position according to host movie clip registration point.
If no value is set auto generated value will be used which can be a little different for each drawing class.
gradientMatrix_y:Number Gradient fill y position according to host movieclip registration point.
gradientMatrix_w:Number Gradient fill width.
gradientMatrix_h:Number Gradient fill height.
gradientMatrix_r:Number Gradient fill rotation in degrees.
gradientX:Number Read only auto generated gradient fill x property.
gradientY:Number Read only auto generated gradient fill y property.
gradientWidth:Number Read only auto generated gradient fill width.
gradientHeight:Number Read only auto generated gradient fill height.
gradientRotation:Number Read only auto generated gradient fill rotation.
traceErrors  

Public methods:
Method
Description
lineStyle(lineSize:Number, lineRgb:Number, lineAlpha:Number):Void Shorthand function to set all three line properties within one call.
Call this function with no parameters to reset line style to initial state.
clear(Void):Void Clear all drawings made by drawing object.
reset(Void):Void Resets all values back to default state.
initMouseEvents(pointer:Boolean):Void Call this function if you want drawing object to respond to mouse events.
Parameter pointer corresponds to useHandCursor value of MovieClip representing class on a stage.
After this function is called drawing object starts to broadcast when ever any mouse event is fired.
Events that are broadcasted are listed here:
  • onDragOutDraw
  • onDragOverDraw
  • onPressDraw
  • onReleaseDraw
  • onReleaseOutsideDraw
  • onRollOutDraw
  • onRollOverDraw
You can subscribe to those events by using instance.addListner() or instance.addEventListener() both of them will broadcast message with single parameter reference to current instance.
com.jR.Drawing.Ellipse
class com.jR.Drawing.Ellipse extends com.jR.Drawing.Base
This class enables creation of ellipses and circles.
*Since this class is extending com.jR.Drawing.Base it is inheriting all properties and methods of that class.

Usage:
Drawing outline
  1. import com.jR.Drawing.Ellipse;
  2. var myEllipse:Ellipse = new Ellipse(_root, 1); // this will create instance at _root's level 1;
  3. myEllipse.autoClear = false; //set this value to false in order to enable several drawings with one object
  4. myEllipse.radius = 50; //set radius to 50 pixels
  5. myEllipse.drawOutline({drawX:100, drawY:100}); //draw fist object at 100, 100. This will be a circle
  6. myEllipse.drawY += 15; // move it by 15 pixels lower
  7. myEllipse.drawOutline({radiusY:35}); //change circle into ellipse, now it's width stays at 50px while height is 35px
  8. myEllipse.drawY += 20;
  9. myEllipse.drawOutline({radiusY:15});
The script above will produce this:

Drawing solid filled Ellipse sector
  1. import com.jR.Drawing.Ellipse;
  2. var myEllipse:Ellipse = new Ellipse(_root, 1); // this will create instance at _root's level 1;
  3. myEllipse.radiusX = 50; //set radius X to 50 pixels
  4. myEllipse.radiusY = 40; //set radius Y to 40 pixels 
  5. myEllipse.drawX = 52; //place drawings x at 52 
  6. myEllipse.drawY = 42; //place drawings x at 42 
  7. myEllipse.startAngle = 30; //Set start angle to 30 degrees
  8. myEllipse.endAngle = -30; //Set end angle to -30 degrees
  9. myEllipse.fillRgb = 0x123456; // Set fill color to 0x123456
  10. myEllipse.fillAlpha = 50; // and fillAlpha to 50 %
  11. myEllipse.lineStyle(3, 0xFF0000, 50); // Set 3 pixel red line with 50% alpha
  12. myEllipse.drawSolid(); // call drawer
The script above will produce this:


Gradient filled sector with inner radius
  1. import com.jR.Drawing.Ellipse;
  2. var myEllipse:Ellipse = new Ellipse(_root, 1);
  3. myEllipse.x = 51;
  4. myEllipse.y = 51;
  5. myEllipse.radiusX = 50;
  6. myEllipse.radiusY = 30;
  7. myEllipse.startAngle = 35;
  8. myEllipse.endAngle = -20;
  9. myEllipse.innerRadius = 10
  10. myEllipse.gradientColors = [0x123456, 0xFF0000, 0xFFFF00];
  11. myEllipse.gradientType = "radial";
  12. myEllipse.rotation = 30;
  13. myEllipse.drawGradient();
The script above will produce this:


All properties of Ellipse object can be set through direct access like ellipseInstance.property = value or through parameter of drawOutline(), drawSolid() or drawGradient();
Effect will be completely the same.

Public properties:
Property
Description
radiusX:Number Ellipse width in pixels
radiusY:Number Ellipse height in pixels
radius:Number Shorthand property for setting same value for radiusX and radiusY (that would make a circle)
innerRadius:Number Size of inner radius. This property enables you to create ring or donut like drawing.
This value is compared to radiusX, height of inner circle will be calculated according to radiusX/innerRadius ratio.
startAngle:Number Start angle for circle/ellipse sector
endAngle:Number End angle for circle/ellipse sector
showOuterLine:Boolean Read/write property indicating whether outline should be shown.
showInnerLine:Boolean Read/write property indicating whether outline should be shown.
This value will have no effect if no innerRadius is set.
joinLines:Boolean Read/write property indicating whether outer and inner circle should be joined with visible line.
drawX:Number X position of drawing according to MovieClip registration point. This value is representing the center of Ellipse.
drawY:Number Y position of drawing according to MovieClip registration point.

Public methods:
Method
Description
Ellipse(host:MovieClip, level:Number) Constructor function for new Ellipse instance.
Argument host defines parent clip that should host Ellipse instance.
level is optional argument, if it's not provided host.getNextHighestDepth() will be used instead. Make sure you provide this argument in case you have v2 components in application there's been issues with getNextHighestDepth in case they're used.
drawOutline(__props:Object):Void This function will draw outline of object with no fill. If no lineSize value is set thickness of 1 pixel will be used.
The only optional argument __props is supposed to be an object containing all necessary values in form {instanceProperty:value}
drawSolid(__props:Object):Void This function will draw object with solid fill . If no lineRgb value is set 0x0 will be used instead.
Properties used for this method are fillRgb, fillAlpha and line style values.
The only optional argument __props is supposed to be an object containing all necessary values in form {instanceProperty:value}
drawGradient(__props:Object):Void This function will draw object with gradient fill .
This method will halt if no gradientColors is set, all other gradient fill properties can be generated.
See com.jR.Drawing.Base for gradient fill properties
The only optional argument __props is supposed to be an object containing all necessary values in form {instanceProperty:value}
reset(Void):Void Resets all values back to initial state.
com.jR.Drawing.Polygon
class com.jR.Drawing.Polygon extends com.jR.Drawing.Base
This class can be used for creating objects with any number of control points even curved lines and sine curves. Most common implementations of this class is described in com.jR.Drawing.Rectangle and com.jR.Drawing.Triangle.
*Since this class is extending com.jR.Drawing.Base it is inheriting all properties and methods of that class.

Usage:
A small demo of what this class is capable of
*If distance between points is smaller than point radius curve will screw. I know about this and I plan to make auto correction for this.
  1. import com.jR.Drawing.Polygon;
  2. import com.jR.Drawing.Ellipse;
  3. var myPolygon:Polygon = new Polygon(_root);
  4. myPolygon.join = false;
  5. myPolygon.roundCorners = false;
  6. myPolygon.passAnchors = true;
  7. myPolygon.lineStyle(2, 0x123546);
  8. var numPoints:Number = 10;
  9. var pointRadius:Number = 20;
  10. for (var i:Number = 0; i<numPoints; i++) {
  11. 	var __e:Ellipse = new Ellipse(_root);
  12. 	__e.fillRgb = 0xFF0000;
  13. 	__e.radius = 3;
  14. 	__e.x = Stage.width/numPoints*i+Stage.width/numPoints/2;
  15.   	__e.y = Stage.height/2+(i%2 == 0 ? Stage.height/5 : -Stage.height/5);
  16.    	__e.drawSolid();
  17. 	__e.mc.onPress = com.jR.Utils.delegate(this, onPressPoint, i, __e.mc);
  18. 	myPolygon.addPoint(__e.x, __e.y, i>0 && i != numPoints-1 ? pointRadius : 0);
  19. }
  20. myPolygon.drawOutline();
  21. function onPressPoint(_index:Number, _mc:MovieClip):Void {
  22. 	_mc.onMouseMove = function() {
  23. 		this._x = this._parent._xmouse;
  24. 		this._y = this._parent._ymouse;
  25. 		myPolygon.modifyPoint(_index, {x:this._x, y:this._y});
  26. 		myPolygon.drawOutline();
  27. 	}
  28. 	_mc.onRelease = _mc.onReleaseOutside = function () {
  29. 		delete this.onMouseMove;
  30. 	}
  31. }
The script above will produce this:

Public properties:
Property
Description
drawX:Number X position of drawing according to MovieClip registration point.
drawY:Number Y position of drawing according to MovieClip registration point.
roundCorners:Boolean Property indicating whether round corners are to be used.
If this property is set to true round corners are made from circle sector, otherwise bezzier curve is used.
passAnchors:Boolean This value has no effect unless roundCorners is set to true. When this property is true line is calculated to go through control point. If roundCorners is set to false anchors are used only as marks for bezzier curve control point.
join:Boolean Property indicating whether last point should be joined with first one.
showLine:Boolean Show or not to show line around Pentagon.
points:Array Array holding values of all control points of pentagon. Points are described in a form{x:Number, y:Number, r:Number} where x and y are coordinates according to MovieClip registration point or drawX and drawY, r is corner radius in pixels.
drawPoints:Array Read only Array holding all calculated points from last draw attempt.
radius:Number A shorthand property setting all Polygon points radius to same value. When accessed in GET context this property will return null if all Pentagon points are not equal, otherwise numeric representation will be returned.

Public methods:
Method
Description
Polygon(host:MovieClip, level:Number) Constructor function for new Polygon instance.
Argument host defines parent clip that should host Polygon instance.
level is optional argument, if it's not provided host.getNextHighestDepth() will be used instead. Make sure you provide this argument in case you have v2 components in application there's been issues with getNextHighestDepth in case they're used.
addPoint(x:Number, y:Number, r:Number):Void Method adds point to current points.
Arguments are - x and y coordinates according to MovieClip registration point or drawX and dawY, r stands for radius of that point.
modifyPoint(index:Number, propertys:Object):Void Modify point by zero based index. propertys is supposed to object optionally containing x ,y and/or r propertys which will be applied to specified point.
clearPoints(Void):Void Remove all points.
reset(Void):Void Reset instance propertys back to initial state.
drawOutline(__props:Object):Void This function will draw outline of object with no fill. If no lineSize value is set thickness of 1 pixel will be used.
The only optional argument __props is supposed to be an object containing all necessary values in form {instanceProperty:value}
drawSolid(__props:Object):Void This function will draw object with solid fill. If no lineRgb value is set 0x0 will be used instead.
Propertys used for this method are fillRgb, fillAlpha and line style values.
The only optional argument __props is supposed to be an object containing all necessary values in form {instanceProperty:value}
drawGradient(__props:Object):Void This function will draw object with gradient fill.
This method will halt if no gradientColors is set, all other gradient fill propertys can be generated.
See com.jR.Drawing.Base for gradient fill propertys.
The only optional argument __props is supposed to be an object containing all necessary values in form {instanceProperty:value}
com.jR.Drawing.Rectangle
class com.jR.Drawing.Rectangle extends com.jR.Drawing.Polygon
This class extends com.jR.Drawing.Polygon in order to provide interface for creating Rectangles.
When setting point radius points are counter starting from 1, assuming that top left corner is number 1 continuing clockwise.
*Since this class is extending com.jR.Drawing.Base it is inheriting all propertys and methods of that class.

Usage:
The most basic square outline
  1. import com.jR.Drawing.Rectangle;
  2. var myRectangle:Rectangle = new Rectangle(_root, 1);
  3. myRectangle.width = 100;
  4. myRectangle.height = 100;
  5. myRectangle.drawOutline({drawX:10, drawY:10});
The script above will produce this:


Round corners and solid fill
  1. import com.jR.Drawing.Rectangle;
  2. var myRectangle:Rectangle = new Rectangle(_root, 1);
  3. myRectangle.width = 100;
  4. myRectangle.height = 100;
  5. myRectangle.radius = 30;
  6. myRectangle.lineStyle(2, 0xFF0000);
  7. myRectangle.fillRgb = 0x123456;
  8. myRectangle.fillAlpha = 50
  9. myRectangle.drawSolid({drawX:10, drawY:10});
The script above will produce this:


Some round corners and gradient fill
  1. import com.jR.Drawing.Rectangle;
  2. var myRectangle:Rectangle = new Rectangle(_root, 1);
  3. myRectangle.width = 100;
  4. myRectangle.height = 100;
  5. myRectangle.radius2 = 30;
  6. myRectangle.radius4 = 30;
  7. myRectangle.lineStyle(2, 0xFF0000);
  8. myRectangle.gradientColors = [0xFF0000, 0xFF00, 0x0];
  9. myRectangle.gradientMatrix_r = 45
  10. myRectangle.drawGradient({drawX:10, drawY:10});
The script above will produce this:


Public propertys:
Property
Description
width:Number width of a Rectangle
height:Number height of a Rectangle
radius:Number A shorthand property setting all Polygon points radius to same value. When accessed in GET context this property will return null if all Pentagon points are not equal, otherwise numeric representation will be returned.
radius1:Number Point 1 radius
radius2:Number Point 2 radius
radius3:Number Point 3 radius
radius4:Number Point 4 radius

Public methods:
This class doesn't have public methods of it's own. All necessary methods are inherited from com.jR.Drawing.Polygon.
com.jR.Drawing.Triangle
class com.jR.Drawing.Triangle extends com.jR.Drawing.Polygon
This class extends com.jR.Drawing.Polygon in order to provide interface for creating Triangles.
When setting point radius points are counter starting from 1, assuming that bottom left corner is number 1 continuing clockwise.
*Since this class is extending com.jR.Drawing.Base it is inheriting all propertys and methods of that class.

Usage:
Most basic triangle outline
  1. import com.jR.Drawing.Triangle;
  2. var myTriangle:Triangle = new Triangle(_root, 1);
  3. myTriangle.setEquilateral(150, 100);
  4. myTriangle.drawX = 75;
  5. myTriangle.drawY = 50;
  6. myTriangle.drawOutline();
The script above will produce this:


The very same triangle with one radius set
  1. import com.jR.Drawing.Triangle;
  2. var myTriangle:Triangle = new Triangle(_root, 1);
  3. myTriangle.setEquilateral(150, 100);
  4. myTriangle.drawX = 80;
  5. myTriangle.drawY = 55;
  6. myTriangle.r2 = 30;
  7. myTriangle.fillRgb = 0x123456;
  8. myTriangle.fillAlpha = 50;
  9. myTriangle.lineStyle(3, 0xFF0000, 50);
  10. myTriangle.drawSolid();
The script above will produce this:


Triangle with round radius and gradient fill
  1. import com.jR.Drawing.Triangle;
  2. var myTriangle:Triangle = new Triangle(_root, 1);
  3. myTriangle.setEquilateral(150, 100);
  4. myTriangle.drawX = 80;
  5. myTriangle.drawY = 55;
  6. myTriangle.radius = 20;
  7. myTriangle.roundCorners = true;
  8. myTriangle.lineStyle(3, 0xFF0000, 50);
  9. myTriangle.gradientColors = [0xFF0000, 0x123456, 0xFF00FF];
  10. myTriangle.drawGradient();
The script above will produce this:

Public propertys:
Property
Description
radius:Number A shorthand property for setting all radiuses in one statement.
x1:Number Read/write reference to x coordinate of point1
x2:Number Read/write reference to x coordinate of point2
x3:Number Read/write reference to x coordinate of point3
y1:Number Read/write reference to y coordinate of point1
y2:Number Read/write reference to y coordinate of point2
y3:Number Read/write reference to y coordinate of point3
r1:Number Radius of point1
r2:Number Radius of point2
r3:Number Radius of point3

Public methods:
Method
Description
Triangle(host:MovieClip, level:Number) Constructor function for new Triangle instance.
Argument host defines parent clip that should host Triangle instance.
level is optional argument, if it's not provided host.getNextHighestDepth() will be used instead. Make sure you provide this argument in case you have v2 components in application there's been issues with getNextHighestDepth in case they're used.
setEquilateral(__width:Number, __height:Number):Void Shorthand method for setting Equilateral triangle
setIsosceles(__width:Number):Void Shorthand method for setting Isosceles triangle