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

    gradients

    wicklow
      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?

      thanks!
      shannon
        • 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.
          -->

          <mx:Script>
          <![CDATA[
          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;
          invalidateDisplayList();
          }
          public function get gradientFillColors() : Array
          {
          return _gradientFillColors;
          }

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

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

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

          // gradientType
          private var _gradientType:String = GradientType.LINEAR;
          public function set gradientType( s:String ) : void
          {
          _gradientType = s;
          invalidateDisplayList();
          }
          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();
          m.createGradientBox(unscaledWidth,unscaledHeight,rads,0,0);

          // 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.

          g.clear();

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

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

          // that’s it.
          }
          ]]>
          </mx:Script>
          </mx:Canvas>