Making circle appears behind object that's moving from Point A to Point B in AS3

Question

I've got this code in AS3 that's making a boat moves from pointA to point B..etc

tween = new Tween(boat, "x", None.easeNone, boat.x, lastClick.x, 1, true); 
tweenY = new Tween(boat, "y", None.easeNone, boat.y, lastClick.y, 1, true); 

(video here)

I'd like to add some circle appearing behind the boat (like a path on a map).

I've tried with lines but it doesn't suits very well (as it appears instantly and, of course, it's not circle).

my_shape.graphics.moveTo(lastClick.x, lastClick.y); 
my_shape.graphics.lineTo(event.currentTarget.x, event.currentTarget.y); 
my_shape.graphics.lineTo(event.currentTarget.x, event.currentTarget.y); 

Do you know how could I add some circle going from lastClick to event.currentTarget ? (video of an example here)

Answer 1

Since you are using tweens you could draw your points when your tween updates. If you are writing your code directly on the timeline you might need to remove "private" from the functions:

// draw a point every X pixels
private var DISTANCE_BETWEEN_POINTS:int = 20;
private var pointsArray:Array = [];
private var lastPoint:Point;

tween = new Tween(boat, "x", null, boat.x, lastClick.x, 1, true);
tween.addEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate);
tween.addEventListener(TweenEvent.MOTION_FINISH, onTweenEnd);

tweenY = new Tween(boat, "y", null, boat.y, lastClick.y, 1, true);
tweenY.addEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate);
tweenY.addEventListener(TweenEvent.MOTION_FINISH, onTweenEnd);

// for the start we assume the last drawn point was at the boat origin
lastPoint = new Point(boat.x, boat.y);    

// called on every tween update
private function onTweenUpdate(e:TweenEvent):void
{
    // draw a point if the distance to the last point is greater than DISTANCE_BETWEEN_POINTS
    if (distance(lastPoint.x, lastPoint.x, boat.y, lastPoint.y) > DISTANCE_BETWEEN_POINTS)
    {
        // pseudocode here. Add your points as movieclips or just draw circles
        // you might adjust the point position as this will draw a point over the boat.
        // you might want to add a layer where you draw points that will be under your boat
        var point:MovieClip = new PointMC();
        point.x = boat.x;
        point.y = boat.y;
        addChild(point);

        // remember the last drawn point position for the next one
        lastPoint = new Point(boat.x, boat.y);

        // add point to array so we can remove them when the tween is done
        pointsArray.push(point);
    }
}

// called when a tween ends
// remove event listeners so your tweens can be garbage collected
private function onTweenEnd(e:TweenEvent):void
{
    tween.removeEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate);
    tween.removeEventListener(TweenEvent.MOTION_FINISH, onTweenEnd);
    tweenY.removeEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate);
    tweenY.removeEventListener(TweenEvent.MOTION_FINISH, onTweenEnd);

    removePoints();
}

private function removePoints():void
{
    for (var i:int = 0; i < pointsArray.length; i++)
    {
        removeChild(pointsArray[i]);
    }

    pointsArray = [];
}

// measures the distance between two points
private function distance(x1:Number, x2:Number, y1:Number, y2:Number):Number
{
    var dx:Number = x1 - x2;
    var dy:Number = y1 - y2;
    return Math.abs(Math.sqrt(dx * dx + dy * dy));
}

I would strongly advise you to switch to the TweenLite for the tween movements - it is very easy to plug in and you can do all of this in one line and dont have to mess up with event listeners and stuff like that:

// move the boat to x and y in one go - DONE :)
TweenLite.to(boat, 1, {x: lastClick.x, y: lastClick.y, onUpdate: onTweenUpdate});

Plus it can do tons of other stuff like bezier curves, reverse etc. Once you get used to it you will ask yourself how you lived without it before :)