Video Training – Tutorials

Flash CS3 Tutorial – Gradient Fills in Actionscript 3

November 11, 2008 at 1:37 pm Leave a comment

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Adobe Flash Video Tutorial – Training.

Gradient Fills in Actionscript 3

Creating Gradients using Flash is not hard, but how about using ActionScript to dynamically create a Gradient? Following on from our earlier Flash Tutorials : Creating Lines and Shapes with ActionScript this Beginners ActionScript tutorial shows you how.

In this tutorial we’ll go through at creating some gradient fills using Actionscript 3.0. We’ll take a look at radial and linear gradients; we’ll add angle and use different spread methods to manipulate the gradients effect. In the swf example below we have 6 different gradients each with different effects, from left to right we have a radial gradient, linear gradient, linear gradient with matrix angle, linear gradient with reflect spread method, linear gradient with repeat spread method and finally linear gradient with pad spread method. We’ll break each of these gradients down and go through and explain how they work.

Download a larger html version and the SWF / FLA files used in this tutorial

Radial Gradient

First we create a new Sprite object called gradients. This Sprite object will hold all the gradients information. A Sprite is just a Movie-Clip without a timeline.

var gradients:Sprite = new Sprite();

At the moment the Sprite object isn’t part of the display list. To add the Sprite object to the display list we use the addChild() method, adding an object to the display list essentially adds it to the stage making it visible when you preview or publish the file.

addChild(gradients);

Now we’re ready to start creating the gradient. We have to let Actionscript know what type of gradient we are creating; with the use of the GradientType class Actionscript gives us the choice of either a radial or linear gradient. In this case we’ll choose the RADIAL property, we store this data inside a String object called radType so we can use it later on in the code.

var radType:String = GradientType.RADIAL;

The main ingredients of a gradient are the colours themselves; we’ll choose 2 different colours that will act as the colours for the gradient. We’ll create an Array called radColours to hold the colour information. Using Arrays allow us to hold multiple data in a single variable, since we need to store 2 separate values this comes in handy. Actionscript reads colours in hexadecimal format, if you’re not sure about colours in hexadecimal format have a look at the colour picker in the Flash interface. In the code below we’ve chosen 0x3174d0 and 0x15396f giving us 2 different shades of blue.

var radColours:Array = [0x3174d0, 0x15396f];

We have the colours for the gradient but we can change the alpha scale of either of them. Again we’ll use an Array to hold this information, but this time we’ll call it radAlphas. Inside this Array we’ll change the alpha values of the colours, alpha scale in Actionscript is measured in percent (1 = 100%, .25 = 25%). The first value inside the Array will alter the first colour inside the radColours Array. In our code we’ve set both colours to 1 keeping them at 100%.

var radAlphas:Array = [1, 1];

Next we’ll look at the scale of each colour, for example we might want to show a lot of dark blue and just a little bit of the lighter blue blue. This method works in the same way as if we were to change the gradient scale in graphic applications such as Photoshop. Take a look at the image below, it shows the gradient properties box from Photoshop. The value 0 represents the left-hand position in the gradient box, and 255 indicates the right-hand position in the gradient box. In this current position both colours are distributed equally, but if we wanted to show more of the light blue we’d simply increase the left hand value, and to show more of the dark blue we’d decrease the right hand value. In our code we’ve kept it at 0 and 255 giving each colour an equal share.

var radRatios:Array = [0, 255];

Example of Photoshop Gradient Box;

To gain more control over gradients we can use the methods from the Matrix Class. It’ll enable us to change the height, width and rotation of the gradient. We’ll start by creating a new instance of the Matrix class giving us access to all the properties methods and events of that class.

var radMatrix:Matrix = new Matrix();

The method from the Matrix class we’ll use to manipulate the gradient is called createGradientBox(). This method has 5 parameters available to it, width, height, rotation, tx, and ty. For this gradient we’ll just use the width and height parameters, for our code we’ve set the width and height to 120px by 120px.

radMatrix.createGradientBox(120,120);

We’ll move the Sprite object by changing the x and y properties to 50px.

gradients.x = 50;
   gradients.y = 50;

