Be a Supporter!

As: Api 3 Gradient Fills

  • 2,640 Views
  • 25 Replies
New Topic Respond to this Topic
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
As: Api 3 Gradient Fills Jul. 22nd, 2005 @ 09:58 AM Reply

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.

Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to As: Api 3 Gradient Fills Jul. 22nd, 2005 @ 10:03 AM Reply

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


- Matt, Rustyarcade.com

Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to As: Api 3 Gradient Fills Jul. 22nd, 2005 @ 10:04 AM Reply

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!!!

Joelasticot
Joelasticot
  • Member since: Feb. 14, 2003
  • Offline.
Forum Stats
Supporter
Level 46
Game Developer
Response to As: Api 3 Gradient Fills Jul. 22nd, 2005 @ 10:05 AM Reply

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


ey

BBS Signature
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to As: Api 3 Gradient Fills Jul. 22nd, 2005 @ 10:06 AM Reply

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 ;)

Glaiel-Gamer
Glaiel-Gamer
  • Member since: Dec. 28, 2004
  • Offline.
Forum Stats
Member
Level 28
Game Developer
Response to As: Api 3 Gradient Fills Jul. 22nd, 2005 @ 10:19 AM Reply

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

Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to As: Api 3 Gradient Fills Jul. 23rd, 2005 @ 01:49 PM Reply

this should be useful


- Matt, Rustyarcade.com

noob-toast
noob-toast
  • Member since: May. 18, 2004
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to As: Api 3 Gradient Fills Aug. 24th, 2005 @ 12:13 PM Reply

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
noob-toast
noob-toast
  • Member since: May. 18, 2004
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to As: Api 3 Gradient Fills Aug. 24th, 2005 @ 12:28 PM Reply

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
BrotherToast
BrotherToast
  • Member since: Mar. 5, 2005
  • Offline.
Forum Stats
Member
Level 04
Blank Slate
Response to As: Api 3 Gradient Fills Jan. 5th, 2006 @ 11:34 AM Reply

Bleh, doesn't work...

El-Presidente
El-Presidente
  • Member since: Jun. 2, 2005
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Api 3 Gradient Fills Nov. 4th, 2006 @ 07:00 PM Reply

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
Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to As: Api 3 Gradient Fills Nov. 6th, 2006 @ 05:47 AM Reply

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
GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 19
Game Developer
Response to As: Api 3 Gradient Fills Nov. 6th, 2006 @ 07:33 AM Reply

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();
}
};

Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to As: Api 3 Gradient Fills Nov. 6th, 2006 @ 07:50 AM Reply

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
GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 19
Game Developer
Response to As: Api 3 Gradient Fills Nov. 6th, 2006 @ 10:28 AM Reply

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

Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to As: Api 3 Gradient Fills Nov. 6th, 2006 @ 04:44 PM Reply

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
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 07:05 AM Reply

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
Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 07:48 AM Reply

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

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 09:39 AM Reply

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
Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 10:54 AM Reply

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


- Matt, Rustyarcade.com

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 11:21 AM Reply

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
Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 12:08 PM Reply

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

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 12:09 PM Reply

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


BBS Signature
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 02:59 PM Reply

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
authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 03:00 PM Reply

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
Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Api 3 Gradient Fills Aug. 2nd, 2007 @ 03:06 PM Reply

"The matrix

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

I stopped reading there :P


BBS Signature