4 Replies Latest reply on Nov 8, 2007 2:20 PM by Greg Dove

# Trying to make sense of AS2 gradient fill matrices

This one will likely interest kglad, but I'm all ears for insight from
anyone who digs math.

I've been working with gradient fills lately in AS2, which means I've
been reading through related entries in the ActionScript 2.0 Language
Reference. Here's a quick example right out of the docs (slightly revised
to boil it down to the essentials). The Drawing API draws a square and
fills it with a linear gradient that goes from red (upper left) to blue
(lower right).

colors = [0xFF0000, 0x0000FF];
fillType = "linear";
alphas = [100, 100];
ratios = [0, 0xFF];
matrix = {matrixType:"box", x:100, y:100, w:200, h:200,
r:(45/180)*Math.PI};
moveTo(100,100);
lineTo(100,300);
lineTo(300,300);
lineTo(300,100);
lineTo(100,100);
endFill();
}

The point of interest, to me, is that generic Object instance, matrix,
with properies x, y, w, h, r, and matrixType. The x and y are for position
and correspond to the moveTo(100,100) call. The w and h represent width and
height. The r is rotation in radians. The matrixType is arbitrary (I
guess), because the same matrix can be used for a radial gradient -- never
mind that for now.

The properties shown, arbitrary or not, are the ones demonstrated in the
docs. That snippet does draw a 45deg red to blue gradient.

The docs recommend a slightly different approach for Flash Payer 8 and
higher; namely, the native Matrix class. Everything in the above sample
remains except that the existing matrix line changes to these two lines:

matrix = new Matrix();
matrix.createGradientBox(200, 200, (45/180)*Math.PI, 100, 100);

Pretty obvious to see where they overlap. The matrixType property is
gone, but hey ... everything works, so I'm not going to go looking for
trouble.

Here's the punch line. The docs *also* show an alternative Object
approach, one in which the properties describe a 3x3 matrix whose properties
are a, b, c, d, e, f, g, h, and i. After toying with this a-through-i
example, I noticed a pattern in the values: c, f, and i are 0, 0, and 1
respectively. That seems to correspond to the conventional graphics matrix
...

a b u
c d v
tx ty w

... where u, v, and x are 0, 0, and 1. Seems fairly clear that tx and ty
would correspond to x and y. After tracing the properties of the matrix
variable (after the createGradientBox() call) it seemed reasonable to me to
make the following mapping:

a:a b:b c:0
d:c e:d f:0
g:tx g:ty i:1

... which led me to replace the original matrix declaration with this (back
to a single line):

matrix = {
a:0.086316745750311,
b:0.086316745750311,
c:0,
d:-0.086316745750311,
e:0.086316745750311,
f:0,
g:200,
h:200,
i:1
};

Those values, by the way, come from my tracing the properties of this
...

matrix.createGradientBox(200, 200, (45/180)*Math.PI, 100, 100);

The weird part is, that still gives a 45deg angled gradient, but it's
super-heavily banded. Not really a gradient at all, but more like four
colored stripes -- red, blue, red, blue -- from upper left to lower right.

Can anyone explain to me why?

David Stiller
Dev blog, http://www.quip.net/blog/
"Luck is the residue of good design."

• ###### 1. Trying to make sense of AS2 gradient fill matrices
I don't know the answer and I'm no math wizard. At least not any more anyway.

Every tutorial out there seems to shy away from the 3x3 matrix option.
I went back in time a little. There's a side by side example of the two older matrix approaches here:

It didn't really help me figure out the answer. But perhaps it will help you investigate further.
• ###### 2. Re: Trying to make sense of AS2 gradient fill matrices
I couldn't leave it alone. I came back to it.

matrix = { a:200, b:-100, c:0, d:-100, e:200, f:0, g:200, h:200, i:1 };

gets close, but its still not quite right. I think the difference here is that skew is expressed differently.

I found a better explanation here:
http://www.flashdevils.com/tutorials.php?id=142

quote:

{ a:xxx, b:xxx, c:xxx, d:xxx, e:xxx, f:xxx, g:xxx, h:xxx, i:xxx }
where the different letters can also be its uppercase equivalent, but no other name. The order can be different, but a and e affect the width & height of the gradient respectively, g & h represent the centerpoint of the gradient, b & d affect the horizontal & vertical skew of the gradient respectively and c, f & i have no effect as far as I can tell on the final gradient.

[I would be inclined to use the other approaches if I could get away with it.]
• ###### 3. Re: Trying to make sense of AS2 gradient fill matrices
GWD,

> I couldn't leave it alone. I came back to it.

Ha! I know that feeling. :)

> matrix = { a:200, b:-100, c:0, d:-100, e:200, f:0, g:200, h:200, i:1 };
>
> gets close, but its still not quite right. I think the difference here is
> that skew is expressed differently.

That makes sense. And yes, that comes pretty close.

> I found a better explanation here:
> http://www.flashdevils.com/tutorials.php?id=142

Thanks, GWD! That helps a lot.

> [I would be inclined to use the other approaches if I could get
> away with it.]

Yeah, I definitely agree. I find it odd that the docs even mention it,
but since they do, I found myself elbow deep in wondering why. Thanks for
input!

David Stiller