Skip to main content
dhruba.om
Known Participant
February 19, 2011
Answered

Draw a Line From any Point A To any Point B Dynamically Using AS3

I am trying to make an anmation where there are several locations(say A,B,C,D,......) made on a  map. If a person clicks on one location A and then another location B, I wanted to draw a dotted line from point A (from  destination of the plane) to point B(to destination of the plane)  using AS3. Please help me........

This topic is closed to new replies. Start a new post to keep the conversation going.
Andrei1-bKoviICorrect answer
Inspiring
February 20, 2011

Here is a quick and dirty timeline code that does it (class is below):

var line:Shape;
var lineGraphics:Graphics;
var clickSwitch:int = 0;
var mousePositions:Array = [];
var conversion:Number = 180 / Math.PI;

init();
function init():void {
     drawBackground();
     line = new Shape();
     addChild(line);
     lineGraphics = line.graphics;
     stage.addEventListener(MouseEvent.CLICK, onClick);
}
     
function onClick(e:MouseEvent):void 
{
     clickSwitch = 1 - clickSwitch;
     mousePositions[clickSwitch] = new Point(mouseX, mouseY);
     if (clickSwitch == 0) {
          drawLine();
     }
     else {
          removeLine();
     }
}
     
function removeLine():void
{
     lineGraphics.clear();
     line.rotation = 0;
}
     
function drawLine():void
{
     lineGraphics.lineStyle(1, 0xff0000);
     lineGraphics.moveTo(0, 0);
     var dotDistance:Number = 2;
     var nextX:Number = dotDistance;
     while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
          lineGraphics.lineTo(nextX, 0);
          nextX += dotDistance;
          lineGraphics.moveTo(nextX, 0);
          nextX += dotDistance;
     }
     line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
     line.x = mousePositions[1].x;
     line.y = mousePositions[1].y;
}
     
function drawBackground():void
{
     var s:Shape = new Shape();
     var g:Graphics = s.graphics;
     g.beginFill(0xC0C0C0);
     g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
     g.endFill();
     addChild(s);
}

Class:

package 
{
     import flash.display.Graphics;
     import flash.display.Shape;
     import flash.display.Sprite;
     import flash.events.MouseEvent;
     import flash.geom.Point;

     public class DottedLine extends Sprite
     {
          private var line:Shape;
          private var lineGraphics:Graphics;
          private var clickSwitch:int = 0;
          private var mousePositions:Array = [];
          private var conversion:Number = 180 / Math.PI;
          
          public function DottedLine() 
          {
               init();
          }
          
          private function init():void {
               drawBackground();
               line = new Shape();
               addChild(line);
               lineGraphics = line.graphics;
               stage.addEventListener(MouseEvent.CLICK, onClick);
          }
          
          private function onClick(e:MouseEvent):void 
          {
               clickSwitch = 1 - clickSwitch;
               mousePositions[clickSwitch] = new Point(mouseX, mouseY);
               if (clickSwitch == 0) drawLine();
               else removeLine();
          }
          
          private function removeLine():void
          {
               lineGraphics.clear();
               line.rotation = 0;
          }
          
          private function drawLine():void
          {
               lineGraphics.lineStyle(1, 0xff0000);
               lineGraphics.moveTo(0, 0);
               var dotDistance:Number = 2;
               var nextX:Number = dotDistance;
               while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
                    lineGraphics.lineTo(nextX, 0);
                    nextX += dotDistance;
                    lineGraphics.moveTo(nextX, 0);
                    nextX += dotDistance;
               }
               line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
               line.x = mousePositions[1].x;
               line.y = mousePositions[1].y;
          }
          
          private function drawBackground():void
          {
               var s:Shape = new Shape();
               var g:Graphics = s.graphics;
               g.beginFill(0xC0C0C0);
               g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
               g.endFill();
               addChild(s);
          }
          
     }

}
View reply

15 replies

Andrei1-bKoviICorrect answer
Inspiring
February 20, 2011

Here is a quick and dirty timeline code that does it (class is below):

var line:Shape;
var lineGraphics:Graphics;
var clickSwitch:int = 0;
var mousePositions:Array = [];
var conversion:Number = 180 / Math.PI;

init();
function init():void {
     drawBackground();
     line = new Shape();
     addChild(line);
     lineGraphics = line.graphics;
     stage.addEventListener(MouseEvent.CLICK, onClick);
}
     
function onClick(e:MouseEvent):void 
{
     clickSwitch = 1 - clickSwitch;
     mousePositions[clickSwitch] = new Point(mouseX, mouseY);
     if (clickSwitch == 0) {
          drawLine();
     }
     else {
          removeLine();
     }
}
     
function removeLine():void
{
     lineGraphics.clear();
     line.rotation = 0;
}
     
function drawLine():void
{
     lineGraphics.lineStyle(1, 0xff0000);
     lineGraphics.moveTo(0, 0);
     var dotDistance:Number = 2;
     var nextX:Number = dotDistance;
     while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
          lineGraphics.lineTo(nextX, 0);
          nextX += dotDistance;
          lineGraphics.moveTo(nextX, 0);
          nextX += dotDistance;
     }
     line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
     line.x = mousePositions[1].x;
     line.y = mousePositions[1].y;
}
     
function drawBackground():void
{
     var s:Shape = new Shape();
     var g:Graphics = s.graphics;
     g.beginFill(0xC0C0C0);
     g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
     g.endFill();
     addChild(s);
}

Class:

