# How to add a parameter to control the speed of drawing?

**URL:** <https://forum.kirupa.com/t/how-to-add-a-parameter-to-control-the-speed-of-drawing/324774>\
**Category:** flash\
**Created:** [September 8, 2011, 5:49am UTC](https://forum.kirupa.com/t/how-to-add-a-parameter-to-control-the-speed-of-drawing/324774 "2011-09-08T05:49:31Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![learner\_7n](https://avatars.discourse-cdn.com/v4/letter/l/b2d939/32.png) [@learner\_7n](https://forum.kirupa.com/u/learner_7n)\
**Post date:** [September 8, 2011, 5:49am UTC](https://forum.kirupa.com/t/how-to-add-a-parameter-to-control-the-speed-of-drawing/324774/1 "2011-09-08T05:49:31Z")

</div>

Hi,

Now it draws a square with normal speed but I would like to customize the speed. How to add a parameter to control the speed of drawing?

```auto
import com.greensock.*;
import flash.events.MouseEvent;

//create line
var line:Shape = new Shape();
addChild(line);

//position mc1 at first point
mc1.x = p1.x;
mc1.y = p1.y;

var tl:TimelineMax = new TimelineMax({paused:true,onUpdate:drawLine});

tl.appendMultiple([
TweenLite.to(mc1, 1, {x:p2.x, y:p2.y}),
TweenLite.to(mc1, 1, {x:p3.x, y:p3.y}),
TweenLite.to(mc1, 1, {x:p4.x, y:p4.y}),
TweenLite.to(mc1, 1, {x:p1.x, y:p1.y})
], 0, TweenAlign.SEQUENCE);

function drawLine():void
{
    line.graphics.lineTo(mc1.x, mc1.y);
}

playTl(null);
function playTl(e:MouseEvent):void

/*Play_btn.addEventListener(MouseEvent.CLICK, playTl);
function playTl(e:MouseEvent):void
*/
{
    //kill existing line
    line.graphics.clear();
    
    //start new line at first point
    line.graphics.lineStyle(5, 0x660000, 1);
    line.graphics.moveTo(p1.x, p1.y);
    
    tl.restart();
}

```

Thanks in advance for any help.