Skip to main content
Inspiring
January 26, 2009
Question

Help with Gradients

  • January 26, 2009
  • 3 replies
  • 468 views
Hi --

I am trying to programatically create a gradient fill. I have tried
following the examples in the Flash CS3 help but they don't seem to work
right.

The help file states:

ratios:Array - An array of color distribution ratios; valid values are 0 to
255. This value defines the percentage of the width where the color is
sampled at 100%. The value 0 represents the left-hand position in the
gradient box, and 255 represents the right-hand position in the gradient
box.

So I interpret this to mean that if I have a box that is 200 pixels wide
that 0 would be at 0 in the box, 128 would be at 100 and 255 would be at
200. However, it appears that 255 is always the middle of the box and 128 is
1/4 of the box.

What I want to do is create a three color gradient of red, blue and green
where blue is in the middle, red is on the left and green on the right and
the colors transition.

Can someone please help me here?

Thanks

Rich


This topic has been closed for replies.

3 replies

Inspiring
January 27, 2009
If you weren't using that before it would be difficult to get the correct matrix, Its a Matrix utility method specifically for gradients. Pleased to hear its all making sense now :)
Inspiring
January 27, 2009
Hey --

Thanks so much! I didn't realize I needed the gradientBox!

Rich


"GWD" <webforumsuser@macromedia.com> wrote in message
news:gll1om$o09$1@forums.macromedia.com...
> Give this a try:
>
>
> var m:Matrix = new Matrix();
>
> m.createGradientBox(200,100,0,0,0);
>
> var s:Shape = new Shape()
> addChild(s)
>
> s.graphics.beginGradientFill('linear',[0xff0000,0x0000ff,0x00ff00],[1,1,1],[0,12
> 8,255],m)
> s.graphics.drawRect(0,0,200,100)
>
> //above works fine because the gradient box defines the fill for the
> target
> rectangle.
> //you need the fill matrix to be correct for each different target
> location.
> //e.g. draw another box further over at x=300
> //need to transform (simple translate in this case) the gradient matrix to
> the
> new location
> m.translate(300,0)
> //the above is just using the original matrix and moving it to target the
> new
> location
> //you could also create a new one specifically for the new target if that
> made
> more sense
>
> s.graphics.beginGradientFill('linear',[0xff0000,0x0000ff,0x00ff00],[1,1,1],[0,12
> 8,255],m)
> s.graphics.drawRect(300,0,200,100)
>


Inspiring
January 26, 2009
Give this a try:


var m:Matrix = new Matrix();

m.createGradientBox(200,100,0,0,0);

var s:Shape = new Shape()
addChild(s)
s.graphics.beginGradientFill('linear',[0xff0000,0x0000ff,0x00ff00],[1,1,1],[0,128,255],m)
s.graphics.drawRect(0,0,200,100)

//above works fine because the gradient box defines the fill for the target rectangle.
//you need the fill matrix to be correct for each different target location.
//e.g. draw another box further over at x=300
//need to transform (simple translate in this case) the gradient matrix to the new location
m.translate(300,0)
//the above is just using the original matrix and moving it to target the new location
//you could also create a new one specifically for the new target if that made more sense
s.graphics.beginGradientFill('linear',[0xff0000,0x0000ff,0x00ff00],[1,1,1],[0,128,255],m)
s.graphics.drawRect(300,0,200,100)