00:00
00:00

As: Api 3 Gradient Fills

3,335 Views | 25 Replies
New Topic Respond to this Topic

As: Api 3 Gradient Fills 2005-07-22 09:58:43


AS: Main

Hello, I found out that a lot of people who are very good with API are having trouble with gradient fills, so I figured I will make a small tutorial about it... here are links to the first 2 api tutorials by liam:

AS: API by -liam-
AS: API curves expended by -liam-

This is the third installation, and it will explain gradiants... first let's see what gradients are... I will only teach 2 color gradiants although I will explain how to add more...

Gradients are moves between one color or another (they have a mathematical meaning I'm not getting into)

I will use the command beginGradientFill, the rest you know from liam's stuff.
Gradient fills are terminated with endFill the same way normal fills are...

They have several elements:

fillType Either the string "linear" or the string "radial".
colors An array of RGB hex color values to be used in the gradient (for example, red is 0xFF0000, blue is 0x0000FF, and so on).
alphas An array of alpha values for the corresponding colors in the colors array; valid values are 0–100. If the value is less than 0, Flash uses 0. If the value is greater than 100, Flash uses 100.
ratios An array of color distribution ratios; valid values are 0–255. This value defines the percentage of the width where the color is sampled at 100 percent.

and the hardest part to most people is:
matrix A transformation matrix that is an object with either of the following two sets of properties.

a lot of people fail to understand that the matrix is just a predefined 2d array that can be easially manipulated, I don't blame them, the docs I've seen so far weren't too swell...

the syntax of the command itself is:

my_mc.beginGradientFill(fillType:String, colors:Array, alphas:Array, ratios:Array, matrix:Object):Void;

I'll explain this piece after piece... fillType is fairly easy since it's either "radial" or "linear" which is pretty self explanitory.

Colors is an array of colors the gradiant will go through... an example of such an array is:
[0xFF0000, 0x0000FF] it can also be [0xFF0000, 0x0000FF,0x444444] or any other similar combo, the order of the array is the order the colors will appear.

Alphas is pretty similar to colors, it is the alphas matching to the colors in the gradiant... if you don't want to use alphas just set em all to 100 as such
[100,100]

so
colors=[0xFF0000, 0x0000FF];
alphas=[100,100];

Rations is pretty simple as well, it is an array that states the point where the width will be at 100%, this allows you to move the center points of the color, if you don't want to move it you can just do
rations=[0,256];

this is so far pretty simple to you scripters ain't it? not much more difficult then entering some constant parameters (if it is ask questions freely).

The matrix

let's explain the distribution matrix now, it is the HARDEST part in gradient fills though it's not that hard once you get the concept.

a, b, c, d, e, f, g, h, i, this is your matrix, 9 values which really look as such :

a b c
d e f
g h i

you can play with those, however I seriusly DO NOT RECOMMAND TO DO SO... I use them but it took me a long time (about an hour or 2) of toying with it to understand it... you can do matrix type instead !
matrix = {matrixType:"box", x:100, y:100, w:200, h:200, r:(45/180)*Math.PI};

this allows you to set the x y width and height of the gradiant, as well as it's rotation (in radians), the matrix type is

this is the easiest way (a lot easier then an actual transformation matrix)

I hope this tutorial has been useful

comments please.

Response to As: Api 3 Gradient Fills 2005-07-22 10:03:52


Still dont really get the matrix thing I geuss I'll just leave it alone


- Matt, Rustyarcade.com

Response to As: Api 3 Gradient Fills 2005-07-22 10:04:46


At 7/22/05 10:03 AM, Ninja-Chicken wrote: Still dont really get the matrix thing I geuss I'll just leave it alone

read the tutorial, YOU DON'T HAVE TO USE IT!!!

Response to As: Api 3 Gradient Fills 2005-07-22 10:05:47


Nice tutorial, this'll be handy when I'll continue working on my ¥ game :P


ey

BBS Signature

Response to As: Api 3 Gradient Fills 2005-07-22 10:06:48


At 7/22/05 10:03 AM, SpamBurger wrote: Yay! I dont think I need this though since I suck with API. But, anyways, that was nice! And, wasnt the second API thread made by Glaiel_Gamer?

SORRY SORRY
SORRY SORRY
SORRY SORRY
SORRY SORRY
SORRY SORRY
SORRY SORRY
SORRY SORRY

sorry GG, won't happen again ;)

Response to As: Api 3 Gradient Fills 2005-07-22 10:19:33


At 7/22/05 10:06 AM, Inglor wrote:
At 7/22/05 10:03 AM, SpamBurger wrote: Yay! I dont think I need this though since I suck with API. But, anyways, that was nice! And, wasnt the second API thread made by Glaiel_Gamer?
SORRY SORRY
SORRY SORRY
SORRY SORRY
SORRY SORRY
SORRY SORRY
SORRY SORRY
SORRY SORRY

sorry GG, won't happen again ;)

It better not.....
jk

Response to As: Api 3 Gradient Fills 2005-07-23 13:49:51



- Matt, Rustyarcade.com

Response to As: Api 3 Gradient Fills 2005-08-24 12:13:40


Lol. I still don't get how this works. Can I see and example of a gradient fill? I've got

beginGradientFill("linear", [0xFFFFFF, 0x000000], [100,100], [0,256]);


These new signatures can suck on mah balls. My lolis don't fit in. Lol wut what are you guys still doing on NG, move on.

BBS Signature

Response to As: Api 3 Gradient Fills 2005-08-24 12:28:46


Lol. I get it now. Matrix isnt too hard to understand, I don't plan on using it that much though.


These new signatures can suck on mah balls. My lolis don't fit in. Lol wut what are you guys still doing on NG, move on.

BBS Signature

Response to As: Api 3 Gradient Fills 2006-01-05 11:34:02


Bleh, doesn't work...

Response to As: Api 3 Gradient Fills 2006-11-04 19:00:42


I'm just wondering, if anyone is still here that is, how do you make either a line that has a Gradient Fill or how do you make a circle with API?


MY E-PENIS IS BIGGER THAN YOURS

8=================================>

...and this is my fag...

BBS Signature

Response to As: Api 3 Gradient Fills 2006-11-06 05:47:33


The circle question would have been better off in another API thread, but anyway, here is the code Flade uses for making circles (Flade is under GNU license):

function paintCircle (dmc:MovieClip, x:Number, y:Number, r:Number):Void {

var mtp8r:Number = Math.tan(Math.PI/8) * r;
var msp4r:Number = Math.sin(Math.PI/4) * r;

with (dmc) {
moveTo(x + r, y);
curveTo(r + x, mtp8r + y, msp4r + x, msp4r + y);
curveTo(mtp8r + x, r + y, x, r + y);
curveTo(-mtp8r + x, r + y, -msp4r + x, msp4r + y);
curveTo(-r + x, mtp8r + y, -r + x, y);
curveTo(-r + x, -mtp8r + y, -msp4r + x, -msp4r + y);
curveTo(-mtp8r + x, -r + y, x, -r + y);
curveTo(mtp8r + x, -r + y, msp4r + x, -msp4r + y);
curveTo(r + x, -mtp8r + y, r + x, y);
}

Line gradients aren't possible to do in API, unless you use fills to make the illusions of lines.


BBS Signature

Response to As: Api 3 Gradient Fills 2006-11-06 07:33:38


At 11/6/06 05:47 AM, Rantzien wrote: The circle question would have been better off in another API thread, but anyway, here is the code Flade uses for making circles (Flade is under GNU license):

it was kinda hard to understand that, and there are methods i don't agree with. heres what i use in case anyone cares
var const:Number = Math.tan(0.125 * Math.PI);

MovieClip.prototype.drawCircle = function(x:Number, y:Number, radius:Number, fill:Number):Void {
if (arguments.length == 4) {
this.beginFill(fill, 100);
}
this._x = x;
this._y = y;
this.moveTo(radius, 0);
for (var a:Number = .25; a <= 2; a += .25) {
var anchorX:Number = radius * Math.cos(a * Math.PI);
var anchorY:Number = radius * Math.sin(a * Math.PI);
var curveX:Number = anchorX + radius * const * Math.cos((a - .5) * Math.PI);
var curveY:Number = anchorY + radius * const * Math.sin((a - .5) * Math.PI);
this.curveTo(curveX, curveY, anchorX, anchorY);
}
if (arguments.length == 4) {
this.endFill();
}
};


This blog I made | This game sucks | I, twit

Just trying to get enough Twitter followers to quit Facebook forever

Response to As: Api 3 Gradient Fills 2006-11-06 07:50:02


At 11/6/06 07:33 AM, ImpotentBoy2 wrote: it was kinda hard to understand that, and there are methods i don't agree with.

I know it's not perfect, I just pasted an unmodified version of Flade's. However if you are to use this more than a few times and during play time, none of our functions are perfect. You'd probably be better off optimizing even more, maybe even compromising the perfect circle.

Anyway, since we're posting different versions, I just found this one in a code archive I have, I think I've written it myself, but I'm not sure. It's a bit old.

MovieClip.prototype.drawOval = function (X:Number, Y:Number, xr:Number, yr:Number):Void
{
if (yr === undefined) {
yr = xr;
}
var cRadX:Number = xr / 0.92387953251128675611953741891446;
var cRadY:Number = yr / 0.92387953251128675611953741891446;
this.moveTo (X + xr, Y);
var plus:Number = Math.PI * .25;
var minus:Number = plus * .5;
var angle:Number = 0;
for (var i:Number = 0; i < 8; i++) {
angle += plus;
var angleMid:Number = angle - minus;
var cx:Number = X + Math.cos (angleMid) * cRadX;
var cy:Number = Y + Math.sin (angleMid) * cRadY;
var px:Number = X + Math.cos (angle) * xr;
var py:Number = Y + Math.sin (angle) * yr;
this.curveTo (cx, cy, px, py);
}
};


BBS Signature

Response to As: Api 3 Gradient Fills 2006-11-06 10:28:02


nice, i might put ours together, i like how you did it, and it can do ovals too, but i just like how, in mine, the registration point is in the center of the circle


This blog I made | This game sucks | I, twit

Just trying to get enough Twitter followers to quit Facebook forever

Response to As: Api 3 Gradient Fills 2006-11-06 16:44:55


Yeah, use it however you wish :)

It could even be extended upon so that one chooses location of the registration point and much more in the parameters, but it's not good to make it too big unless it's needed for user interaction.


BBS Signature

Response to As: Api 3 Gradient Fills 2007-08-02 07:05:15


My gradient API doesn't work D: help plx.

lalphas = [70, 35];
lcolors = [0xFFFFFF, 0xFFFFFF];
lrations = [40, 256];
light.beginGradientFill('linear', lcolors, lalphas, lrations);


BBS Signature

Response to As: Api 3 Gradient Fills 2007-08-02 07:48:38


At 8/2/07 07:05 AM, Toast wrote: My gradient API doesn't work D: help plx.

lalphas = [70, 35];
lcolors = [0xFFFFFF, 0xFFFFFF];
lrations = [40, 256];
light.beginGradientFill('linear', lcolors, lalphas, lrations);

that cant be your whole code


- Matt, Rustyarcade.com

Response to As: Api 3 Gradient Fills 2007-08-02 09:39:54


Of course not you fat knob, but it works with .beginFill()... Here's the whole code.

light = _root.createEmptyMovieClip('light'+id, id);
light.lineStyle(5, 0xFFFFFF, 0);
lalphas = [70, 35];
lcolors = [0xFFFFFF, 0xFFFFFF];
lrations = [40, 256];
light.beginGradientFill('linear', lcolors, lalphas, lrations);
light.moveTo(_x, _y);
light.lineTo(x1, y1);
light.lineTo(x2, y2);
light.lineTo(_x, _y);
light.endFill();


BBS Signature

Response to As: Api 3 Gradient Fills 2007-08-02 10:54:50


I looked it up, you need matrixes and it's very complex


- Matt, Rustyarcade.com

Response to As: Api 3 Gradient Fills 2007-08-02 11:21:52


Right...

At 7/22/05 10:04 AM, Inglor wrote:
At 7/22/05 10:03 AM, Ninja-Chicken wrote: Still dont really get the matrix thing I geuss I'll just leave it alone
read the tutorial, YOU DON'T HAVE TO USE IT!!!

BBS Signature

Response to As: Api 3 Gradient Fills 2007-08-02 12:08:45


At 8/2/07 11:21 AM, Toast wrote: Right...

At 7/22/05 10:04 AM, Inglor wrote:
At 7/22/05 10:03 AM, Ninja-Chicken wrote: Still dont really get the matrix thing I geuss I'll just leave it alone
read the tutorial, YOU DON'T HAVE TO USE IT!!!

yes, you do. It isnt optional. Press F1 and find it in the dictionary


- Matt, Rustyarcade.com

Response to As: Api 3 Gradient Fills 2007-08-02 12:09:47


k, what do I type in there? cause when I enter null it just doesn't work.


BBS Signature

Response to As: Api 3 Gradient Fills 2007-08-02 14:59:41


Inglawr, explain matrix more in depth plx.

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 35: Identifier expected
matrix = {"box", 100, 100, 200, 200, (45/180)*Math.PI};

-:(


BBS Signature

Response to As: Api 3 Gradient Fills 2007-08-02 15:00:47


At 8/2/07 02:59 PM, Toast wrote: **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 35: Identifier expected
matrix = {"box", 100, 100, 200, 200, (45/180)*Math.PI};

that is NOT the format for an ADT object. reread his tutorial, and look at the format for the matrix.


BBS Signature

Response to As: Api 3 Gradient Fills 2007-08-02 15:06:00


"The matrix

let's explain the distribution matrix now, it is the HARDEST part"

I stopped reading there :P


BBS Signature