I was surprised recently to learn that the actionscript drawing api did not include a dashed-line style in the options. Well not to worry, drawing a dashed line is fairly straightforward. You just need to calculate the distance between each drawing points and divide it by the gap space. Then use a loop to draw multiple lines between the points, toggling the alpha to 0 or 1 on each iteration. Its not pixel perfect or anything, but its a relatively painless solution.
Checkout the example below to see it in action.
Dashed Line
This movie requires Flash Player 9
source
package {
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
/**
* @author Phil
*/
public class DashedLine extends Sprite {
private var _lineThickness : Number = 1;
private var _lineColor : uint = 0xFFFFFF;
private var _dashSpace : Number = 5;
public function DashedLine() {
stage.align = StageAlign.TOP_LEFT
stage.scaleMode = StageScaleMode.NO_SCALE
graphics.beginFill(0x000000, 1)
graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight)
graphics.endFill();
var data : Array = getPoints()
var px : Number;
var py : Number;
var draw : Boolean = true;
// main drawing loop
for(var i : int = 0;i < data.length;i++) {
var x : Number = data[i][0]
var y : Number = data[i][1]
if(i == 0) {
graphics.moveTo(x, y)
} else {
var dx : Number = x - px;
var dy : Number = y - py;
var distance : Number = Math.sqrt(dx * dx + dy * dy);
// calculate the number of dashed to draw based on the distance between each point
// always draw at least 1 line
var loops : int = Math.max(1, Math.floor(distance / _dashSpace))
// dash drawing loop
for (var j : int = 0;j < loops;j++) {
var alpha : Number = draw ? 1 : 0; // toggle the alpha on and off for each dash iteration
draw = !draw;
graphics.lineStyle(_lineThickness, _lineColor, alpha)
var a : Number = j / loops;
graphics.lineTo(px + (dx * a), py + (dy * a))
}
}
// complete the last line
if(i == data.length - 1) {
graphics.lineStyle(_lineThickness, _lineColor, 1)
graphics.lineTo(x, y)
}
// save the previous position
px = x
py = y
}
}
public function getPoints() : Array {
var points : Array = [];
points.push([100,300]);
points.push([78.8,168.43990319999997]);
points.push([88.64999999999999,167.8654816]);
points.push([98.5,161.76375440000004]);
points.push([108.35,159.4435878]);
points.push([118.2,157.12367460000002]);
points.push([128.05,161.7856192]);
points.push([137.9,157.13815460000004]);
points.push([147.75,150.45462099999997]);
points.push([157.6,150.170813]);
points.push([167.45,154.25098739999999]);
points.push([177.29999999999998,151.93103799999997]);
points.push([187.14999999999998,153.9744918]);
points.push([197,153.4000702]);
points.push([206.85,110.37080679999997]);
points.push([216.7,130.17818400000002]);
points.push([226.55,134.694658]);
points.push([236.4,142.08358819999995]);
points.push([246.25,138.89092920000002]);
points.push([256.1,135.9892458]);
points.push([265.95,133.0872366]);
points.push([275.8,128.14915839999998]);
points.push([285.65,123.79263320000001]);
points.push([295.5,119.7267578]);
points.push([305.35,117.2756667324]);
points.push([315.2,50.82457562860003]);
points.push([325.05,70.35882340200001]);
points.push([334.9,90.44433818999997]);
points.push([344.75,106.4859321994]);
points.push([354.59999999999997,107.48357411719999]);
points.push([364.45000000000005,106.0178218906]);
points.push([374.29999999999995,104.05938458700001]);
points.push([384.15000000000003,99.6382731932]);
points.push([394,96.6944970124]);
points.push([403.85,95.22874478580002]);
points.push([413.7,92.77765371819999]);
points.push([423.55,90.81921641459996]);
points.push([433.4,87.87544023380002]);
points.push([443.25,84.93169536599999]);
points.push([453.1,84.94396709360001]);
points.push([462.95,81.50750583580003]);
points.push([472.8,77.08570573699996]);
points.push([482.65,73.64924447920004]);
points.push([492.5,69.22744434420002]);
points.push([502.34999999999997,66.28369947639999]);
points.push([502.34,300]);
points.push([100,300]);
return points;
}
}
}