There are many options available for configuring gradients generated with AS3 code. In this article, we'll explore various options with an interactive app that you can use to change these options on the fly.
Play around with the options in the SWF above. The left rectangle shows you the resulting gradient as it would appear when drawn into a 50x50 rectangle. The right rectangle shows the matrix with the current setting. Compare the two while exploring all the settings and it will all make sense.
When you've created a gradient that you like, hit
Click here for code to see an AS3 code listing which you can copy and paste into your own project to generate the gradient you've made.
In the code generation extra variables have been added so you can easily alter the appearance of the gradient.
gradientScaling, use this to increase the size.
gradientOffsetX, use this to move the gradient horizontally.
gradientOffsetY, use this to move the gradient vertically.
To create a gradient, you need use the
graphics object of a
Shape, or any class it subclasses. Then we need to create the gradient fill, by calling
These parameters are required:
These parameters are optional:
matrix:Matrix = null
spreadMethod:String = "pad"
interpolationMethod:String = "rgb"
focalPointRatio:Number = 0
I will go though each parameter later. If you'd rather play around with it, trying to figure it out yourself, I've made a SWF just for that reason, and it can even generate functional code for the gradient you've made. Check it out at the top of the article.
For full documentation on creating gradients, see the LiveDocs on the topic.
Set the gradient type with:
Colors, Alphas, Ratios
These three arrays need to match up. So if you want three colors, you also need to supply three alphas and three ratios.
The colors array needs hexadecimal values. (like
0xFF0000 for red)
The alphas array needs numbers from (and including) 0 to 1.
The ratios array needs numbers from (and including) 0 to 255. These need to be in correct order, so
[100,0,200] is not valid, but
Here is an example of what happens when you change the ratios:
The matrix defines how the gradient will look. If you do not define it, it will have a width of 200px. Instead, if you want to control how the gradient will look, you will need to create a new matrix:
var gradientMatrix:Matrix = new Matrix ( ) ;
Then you need to create a gradient box on the matrix, by calling:
The following parameters are required:
These parameters are optional:
rotation:Number = 0
tx:Number = 0
ty:Number = 0
width is the width of the matrix (not affected by matrix rotation).
height is the height of the matrix (not affected by matrix rotation).
rotation is the rotation of the matrix, in radians.
tx is the horizontal offset of the matrix (not affected by matrix rotation).
ty is the vertical offset of the matrix (not affected by matrix rotation).
If the matrix in some way doesn't cover up the whole area you draw, the rest will have to be filled. There are three different ways of managing this:
Set the spread method with:
This is the way the color transition is calculated, there are two options:
Set the interpolation method with:
Focal Point Ratio
This only has an effect if you are using radial gradients. It accepts values from, and including, -1 to 1. If you supply a number over 1, don't worry, it will default to 1. This is also affected by rotation (so you can make it to be in the top by setting the focal point to -1, and rotation to Pi/2).
When you're finished, you need to draw the fill. This can be performed by any of the graphics fill drawing methods, like beginFill().
If you are not using (0,0) as your start point for the drawing method, you need to remember to change the
ty values of the matrix.
Now you should be ready to go on new adventures with code generated gradients.
Thanks for reading!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post