Matrix for gradient fill
by ericlin

It is relatively easy to guess what are colors, ratio and alphas. But, many get headache about the matrix. There are two types of matrix. One is box type the other is 3x3 affine transformation matrix.

Before I discuss what those fields are, I should warn you that, knowing is one thing, to apply it is another story. It is easy to create a matrix without shearing or skew. To handle the detail of sheared or skewed gradient fill is no easy thing.

Radial gradient and lineal gradient fill adopt the same matrix. Here I will demonstrate only lineal gradient fill. The detail is nearly the same for radial gradient fill.

I will start from the "box" type of matrix. It seems easier to catch.

Box type Matrix

The box type Matrix contains 5 fields: x,y,w,h and r. One thing puzzles me for long. For lineal gradient, we can figure out easily what "w" is. But why there is "h" for lineal fill ?

In Flash authorizing enviroment, we can set x,y by moving the center point. We can dragging the width. We can rotate the gradient. There is no "height" controller.

In photoshop, we press our mouse to set x,y then drag an arrow for rotation and width. No "height" setting for lineal gradient fill. So, what is height ?

Will setting the "h" value change anything ? Yes ! If we rotate the gradient fill.

Here is an swf demonstrate the Box type matrix.

The left half is an instance of symbol with gradient fill. I set its _x,_y,_rotation,_xscale and _yscale to mimick the Matrix. The right side is a 200x200 rectangle created by draw api : beginGradientFill adopting the matrix.

So, draw an imaginary circle covering the gradiaent fill you want. Then draw a rectangle suround that circle. There, you get x,y,w,h and r. It is a little difficult if we want a skew sheared rectangle.

The puzzling point is that, the x,y value is at the left upper corner. The rotation center is not there. The rotation center is at half the w and half the h.

The second point is that, we set r to rotate 30 degree, but the result seems angled 45 degree not 30 degree. That is because the w/h ratio is not 1. So, here is some skew effect complicating the rotation.

Box type Matrix is handy for drawing a rectangle with horizontal lineal gradient fill. However, when we need some "shearing" or "skewed" gradient fill, the relationship between w/h ratio and rotation is difficult to calculate.

Affine transformation Matrix

Lets see the 3x3 affine transformation matrix. There are 9 fields, named as a,b,c,d,e,f,g,h and i; I dont know all of them.  For each 3 fields, I know only the first two. I dont know what is c,f and i;

The matrix contained a skew transformation data. There are 3 points controlling the transformation. The pt0 - the center point. The pW - the point for end of horizontal (width) limb. pH - the point for end of vertical (height) limb.

a: pW.xOffset

b:pW.yOffset

d:pH.xOffset

e:pH.yOffset

g:p0.xOffset

h:p0.yOffset

See the movie:

The left side is created by instance of library symbol with gradient fill. Then I skew it according to a,b,d,e,g,h. The right side is a rectangle draw by beginGradientFill adopting the transformation matrix.

So, draw a circle that covers the gradient fill you want. Then draw a rectangle with horizontal and vertical limbs. There we get a,b,d,e,g and h from the corners of the rectangle. Note that, the g,h is the center of the circle not the left upper corner.

You see, it is relatively handy if we need to draw a shape with graidient fill. Note that, there is no "rotation" setting. We need not calculate the "rotation". We just pick the "corner" points of a transformed gradient fill.