How to draw smooth lines in actionscript 3 (Flash)

Question

How can I draw smooth lines with actionscript 3 (using flex 4)?

I mean: I do something like this:

        var grap:Graphics =  this.display.graphics;
        grap.lineStyle(8, 0xFF0000, 1, true, "normal", CapsStyle.ROUND);
        grap.moveTo(180,330);
        grap.lineTo(200,130);

But the result looks like this:
http://sub.ited.nl/try/ :(
The edges of the lines are very crispy, how can I improve this? Especially when drawing the line through a Tween, it looks like a drunken man walking on the sidewalks ;)...

The tween code for drawing the line:

        var grap:Graphics =  this.display.graphics;
        grap.lineStyle(8, 0xFF0000, 1, true, "normal", CapsStyle.ROUND);
        grap.moveTo(220,330);
        new Tween(this, [220, 330], [240, 130]);

And in the onTweenUpdate method:

        this.display.graphics.lineTo(values[0], values[1]);

Please some advice on this?

BTW: how can best remove the default background of the flash object ? (the grey background). I have this in my index.mxml:

    <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="600" 
addedToStage="start()" styleName="plain" backgroundImage="{null}">

But I see a flickering often (in development mode), which means I first see the default grey background and then a white one...

Thanks in advance

Answer 1

Is there any reason not to, in each iteration, blank out the line's progress so far and re-draw it? As in:

// inside tween update
displayObj.graphics.clear();
displayObj.graphics.moveTo(180,330);
displayObj.graphics.lineTo(values[0]);
// i.e. only the end point is tweened

In your current code you're actually drawing lots of individual lines, so anything you did to improve the smoothness would depend delicately on the internals of how Flash renders, so you're probably better off redrawing the whole line each frame.