Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Create gradinet shapes using the AS3

21.7.2009, 16:9    Total views: 13644

This, step by step, detailed action script lesson, will show you how to create linear and radial gradient shapes using the beginGradiantFill() method. Let's start!

Step 1

Create a new flash document. Call the current layer AS3. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!



Step 2


Select the first frame of layer AS3 and go to the AS3 panel (F9). Then, enter this code inside the actions panel:

This code represents gradient linear blue and white circle shape.

var gradType:String = GradientType.LINEAR;
var colors:Array = [0xffffff, 0x0c88e0,];
var alphas:Array = [4, 4];
var ratios:Array = [0, 255];
var canvas = new Sprite();
canvas.graphics.beginGradientFill(gradType, colors, alphas, ratios)
canvas.graphics.drawCircle(50, 100, 100);
canvas.x = canvas.y = 150;
addChild(canvas);



If you copy and paste code below, you will get gradient radial green rectangle.

var gradType:String = GradientType.RADIAL;
var colors:Array = [0x4c4c4c, 0x6ca721];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var canvas = new Sprite();
canvas.graphics.beginGradientFill(gradType, colors, alphas, ratios)
canvas.graphics.drawRect(0, 0, 150, 150);
canvas.x = canvas.y = 100;
addChild(canvas);



That's it!

Enjoy!

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 295772

2. High-tech city animation
Total views: 245827

3. Water effect
Total views: 226499

4. Photo slide show
Total views: 208918

5. Special Picture Effect
Total views: 184484



Related links