ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
AS3 Dynamic Gradient Fills
http://www.actionscript.org/resources/articles/1002/1/AS3-Dynamic-Gradient-Fills/Page1.html
Ryan Walker
Ryan Walker is a part time, freelance web developer from Michigan USA. Although currently supporting himself in Mexico, (and still learning Spanish!) he enjoys learning and applying new things... especially with actionScript and 3D! Ryan - "I've learned so much from the online community, I hope its my time to pass something forward!" 
By Ryan Walker
Published on April 16, 2010
 
What do you get when you add a Matrix(), a createGradientBox(), and a beginGradientFill()?
Thats easy!  Its a Gradient Fill!   This tutorial and program, will explain options available with making dyanamic gradient fills in AS3.

WARNING: THIS TUTORIAL MAY CAUSE SEIZURES IN SOME PEOPLE!
(Reeeeally, I think it could! j/k)

By itself, a gradient fill may be borring. One of the benefits of using AS3 is to make it Dynamic! Another is creating gradient fills for your papervision models, as a light weight alternative to "baking textures" without having to  importing a bitmap. At the conclusion, we will talk about how the different variables have an effect on this program.

In this tutorial, we will explore the options available with AS3 and Gradient fills. Included in this tutorial is a SWF program that gives you a visual effect of all the properties we will learn in this tutorial. The program also returns the code so you can then copy and paste in your future projects.

Download: here

View File: http://tec-corrosion.com/index2.html


To get us started, notice the 3 important parts of this code:

1. new Matrix()
2. createGradientBox()
3. beginGradientFill()

[as] var mySprite:Sprite = new Sprite(); addChild(mySprite); var m:Matrix = new Matrix(); m.createGradientBox(); mySprite.graphics.beginGradientFill(); mySprite.graphics.drawRect(); mySprite.graphics.endFill(); [/as]

These 3 methods are the key to understanding Gradient Fills with AS3

1. new Matrix()

Why do we need a matrix for a gradient fill you ask? Sad to say, one of the parameters we need to add to the beginGradientFill() constructor is a MATRIX!!!! And it does not have a default value... so that means we have to make it ourselves.

More information about a Matrix().

"You can perform various graphical transformations on a display object by setting the properties of a Matrix object..."

new Martrix(a, b, c, d, tx, ty) Notice the parameters. You can read how each of those parameters will change an object from the adobe website. However the Matrix object has a few methrods to make our lives easier. The one we will use is createGradientBox(). This method will changes the matrix parameters the exactly the way beginGradientFill() wants it. (The same applies to lineGradientStyle(), witch also requires a matrix)

2. createGradientBox()

createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void

More info on createGradientBox()

Now the fun begins. The createGradientBox() gives us 5 parameters that will change the properties of the matrix for us!

width:Number — The width of the gradient box.

height:Number — The height of the gradient box.

rotation:Number (default = 0) — The amount to rotate, in radians.

tx:Number (default = 0) — The distance, in pixels, to translate to the right along the x axis. This value is offset by half of the width parameter.

ty:Number (default = 0) — The distance, in pixels, to translate down along the y axis. This value is offset by half of the height parameter.

On the right side of the program. You will notice each of these parameters attached to a slider to change the variable. This is just to give you a representation of how those parameters effect the gradient fill. More importantly however, Watch how the code changes, as this is what you will have to enter to create the displayed effect!!!!

3. beginGradientFill()

More information on beginGradientFill()

type:String — A value from the GradientType class that specifies which gradient type to use: GradientType.LINEAR or GradientType.RADIAL.

colors:Array — An array of RGB hexadecimal color values to be used in the gradient; for example, red is 0xFF0000, blue is 0x0000FF, and so on. You can specify up to 15 colors. For each color, be sure you specify a corresponding value in the alphas and ratios parameters.

alphas:Array — An array of alpha values for the corresponding colors in the colors array; valid values are 0 to 1. If the value is less than 0, the default is 0. If the value is greater than 1, the default is 1.

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.

matrix:Matrix - We place our matrix in a variable and pass it as a parameter to our beginGradientFill()

spreadMethod:String (default = "pad") — A value from the SpreadMethod class that specifies which spread method to use, either: SpreadMethod.PAD, SpreadMethod.REFLECT, or SpreadMethod.REPEAT.

interpolationMethod:String (default = "rgb") — A value from the InterpolationMethod class that specifies which value to use: InterpolationMethod.

focalPointRatio:Number (default = 0) — A number that controls the location of the focal point of the gradient. 0 means that the focal point is in the center. 1 means that the focal point is at one border of the gradient circle. -1 means that the focal point is at the other border of the gradient circle. A value less than -1 or greater than 1 is rounded to -1 or 1

Now the fun [I]really [/I]begins. There are 8 parameters that we can play with to change our gradient fill how we want. On the LEFT side of the program. You will notice each of these parameters attached to a slider to change the variable. This is just to give you a representation of how those parameters effect the gradient fill. More importantly however, Watch how the code changes, as this is what you will have to enter to create the displayed

Now the fun [I]really [/I]begins. There are 8 parameters that we can play with to change our gradient fill how we want. On the LEFT side of the program. You will notice each of these parameters attached to a slider to change the variable. This is just to give you a representation of how those parameters effect the gradient fill. More importantly however, Watch how the code changes, as this is what you will have to enter to create the displayed effect!!!!

/*    Things of importance:    */

1. Colors. Flash suports up to 15 different colors to add to our gradient in the form of an array. Colors, alphas:, ratios must have the same length arrays. The colors are in a hexadecimal format!

(advanced note: To change a variable to a hexadecimal number, use these methods to convert it for you. It is not required to be in capital letters.)
[as]var num = 24 num.toString(16).toUpperCase() [/as]

2. The ratios are represented in hexadecimal numbers also... its confusing a little. But think of it as 0-255. I noticed that you can also enter a decimal number without consequence... however it is better to used the advanced note above with your variables. There is also an undesirable effect if the gradients overlap each other. For example: [1,10,8,22] the "8" and the "10" are going to make a problem due to the gradients overlapping. In the program, I set the sliders so that they will not over lap!

3. Animation with gradient fills requires that the fill be drawn each frame.  (otherwise it just renders once and its not as fun)    mySprite.graphics.clear()  methood MUST be called before beginGradientFill().   Otherwise you gradients will stack in the graphics.  At first only your alpha will not work due to the stack of fills on top of eachother.  but after about 15 min, you'll notice the mistake of your memory leaking.  This will be discussed in a future tutorial!    Happy Gradient Filling!
__________________________________________________________

Congratulations! You have completed my first tutorial. My next two will be:
(1) discussing how to use gradient fills on our papervision materials, and
(2) animating gradient fills with random colors and event listeners.

This program will give you a taste of the good things to come:

  • In the top right, You can chose a color to animate into the gradient, or have a random color continuously entered into the mix.

  • A drop down menu will chose the papervision object with your gradient added as a material. Chose from a sphere, cube, arrow, or even a paper air plane?! (a zoom slider is to the right of the 3D object drop-down menu.

  • Drag the background of the stage to rotate your object around to see the different sides.


Please send me positive feedback on this tutorial with constructive criticism please... (be nice to me, this is my first!) This is also a fine place to post questions on how to apply this technique.

-Ryan (aka Solarcloud7)