制作圆圈出现在AS3中从A点移动到B点的对象后面

时间:2017-05-18 09:00:32

标签: actionscript-3 flash shape

我已经在AS3中获得了这条代码,让船从a点移动到点B ..等等

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)

我想在船后添加一些圆圈(就像地图上的路径一样)。

我已尝试使用线条,但它并不适合(因为它会立即出现,当然,它不是圆圈)。

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); 

您知道我如何添加从lastClickevent.currentTarget的圈子? (video of an example here)

1 个答案:

答案 0 :(得分:0)

由于您正在使用补间,因此您可以在补间更新时绘制您的积分。如果您直接在时间轴上编写代码,则可能需要从函数中删除“私有”:

// 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));
}

我强烈建议你切换到TweenLite进行补间动作 - 它很容易插入,你可以在一行中完成所有这些并且不必搞乱事件监听器和东西那样:

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

另外它可以做很多其他的东西,比如bezier曲线,反向等等。一旦你习惯了它,你会问自己以前没有它的生活方式:)