Animating gradient displays line artifacts in ActionScript
        Posted  
        
            by TheDarkIn1978
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by TheDarkIn1978
        
        
        
        Published on 2010-04-05T23:18:59Z
        Indexed on 
            2010/04/05
            23:23 UTC
        
        
        Read the original article
        Hit count: 400
        
i've programatically created a simple gradient (blue to red) sprite rect using my own basic class called GradientRect, but moving or animation the sprite exhibits line artifacts. when the sprite is rotating, it kind of resembles bad reception of an old television set.
i'm almost certain the cause is because each line slice of the gradient is vector so there are gaps between the lines - this is visible when the sprite is zoomed in.
var colorPickerRect:GradientRect = new GradientRect(200, 200, 0x0000FF, 0xFF0000);
addChild(colorPickerRect);
colorPickerRect.cacheAsBitmap = true;
colorPickerRect.x = colorPickerRect.y = 100;
colorPickerRect.addEventListener(Event.ENTER_FRAME, rotate);
function rotate(evt:Event):void
    {
    evt.target.rotation += 1;
    }
________________________
//CLASS PACKAGE
package
{   
import flash.display.CapsStyle;
import flash.display.GradientType;
import flash.display.LineScaleMode;
import flash.display.Sprite;
import flash.geom.Matrix;
public class GradientRect extends Sprite
    {
    public function GradientRect(gradientRectWidth:Number, gradientRectHeight:Number, ...leftToRightColors)
        {
        init(gradientRectWidth, gradientRectHeight, leftToRightColors);
        }
    private function init(gradientRectWidth:Number, gradientRectHeight:Number, leftToRightColors:Array):void
        {
        var leftToRightAlphas:Array = new Array();
        var leftToRightRatios:Array = new Array();
        var leftToRightPartition:Number = 255 / (leftToRightColors.length - 1);
        var pixelColor:Number;
        var i:int;      
        //Push arrays
        for (i = 0; i < leftToRightColors.length; i++)
            {
            leftToRightAlphas.push(1);
            leftToRightRatios.push(i * leftToRightPartition);
            }
        //Graphics matrix and lineStyle
        var leftToRightColorsMatrix:Matrix = new Matrix();
        leftToRightColorsMatrix.createGradientBox(gradientRectWidth, 1);
        graphics.lineStyle(1, 0, 1, false, LineScaleMode.NONE, CapsStyle.NONE);
        for (i = 0; i < gradientRectWidth; i++)
            {
            graphics.lineGradientStyle(GradientType.LINEAR, leftToRightColors, leftToRightAlphas, leftToRightRatios, leftToRightColorsMatrix);
            graphics.moveTo(i, 0);
            graphics.lineTo(i, gradientRectHeight);
            }
        }
    }
}
how can i solve this problem?
© Stack Overflow or respective owner