1 Reply Latest reply on Dec 4, 2006 10:29 AM by peterent


    wicklow Level 1
      i am trying to apply a gradient to a canvas control, like i would a button- yet there are not properties set for the canvas or some of the other standard controls?

        • 1. Re: gradients
          peterent Level 2
          Here's a complete component to do that. Too bad this forum doesn't retain formatting or allow for attachments.

          If you save it as GradientCanvas.mxml, then you can use it this way:

          <GradientCanvas gradientFillColors="[0xFF0000,0x00FF00,0x0000FF]" gradientAlphas="[1,1,1]" gradientRatios="[0,128,255]" />

          See the comments in the file for details.

          <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" >

          This component extends canvas, but you can do this with any Container.
          All it really does it draw a background that's a gradient fill. Since a
          gradient is more complex than a solid color, there are a number of properties
          that need to be set.

          This class shows how to set and get properties and how to do a gradient fill.

          import flash.display.Graphics;
          import flash.geom.Matrix;
          import flash.display.GradientType;

          * properties
          * One thing you can do is have separate properties. This is typical. In
          * this component there are gradientFillColors, gradientAlphas, gradientRatios,
          * gradientType, and gradientAngle.
          * Alternatively, you can have one property, gradientInfo, which is an Object
          * that has a fillColors, alphas, ratios, type, and angle members. On the plus
          * side this gives you a single setter and getter to write. On the negative side
          * you have some difficulty allowing default values.

          // gradientFillColors property
          private var _gradientFillColors:Array = [0xFFFFFF,0x000000]
          public function set gradientFillColors( a:Array ) : void
          _gradientFillColors = a;
          public function get gradientFillColors() : Array
          return _gradientFillColors;

          // gradientAlphas
          private var _gradientAlphas:Array = [1, 1];
          public function set gradientAlphas( a:Array ) : void
          _gradientAlphas = a;
          public function get gradientAlphas() : Array
          return _gradientAlphas;

          // gradientRatios
          private var _gradientRatios:Array = [0,255];
          public function set gradientRatios( a:Array ) : void
          _gradientRatios = a;
          public function get gradientRatios() : Array
          return _gradientRatios;

          // gradientAngle (in degrees)
          private var _gradientAngle:Number = 0;
          public function set gradientAngle( n:Number ) : void
          _gradientAngle = n;
          public function get gradientAngle() : Number
          return _gradientAngle;

          // gradientType
          private var _gradientType:String = GradientType.LINEAR;
          public function set gradientType( s:String ) : void
          _gradientType = s;
          public function get gradientType() : String
          return _gradientType;

          * updateDisplayList

          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
          // always call the super version so the super class can do its update too

          super.updateDisplayList( unscaledWidth, unscaledHeight );

          // grab the graphics context for drawing. Every component has one so you can do this with any component

          var g:Graphics = graphics;

          // Drawing a gradient is more complex than a solid fill. You need a Matrix to do it since you
          // can specify the direction and rotation of the fill. The Matrix class makes it easy for
          // gradients with the createGradientBox function.

          var rads:Number = (_gradientAngle*Math.PI)/180; // must be in radians

          var m:Matrix = new Matrix();

          // test values to make sure everything is correct; throws exception if not.

          if( _gradientFillColors.length != _gradientAlphas.length ||
          _gradientFillColors.length != _gradientRatios.length ||
          _gradientAlphas.length != _gradientRatios.length ) {
          throw new Error("GradientCanvas: The number of colors, alphas, and ratios must be equal");

          // always clear the graphics or each time this is called it will superimpose itself.


          // Set up the gradient fill and draw the rectangle.

          g.beginGradientFill(_gradientType, _gradientFillColors, _gradientAlphas , _gradientRatios, m);
          g.drawRect( 0, 0, unscaledWidth, unscaledHeight );

          // that’s it.