Applying a color gradient in a string using ActionScript 3 / Flash

Question

I am trying to build a string dynamically, with a start and end gradient. I want to avoid using a GradientBox since the strings are dynamic. All I want to do is start the red line by ending the blue. This code does not work: (

myLine = new Shape(); myLine.graphics.lineStyle(2); myLine.graphics.lineGradientStyle(GradientType.LINEAR, [0x0000FF, 0xFF0000], [1, 1], [0, 255]); myLine.graphics.moveTo(itemPoint[i].x, itemPoint[i].y); // Dynamic myLine.graphics.lineTo(itemPoint[j].x, itemPoint[j].y); // Dynamic addChild(myLine); 

Thanks!

Answer 1

You need to use a matrix to determine how large the gradient area is and in which direction it should be colored. Try something in this direction:

 // Get dimensions (absolute) var d : Point = itemPoint[j].subtract(itemPoint[i]); dx = Math.abs(dx); dy = Math.abs(dy); // Create gradient box matrix var mtx : Matrix = new Matrix; mtx.createGradientBox(dx, dy, Math.atan2(dy, dx), itemPoint[j].x, itemPoint[j].y); myLine.graphics.lineStyle(2); myLine.graphics.lineGradientStyle(GradientType.LINEAR, [0x0000ff, 0xff0000], [1,1], [0, 0xff], mtx); myLine.graphics.moveTo(itemPoint[i].x, itemPoint[i].y); myLine.graphics.lineTo(itemPoint[j].x, itemPoint[j].y); 

Basically this will create a gradient rectangle that will have the same width and height as the bounding rectangle of the line you will create. It also needs to rotate the gradient according to the angle between two points to make sure that the gradient works from one point to another.

Answer 2

Richard's answer seems very plausible, unfortunately, this did not work for me (the gradient did not rotate with the line).

So, I looked for the length and width of the earth, looking for a line for plotting a function from point A to B with a gradient. One person helped me, and now I can share with you respected Syrian knights the answer to all questions:

 // I eliminated most of the variables in order to optimize it // mtx is matrix, gfx is Graphics public function LineGradient( pt1 : FlxPoint, pt2 : FlxPoint ) : void { var ox : Number = Math.min( pt1.x, pt2.x); var oy : Number = Math.min( pt1.y, pt2.y); mtx.createGradientBox(Math.abs( pt2.x - pt1.x ), Math.abs( pt2.y - pt1.y ), Math.atan2( pt2.y - pt1.y, pt2.x - pt1.x ), ox, oy ); gfx.lineStyle( thickness, color, alpha); gfx.lineGradientStyle(GradientType.LINEAR, [0xff0000, 0x0000ff], [0, 1], [0, 255], mtx); gfx.moveTo( pt1.x, pt1.y ); gfx.lineTo( pt2.x, pt2.y ); } 

Flash will not die now.

Answer 3

Basically, the fork from richardolsson answers, but this is a more general form for people who want to achieve this in general and corrects the error if your line goes straight down (i.e., the start and end points have the same x). The function will be autonomous.

 //import flash.geom.Point; //import flash.display.Shape; var sp:Point=new Point(10,10); //some starting point - can be anywhere var ep:Point=new Point(250,250);// some end point - can be anywhere var myLine:Shape=gradientLine(sp,ep,0xFF0000,0x0000FF,0x00FF00,0xFFFF00); // put in as many colours as you want, the function will evenly space them out addChild(myLine); function gradientLine(startPoint:Point,endPoint:Point,...colours):Shape /*GRADIENT LINE - returns a line from startPoint to endPoint with even gradient of colours*/ { /*Create matrix - gradient box*/ var d:Point=startPoint.subtract(endPoint); dx=Math.abs(dx); dy=Math.abs(dy); if(dx==0)dx=1; /*corrects for lines going straight down*/ var matrix:Matrix=new Matrix; matrix.createGradientBox(dx,dy,Math.atan2(dy,dx),startPoint.x,startPoint.y); /*Create/populate array of ratios and alphas*/ var l:int=colours.length; var alphas:Array=new Array(); var ratios:Array=new Array(); for(var i:int=0;i<l;i++) { alphas.push(1); ratios.push((0xFF/l)*i+1); /*evenly spreads ratios of chosen colours*/ } /*Create shape*/ var s:Shape=new Shape; s.graphics.lineStyle(2); s.graphics.lineGradientStyle(GradientType.LINEAR,colours,alphas,ratios,matrix); s.graphics.moveTo(startPoint.x,startPoint.y); s.graphics.lineTo(endPoint.x,endPoint.y); return(s); }