Make an object snap to another ojbect, then follow its path with pure ActionScript?

Question

I am still trying to come to grips with how make an object snap to another ojbect, then follow its path with pure ActionScript (snap an arrow oject to a circle, then the circle follows the direct of the arrow when play button in hit).

Can somebody please help me with an small example so I can get my head round it, any help will be much appreciated. I am trying to create an application aimed towards something like this

   http://itunes.apple.com/us/app/basketball-coachs-clipboard/id317785081?mt=8

I have got my drawing line working but do now know how to make the object follow the line, here is how I have drawn my line on the stage. Please could you give me a clue of how to do this.

   function startPencilTool(e:MouseEvent):void
    {

    pencilDraw = new Shape(); 
    board.addChild(pencilDraw); 

    pencilDraw.graphics.moveTo(mouseX, mouseY); 
    pencilDraw.graphics.lineStyle(shapeSize.width);
   board.addEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool); 
   }

 function drawPencilTool(e:MouseEvent):void
 {
 pencilDraw.graphics.lineTo(mouseX, mouseY); /
 }

 function stopPencilTool(e:MouseEvent):void
 {
 board.removeEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool); 
 }

Answer 1

1st

If you mean by "following its path", that the object follows another object, then simply do

obj2.x = obj1.x;
obj2.y = obj1.y;

to follow the exact coordinates. If you want to make some distance between them, then

obj2.x = obj1.x + dx;
obj2.y = obj1.y + dy;

choose dx and dy according to your wish.

2nd

If you want to make an app, where you can "draw an arrow" or "draw a path" and then an object should follow it, then you can try to store the coordinates of the mouse, while "drawing the arrow", then snap the object you want to these coordinates.

var coordinates:Array = [];

stage.addEventListener("mouseDown", md);

function md(evt:*):void
{
    //empty the coordinates
    coordinates = [];

    //add listener when mouse is released
    stage.addEventListener("mouseUp", mu);

    //add a listener for enterframe to record the mouse's motion
    addEventListener("enterFrame", recordMouse);
}

function mu(evt:*):void
{
    stage.removeEventListener("mouseUp", mu);
    removeEventListener("enterFrame", recordMouse);

    //snap the object to the drawn line and play it
    addEventListener("enterFrame", playRecording);
}

function recordMouse(evt:*):void
{
    coordinates.push(new Point(stage.mouseX, stage.mouseY));
}

function playRecording(evt:*):void
{
    //snap object to the recorded coordinates
    myObject.x = coordinates[0].x;
    myObject.y = coordinates[0].y;

    //delete first element of array
    coordinates.splice(0, 1);

    //stop playing if there are no more points
    if(coordinates.length == 0) removeEventListener("enterFrame", playRecording);
}

Place a movieclip on the stage and name it myObject. Then add the code and compile the swf.

Also, while "recoring" the coordinates, you can also draw some lines.

Change md function to this:

function md(evt:*):void
{
    //empty the coordinates
    coordinates = [];

    //add listener when mouse is released
    stage.addEventListener("mouseUp", mu);

    //add a listener for enterframe to record the mouse's motion
    addEventListener("enterFrame", recordMouse);

    //clear graphics, and initialize line
    with(graphics) clear(), lineStyle(1, 0xff0000), moveTo(stage.mouseX, stage.mouseY);
}

and recordmouse to this.

function recordMouse(evt:*):void
{
    coordinates.push(new Point(stage.mouseX, stage.mouseY));

    //draw the line
    with(graphics) lineTo(stage.mouseX, stage.mouseY);
}

3rd

If you want to follow a pre-drawn line, then you have several options depending on your task. But everything depends on, how you exactly want to "snap" your object.