We have a lot of variables with different data types but they don’t actually make up the gradient, to bring everything together we use a method called beginFillGradient(). Before we get into that method you’ll notice it’s assigned to a couple of elements, it’s attached to the graphics property and that in turn is attached to the gradients Sprite Object. We want all the data to be part of the Sprite object we created in the first line of code, to do this we first assign the method to “graphics” which will draw out the gradient and then finally that’s assigned to the gradients Sprite object. Looking at the beginFillGradient() method you’ll see it has a number of parameters available to it, but we’ve actually already done most of the work for it. When your typing out your parameters a little yellow help box pops up, this help box shows what values are required for the method. The first value required is gradient type, but we’ve already stored the gradient inside the String object so all we have to do is type “radGrad”. That will insert all the data from the String into our beginFillGradient() method. The same goes for the rest of the parameters; the next values required are the colours, we chose the colours earlier and stored them inside an Array, so we simply insert that Array into the method. We continue this process for the ratios, alphas and Matrix data.

//start code block
gradients.graphics.beginGradientFill(radType, radColours, radAlphas, radRatios,radMatrix)
//end code block

Using the drawRect() method we’ll create a rectangle for the gradient to reside in. The drawRect() method has 4 parameters available to it, x and y values, and width and height. For our code we’ll keep the x and y values at 0 because we’ll move the gradient by changing the x and y position of the gradients Sprite object, remember all the gradients information will be added to that Sprite object. We’ll make the rectangle the same height and width as the gradient box we created in the previous line, this now ensures that the radial gradient will sit in the centre of the rectangle.

gradients.graphics.drawRect(0, 0, 120, 120);

Linear Gradient
We’ll make a few changes to the linear gradient; the most notable and obvious is gradient type, which is obviously changed to LINEAR. We’ve also added a gradient angle to the createGradientBox() method by changing the rotation value to 45, changing the angle of the gradient.

var linGrad:String = GradientType.LINEAR;
   var linMatrix:Matrix = new Matrix();
   linMatrix.createGradientBox(120,120,45);
   var linColors:Array = [0xb61322, 0x580408];
   var linAlphas:Array = [1, 1];
   var linRatios:Array = [0, 255];
   var lin:Sprite = new Sprite();
   lin.graphics.beginGradientFill(linGrad, linColors, linAlphas, linRatios,linMatrix)
   lin.graphics.drawRect(0, 0, 120, 120);
   lin.x = 350;
   lin.y = 50;
   addChild(lin);

Adding Spread Methods
To add some spread methods we first let Actionscript know what type of spreadMethod we are using. This works in the same way as choosing the gradientType, we place the spreadMethod inside a string and then add it to the beginGradientFill method.

//Reflect Spread Method
var reflectGrad:String = GradientType.LINEAR;
   var reflectMatrix:Matrix = new Matrix();
   var spreadReflect:String = SpreadMethod.REFLECT;
   reflectMatrix.createGradientBox(20,20,0,0,0);
   var reflectColors:Array = [0xb61322, 0x580408];
   var reflectAlphas:Array = [1, 1];
   var reflectRatios:Array = [0, 255];
   var reflect:Sprite = new Sprite();
   reflect.graphics.beginGradientFill(reflectGrad, reflectColors, reflectAlphas, reflectRatios,reflectMatrix,spreadReflect)
   reflect.graphics.drawRect(0, 0, 120, 120);
   reflect.x = 50;
   reflect.y = 200;
   addChild(reflect);
//Repeat Spread Method
var spreadGrad:String = GradientType.LINEAR;
   var spreadMatrix:Matrix = new Matrix();
   var spreadMeth:String = SpreadMethod.REPEAT;
   spreadMatrix.createGradientBox(20,20,0,0,0);
   var spreadColors:Array = [0xb61322, 0x580408];
   var spreadAlphas:Array = [1, 1];
   var spreadRatios:Array = [0, 255];
   var spread:Sprite = new Sprite();
   spread.graphics.beginGradientFill(spreadGrad, spreadColors, spreadAlphas, spreadRatios,spreadMatrix,spreadMeth);
   spread.graphics.drawRect(0, 0, 120, 120);
   spread.x = 200;
   spread.y = 200;
   addChild(spread);
//Pad Spread Method
var padGrad:String = GradientType.LINEAR;
   var padMatrix:Matrix = new Matrix();
   var spreadPad:String = SpreadMethod.PAD;
   padMatrix.createGradientBox(20,20,0,0,0);
   var padColors:Array = [0xb61322, 0x580408];
   var padAlphas:Array = [1, 1];
   var padRatios:Array = [0, 255];
   var pad:Sprite = new Sprite();
   pad.graphics.beginGradientFill(padGrad, padColors, padAlphas, padRatios,padMatrix,spreadPad)
   pad.graphics.drawRect(0, 0, 120, 120);
   pad.x = 350;
   pad.y = 200;
   addChild(pad)

Entry filed under: ActionScript, Flash Tutorial. Tags: actionscript 3 tutorial, Flash CS3 Tutorial, Gradient Fills in Actionscript 3.