Advanced Search

AS3: Creating a Gradient Rectangle

/ Published in: ActionScript 3
Save to your folder(s)
So I've always found gradients to be confusing until I found this great tutorial online.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /****************************
  2. Import Classes
  3. ****************************/
  4. import flash.display.*;
  5. import flash.geom.*;
  6.  
  7. /****************************
  8. Define Variables
  9. ****************************/
  10. //Type of Gradient we will be using
  11. var fType:String = GradientType.LINEAR;
  12. //Colors of our gradient in the form of an array
  13. var colors:Array = [ 0xF1F1F1, 0x666666 ];
  14. //Store the Alpha Values in the form of an array
  15. var alphas:Array = [ 1, 1 ];
  16. //Array of color distribution ratios.  
  17. //The value defines percentage of the width where the color is sampled at 100%
  18. var ratios:Array = [ 0, 255 ];
  19. //Create a Matrix instance and assign the Gradient Box
  20. var matr:Matrix = new Matrix();
  21.     matr.createGradientBox( 200, 20, 0, 0, 0 );
  22. //SpreadMethod will define how the gradient is spread. Note!!! Flash uses CONSTANTS to represent String literals
  23. var sprMethod:String = SpreadMethod.PAD;
  24. //Start the Gradietn and pass our variables to it
  25. var sprite:Sprite = new Sprite();
  26. //Save typing + increase performance through local reference to a Graphics object
  27. var g:Graphics = sprite.graphics;
  28.     g.beginGradientFill( fType, colors, alphas, ratios, matr, sprMethod );
  29.     g.drawRect( 0, 0, 400, 200 );
  30.  
  31. addChild( sprite );

URL: http://www.sebastiansulinski.co.uk/web_design_tutorials/flash/drawing_shapes/drawing_shapes.php#

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.