Actionscript 3 Designer Toolkit

More design, less programming

Actionscript 3 Designer Toolkit header image 2

Drawing dashed & dotted lines: DashedLine Class

September 11th, 2009 · 3 Comments · AS3 Custom Classes

The DashedLine class is a simple drawing class whose required parameters include the total line length, width and height of each dash, the spacing between dashes and the dash color. An optional sixth parameter dashOffset creates dashes with slanted leading and trailing edges as in the second instance shown in the code and example below.

To create a dotted line simply limit the dash width and height to either 1 or 2 pixels. This class always create a horizontal line; to create a vertically dashed line change the rotation property to 90.

/** USAGE ***************************************************
import com.dtk.dashedLine;
 
var myLine:DashedLine = new DashedLine( lineLength, dashWidth, dashHeight, dashSpacing, dashColor, dashOffset (optional) );
addChild( myLine );
**************************************************************/
 
import com.dtk.DashedLine;
 
var dl1:DashedLine = new DashedLine ( 520, 20, 4, 2, 0x666666 );
dl1.x = 20;
dl1.y = 20;
addChild(dl1);
 
// last parameter causes 'slanted' dashes
var dl2:DashedLine = new DashedLine ( 520, 20, 6, 8, 0xFF0000, 6 );
dl2.x = 20;
dl2.y = 60;
addChild(dl2);
 
// rotation set to 90 makes dashed line vertical
var dl3:DashedLine = new DashedLine ( 180, 2, 2, 2, 0x00BE2E );
dl3.rotation = 90; 
dl3.x = 30;
dl3.y = 10;
addChild(dl3);
 
// low values of dashed line width & height create dotted line
var dl4:DashedLine = new DashedLine ( 520, 1, 1, 2, 0x000000 );
dl4.x =  20;
dl4.y = 160;
addChild(dl4);

Below are four different instances of the DashedLine class.

Download files: DashedLine.zip (171)

If you found this post helpful please consider a Retweet. Thanks!

Post to Twitter

Tags: ···

3 Comments so far ↓

Leave a Comment

Spam Protection by WP-SpamFree