Tri color gradient issue

[Anonymous859]

Hi,

I am trying to build an application where tricolor gradient is used but i found abrut change in the color. But there is smothness in the case of 2 color gradient. So please help me out to create an tri color gradient with the smothnes of all three color.

Note: In image you can see a strip of yellow,green and black color.I want, there is smothness when two color intercept

[Andrei1-bKoviI]

Show the code.

What are the ratios?

[Anonymous859]

ratio[0,170,225];

Thanks for reply!!!!!

[Andrei1-bKoviI]

Off the top of my head you, perhaps, need to change dimensions of matrix gradient box to accommodate rotation. Its width and height should increase proportionate to rotation.

[Anonymous859]

This is my code for tri color gradient i think it help u more..

var rect:Shape=new Shape();
this.addChild(rect)
rect.x=10
rect.y=0
var rectWidth:Number=1000;
var rectHeight:Number=750;
var mat:Matrix;
var colors:Array;
var alphas:Array;
var ratios:Array;
mat=new Matrix();
colors=[0x000000,0xF0DC31,0x2C6D38];
alphas=[1,1,1];
ratios=[0,125,255];
mat.createGradientBox(rectWidth,rectHeight,toRad(-45));
rect.graphics.lineStyle();
rect.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,mat);
rect.graphics.drawRect(0,0,rectWidth,rectHeight);
rect.graphics.endFill();
   
function toRad(a:Number):Number
{
    return a*Math.PI/180;   
}

Thank You !!!!!!!!!!

[Andrei1-bKoviI]

Try something like:

var angle:Number = -45;
var radians:Number = toRad( -45);

var boxWidth:Number = rectHeight * Math.sin(radians) + rectWidth * Math.cos(radians);
var boxHeight:Number = rectHeight * Math.cos(radians) + rectWidth * Math.sin(radians);

mat.createGradientBox(boxWidth, boxHeight, radians);

You may need to adjust Matrix tx and ty too.

[Anonymous859]

Thanks for reply but this thing give me same output like my code. I tried to adjust tx and ty value but due to that black color increase.

var rect:Shape=new Shape();
this.addChild(rect)
rect.x=100
rect.y=300
var rectWidth:Number=1000;
var rectHeight:Number=750;

var mat:Matrix;
var colors:Array;
var alphas:Array;
var ratios:Array;

mat=new Matrix();
colors=[0x000000,0xF0DC31,0x2C6D38];
alphas=[1,1,1];
ratios=[0,125,255];
var angle:Number = -45;

var radians:Number = toRad( -45);

var boxWidth:Number = rectHeight * Math.sin(radians) + rectWidth * Math.cos(radians);
var boxHeight:Number = rectHeight * Math.cos(radians) + rectWidth * Math.sin(radians);
trace(boxWidth+":"+boxHeight)

mat.createGradientBox(boxWidth,boxHeight,radians);
rect.graphics.lineStyle();
rect.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,mat)
rect.graphics.drawRect(0,0,boxWidth,boxHeight);
rect.graphics.endFill();
   
function toRad(a:Number):Number
{
    return a*Math.PI/180;   
}