# How to apply GRADIENT fill using ActionScript

**URL:** <https://forum.kirupa.com/t/how-to-apply-gradient-fill-using-actionscript/220>\
**Category:** flash\
**Created:** [July 10, 2002, 1:43pm UTC](https://forum.kirupa.com/t/how-to-apply-gradient-fill-using-actionscript/220 "2002-07-10T13:43:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![delsian](https://avatars.discourse-cdn.com/v4/letter/d/3ab097/32.png) [@delsian](https://forum.kirupa.com/u/delsian)\
**Post date:** [July 10, 2002, 1:43pm UTC](https://forum.kirupa.com/t/how-to-apply-gradient-fill-using-actionscript/220/1 "2002-07-10T13:43:09Z")

</div>

I was wondering if abybody knows how to apply gradient fill using ActionScript (I need to change it when some event accrues).  
Is it possible at all?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 10, 2002, 1:45pm UTC](https://forum.kirupa.com/t/how-to-apply-gradient-fill-using-actionscript/220/2 "2002-07-10T13:45:10Z")

</div>

are you trying to apply it dynamically? or you just want to change from one gradient to another.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 10, 2002, 1:55pm UTC](https://forum.kirupa.com/t/how-to-apply-gradient-fill-using-actionscript/220/3 "2002-07-10T13:55:32Z")

</div>

dynamically.  
Like it is possible to do with setRGB function to set up a color for the plain fill. I thought there could be some possibility to give a name to a gradient swatch to use it in AS

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 10, 2002, 3:14pm UTC](https://forum.kirupa.com/t/how-to-apply-gradient-fill-using-actionscript/220/4 "2002-07-10T15:14:19Z")

</div>

It is possible, but I don’t think you want to mess with that. I know Supra is gonna come and say that it’s not so hard, but it is.  
Basically, what I understood is that you have to handle them with a matrix. I found an example for a linear gradient in a square, positionned at (100,100) and 200 pixels wide.

```auto
 _root.createEmptyMovieClip( "grad", 1 ); // our mc
 with ( _root.grad )
 {
 	colors = [0xFF0000, 0x0000FF , 0xFF00 , 0xFF00FF];
 	// from red to blue to green to purple
 	alphas = [100, 100 , 100 , 100];
 	// alpha 100 for every color
 	ratios = [0, 0x55 , 0xAA , 0xFF];
 	// they represent a percentage :
 	// the color is at its max when you get to
 	// ratios[n]% of the width of the fill, except it's
 	// not a per100age but a per255age
 	// That's why you have to put the values in hexadecimal

 	matrix = { matrixType:"box", x:100, y:100, w:200, h:200, r: Math.PI/2 };
 	// we want a simple matrix, we indicate its origin,
 	// width, height and rotation (90 degrees)
 	// Then we draw the rectangle
 	beginGradientFill( "linear", colors, alphas, ratios, matrix );
 	moveto(100,100);
 	lineto(100,300);
 	lineto(300,300);
 	lineto(300,100);
 	lineto(100,100);
 	endFill();
 }

```

This code belongs to Supersatori from [www.flashxpress.net](http://www.flashxpress.net).

I hope this helps.

pom :asian:

To become the king of the matrix, it’s there : [http://www.ping.be/~ping1339/matr.htm](http://www.ping.be/~ping1339/matr.htm)