Hier geht es darum , dass die Funktion per Buttonklick gestartet wird.
In den Download Beispielen / graphic / graphicAni/ setInterval werden verschiedene Kurven auf Buttonklick erzeugt und das Script wird optimiert.
Im weiteren Verlauf kommt eine gesteuerte Geschwindigkeit hinzu.
//eine neue Instanz von Hallo wird erzeugt //darin befindet sich der Movieclip mov_mc //er ist animiert und läuft an der Linie entlang var linie = new lib.Hallo(); this.addChild(linie); linie.stop(); var g = new createjs.Graphics(); g.setStrokeStyle(3); g.beginStroke("#000"); g.moveTo(linie.mov_mc.x, linie.mov_mc.y); g.lineTo(linie.mov_mc.x, linie.mov_mc.y); g.beginStroke("rgba(1, 1, 255, 1)"); var shape = new createjs.Shape(g); shape.x = 100; shape.y = 200; this.addChild(shape); this.start_btn.addEventListener("click", startCurve.bind(this)); function drawing() { if (linie.currentFrame == 0) { shape.graphics.clear(); //Wiederholung von Zeile 11 bis 15 g.setStrokeStyle(3); g.beginStroke("rgba(30,0,190,1)"); g.moveTo(linie.mov_mc.x, linie.mov_mc.y); g.lineTo(linie.mov_mc.x, linie.mov_mc.y); g.beginStroke("rgba(1, 1, 255, 1)"); } else { g.lineTo(linie.mov_mc.x, linie.mov_mc.y); this.addChild(shape); } } function startCurve() { linie.play(); this.addEventListener("tick", drawing.bind(this)); }