Like this (three transition equations shown here):
The code:
public function animateLine(e:MouseEvent){ var easeType:String = e.target.label; addEventListener(Event.ENTER_FRAME, drawLine); lineLength = 0; //the ease outs work much better here Tweener.addTween( this, { lineLength:stage.stageWidth, time:2, transition:easeType, onComplete:this.removeEventListener, onCompleteParams:[Event.ENTER_FRAME, drawLine] } ); } public function drawLine(e:Event){ line.graphics.clear(); line.graphics.lineStyle(0, 0xff0000); line.graphics.lineTo(lineLength, 0); line.x = (stage.stageWidth - line.width)/2; }
The animateLine function first sets up an enterFrame event listener. This event listener (drawLine) will redraw a line each time it is called using the variable lineLength for the length of the line.
Next we use Tweener.addTween to update the value of lineLength. So the value of lineLength is now changing based on a transition equation over time. Tweener.addTween also allows you to set a callback function (and the arguments). So I used this feature to call the removeEventListener function when lineLength has finished tweening.
Click here to download full source.