AS3: beginGradientFIll() doesn't make me a gradient!

Question

I'm trying to render a circle with a radial gradient but I can't seem to figure it out.

var bkgdGrad:Shape = new Shape();
bkgdGrad.graphics.beginGradientFill(GradientType.RADIAL, [0x0000FF, 0x00FF00], [1, 1], [0, 255],null,"pad");
bkgdGrad.graphics.drawCircle(0,0,r+200);
bkgdGrad.graphics.endFill();
this.addChild(bkgdGrad);

The above code renders a solid green circle for me. If I change the array after the colors to [1,0] (the alpha array) I get a transparent fill. I can't seem to get flash to draw a radial gradient, the above works no problem for GradientType.LINEAR

Answer 1

Try this, it may be this will help you:

package  
{  
    import flash.display.Sprite;  
    import flash.display.GradientType;  
    import flash.geom.Matrix;  

    public class RadialGradient extends Sprite  
    {  
        private var gType:String;  
        private var matrix:Matrix;  

        private var bound:Sprite;  

        public function RadialGradient()  
        {  
            var gType:String = GradientType.RADIAL;  

            var matrix:Matrix = new Matrix();  
            matrix.createGradientBox(550,400,0,0,0);  

            var gColors:Array = [0x0000FF, 0x00FF00];  
            var gAlphas:Array = [1,1];  
            var gRatio:Array = [0,255];  

            var bound:Sprite = new Sprite();  
            bound.graphics.beginGradientFill(gType,gColors,gAlphas,gRatio,matrix);  
            bound.graphics.drawCircle(0,0,r+200);
            bound.x = bound.y = 0;  
            addChild(bound);  
        }  
    }  
}  

Answer 2

You need a Matrix object as well as its createGradientBox() method.

I've made a class called RadialGraident that creates a Shape object with a circle that has a radial gradient. All you need to do is parse the radius, colors, alphas and ratios upon creating the object like in the following example:

package 
{
    import flash.display.Sprite;
    import flash.events.Event;

    public class Main extends Sprite 
    {
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);

        }// end function

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            var radialGradient:RadialGradient = new RadialGradient(200, [0x0000FF, 0x00FF00], [1, 1], [0, 255]);
            addChild(radialGradient);

        }// end function

    }// end class

}// end package

import flash.display.GradientType;
import flash.display.Shape;
import flash.geom.Matrix;

internal class RadialGradient extends Shape
{   
    public function RadialGradient(radius:Number, colors:Array, alphas:Array, ratios:Array)
    {
        var matrix:Matrix = new Matrix();
        matrix.createGradientBox(radius * 2, radius * 2);
        graphics.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, matrix);
        graphics.drawCircle(radius, radius, radius);
        graphics.endFill();

    }// end function

}// end class

Answer 3

create a gradient box with a new Matrix object and assign the new matrix object to your beginGradientFill matrix parameter:

flash.geom.Matrix.createGradientBox()

---

[EDIT]: here's a simple online tutorial that should help explain more:

Drawing Gradients Programatically in AS3