javascripthtmlflashflash-cc

Flash cc + html 5: draw lines between moving objects


I'm an animator trying to branch into coding and I'm a bit stuck with fundamentals.

This is a simple character walk cycle, and I'm trying to draw the legs with code [arcTo] between the body [ManBody] and the feet [foot01].

The lines draw on and the body moves - but the lines are redrawn on EVERY frame - How/Where do I stage.update(); so that it's just a single line that draws on to the stage, and then moves between the moving parts?

//mouse cursor
stage.canvas.style.cursor = "none";
this.ManBody.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {
    this.ManBody.x = (stage.mouseX+350) * 0.5 ;
    this.ManBody.y = (stage.mouseY+200) * 0.5;
}

//line
createjs.Ticker.addEventListener("tick",fl_DrawLineCont.bind(this));
createjs.Ticker.setFPS(10);

function fl_DrawLineCont(event) {

var stroke_color = "#ff0000";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color)
.moveTo(this.ManBody.x, this.ManBody.y)
.arcTo(this.foot01.x, this.foot01.y, this.ManBody.x, this.ManBody.y, 50).endStroke());
this.addChild(shape);
    stage.update(event);
}

Solution

  • You creating shape every frame, you should create it outside of this and redraw it graphics like this:

    var stroke_color = "#ff0000";
    var graphics = new createjs.Graphics()
    var shape = new createjs.Shape(graphics);
    this.addChild(shape);
    function fl_DrawLineCont(event)
    {
        graphics.clear();
        graphics.beginStroke(stroke_color);
        graphics.moveTo(this.ManBody.x, this.ManBody.y).arcTo(this.foot01.x, this.foot01.y, this.ManBody.x, this.ManBody.y, 50).endStroke();
        stage.update(event);
    }