package 
{
     import flash.display.Graphics;
     import flash.display.Shape;
     import flash.display.Sprite;
     import flash.events.MouseEvent;
     import flash.geom.Point;

     public class DottedLine extends Sprite
     {
          private var line:Shape;
          private var lineGraphics:Graphics;
          private var clickSwitch:int = 0;
          private var mousePositions:Array = [];
          private var conversion:Number = 180 / Math.PI;
          
          public function DottedLine() 
          {
               init();
          }
          
          private function init():void {
               drawBackground();
               line = new Shape();
               addChild(line);
               lineGraphics = line.graphics;
               stage.addEventListener(MouseEvent.CLICK, onClick);
          }
          
          private function onClick(e:MouseEvent):void 
          {
               clickSwitch = 1 - clickSwitch;
               mousePositions[clickSwitch] = new Point(mouseX, mouseY);
               if (clickSwitch == 0) drawLine();
               else removeLine();
          }
          
          private function removeLine():void
          {
               lineGraphics.clear();
               line.rotation = 0;
          }
          
          private function drawLine():void
          {
               lineGraphics.lineStyle(1, 0xff0000);
               lineGraphics.moveTo(0, 0);
               var dotDistance:Number = 2;
               var nextX:Number = dotDistance;
               while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
                    lineGraphics.lineTo(nextX, 0);
                    nextX += dotDistance;
                    lineGraphics.moveTo(nextX, 0);
                    nextX += dotDistance;
               }
               line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
               line.x = mousePositions[1].x;
               line.y = mousePositions[1].y;
          }
          
          private function drawBackground():void
          {
               var s:Shape = new Shape();
               var g:Graphics = s.graphics;
               g.beginFill(0xC0C0C0);
               g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
               g.endFill();
               addChild(s);
          }
          
     }

}
Translate
kglad
Community Expert
kgladCommunity Expert
Community Expert
February 20, 2011

lol.  holy cow andrei, that's a lot of code for not that much of a task.   the following allows you to specify the length of the dash and the length of the space between dashes and colors and doesn't take that much code:

function drawF(sp:Sprite,p1:Point,p2:Point,dotLen:int,spaceLen:int,col:Number):void {
    var moveToPt:Point = p1;
    with (sp.graphics) {
        lineStyle(0,col,1);
        moveTo(moveToPt.x,moveToPt.y);
    }
    var difY:Number = (p1.y-p2.y);
    var difX:Number = (p1.x-p2.x);
    var distance:Number = Math.sqrt(difX*difX+difY*difY);
    var angle:Number = 180*Math.atan(difY/difX)/Math.PI;
    var dotLenX:Number=Math.cos(angle)*dotLen;
    var dotLenY:Number=Math.sin(angle)*dotLen;
    var spaceLenX:Number=Math.cos(angle)*spaceLen;
    var spaceLenY:Number=Math.sin(angle)*spaceLen;
    var imax:int=distance/(dotLen+spaceLen);
    for (var i:int=1; i<imax; i++) {
        with (sp.graphics) {
            lineTo(moveToPt.x+dotLenX,moveToPt.y+dotLenY);
            moveToPt = new Point(moveToPt.x+dotLenX+spaceLenX,moveToPt.y+dotLenY+spaceLenY);
            moveTo(moveToPt.x,moveToPt.y);
        }
    }
}

Translate
Andrei1-bKoviI
Inspiring
February 20, 2011

kglad, unless I am missing something, my drawLine function is 6 lines less (can be 8 less) than drawF.

In addition, drawF:

1. has 10 viriables declarations,

2. requires 6 attributes

3. makes at least 19 math calculations 5 of which are trigs (heavy)

4. Has Point instantiation in for loop (!!!!)

In comparison, drawLine function

1. declares only 2 variables (can be zero if these two are not parametarized)

2. Doesn't require attributes

3. does only 4 calculation with 1 trigonometry method,

4. has no instantiations

Based on the above I still believe my drawLine is much more efficient (and shorter).

Also, I tried to plug in drawF and it doesn't draw line between two clicked point - angle is way off.

Translate
kglad
Community Expert
kgladCommunity Expert
Community Expert
February 19, 2011

you want the dotted line to be animated or just suddenly appear?


Translate
dhruba.omAuthor
Known Participant
February 20, 2011

I want multiple dotted line (animated)  on specific no. of points (say 10 points) if i click on the 1st one and then 2nd it draws a line from 1st to 2nd and then if I click 2nd(or any other given points) and then the next point it draws a new line(not removing the old one).  Thank you.

Translate
Andrei1-bKoviI
Inspiring
February 20, 2011

If lines shouldn't be removed - change onClick and drawLine functions to the following:

function onClick(e:MouseEvent):void {
     mousePositions.push(new Point(mouseX, mouseY));
     if (mousePositions.length > 1) {
          drawLine();
          mousePositions.shift();
     }
}

function drawLine():void {
     line = new Shape();
     addChild(line);
     lineGraphics = line.graphics;
     lineGraphics.lineStyle(1, 0xff0000);
     lineGraphics.moveTo(0, 0);
     var dotDistance:Number = 2;
     var nextX:Number = dotDistance;
     while (line.width < Point.distance(mousePositions[0], mousePositions[1])) {
          lineGraphics.lineTo(nextX, 0);
          nextX += dotDistance;
          lineGraphics.moveTo(nextX, 0);
          nextX += dotDistance;
     }
     line.rotation =  conversion * Math.atan2(mousePositions[0].y - mousePositions[1].y, mousePositions[0].x - mousePositions[1].x);
     line.x = mousePositions[1].x;
     line.y = mousePositions[1].y;
}

If you want lines to be animated - it is possible but you need to specify what animation you need - lines going from one point to another, dots to be animated or something else. In any case it is a separate question and a new topic should be created.

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices