RadialGradient  - AS3 Flex

Package	mx.graphics
Class	public class RadialGradient
Inheritance	RadialGradient GradientBase EventDispatcher Object
Implements	IFill

In MXML, you define a RadialGradient by adding a series of GradientEntry objects, as the following example shows:

  <mx:fill>
      <mx:RadialGradient>
          <mx:entries>
              <mx:GradientEntry color="0xC5C551" ratio="0.00" alpha="0.5"/>
              <mx:GradientEntry color="0xFEFE24" ratio="0.33" alpha="0.5"/>
              <mx:GradientEntry color="0xECEC21" ratio="0.66" alpha="0.5"/>
          </mx:entries>
      </mx:RadialGradient>
  </mx:fill>
  

You can also define a RadialGradient as a fill for any graphic element in ActionScript, as the following example shows:

  
  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
      <mx:Script>
      import flash.display.Graphics;
      import flash.geom.Rectangle;
      import mx.graphics.GradientEntry;
      import mx.graphics.RadialGradient;
  
      private function init():void
      {
          var w:Number = 200;
          var h:Number = 200;
  
          var s:Sprite = new Sprite();
          // Add the new Sprite to the display list.
          rawChildren.addChild(s);    
  
          var g:Graphics = s.graphics;
          g.lineStyle(1, 0x33CCFF, 1.0);
  
          var fill:RadialGradient = new RadialGradient();
          
          var g1:GradientEntry = new GradientEntry(0xFFCC66, 0.00, 0.5);
          var g2:GradientEntry = new GradientEntry(0x000000, 0.33, 0.5);
          var g3:GradientEntry = new GradientEntry(0x99FF33, 0.66, 0.5);
          
          fill.entries = [ g1, g2, g3 ];
  
          // Set focal point to upper left corner.
          fill.angle = 45;
          fill.focalPointRatio = -0.8;
  
          // Draw a box and fill it with the RadialGradient.
          g.moveTo(0, 0);
          fill.begin(g,new Rectangle(0, 0, w, h));
          g.lineTo(w, 0);
          g.lineTo(w, h);
          g.lineTo(0, h);
          g.lineTo(0, 0);      
          fill.end(g);
      }
      </mx:Script>
  </mx:Application>
  

Show MXML Syntax

Hide MXML Syntax

  <mx:RadialGradient
    Properties
    angle="0"
    focalPointRatio="0"
  />
  

Default MXML Propertyentries

More examples

Learn more

Related API Elements