Apache Flex 4.16.1 API Reference | All Packages | All Classes | Index | Frames No Frames |
RadialGradient

Package | mx.graphics
Class | public class RadialGradient
Inheritance | RadialGradient GradientBase flash.events.EventDispatcher
Implements | IFill

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

The RadialGradient class lets you specify a gradual color transition in the fill color. A radial gradient defines a fill pattern that radiates out from the center of a graphical element. You add a series of GradientEntry objects to the RadialGradient object's `entries` Array to define the colors that make up the gradient fill.

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>

MXML Syntax Show MXML Syntax
Hide MXML Syntax

The `<mx:RadialGradient>` tag inherits all the tag attributes of its superclass, and adds the following tag attributes:

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

Default MXML Property `entries`

See also

mx.graphics.GradientEntry
mx.graphics.LinearGradient
mx.graphics.IFill

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined By
--- | --- | ---
|  | angle : Number Deprecated: Please Use rotation By default, the LinearGradientStroke defines a transition from left to right across the control. | GradientBase
|  | entries : Array An Array of GradientEntry objects defining the fill patterns for the gradient fill. | GradientBase
|  | focalPointRatio : Number Sets the location of the start of the radial fill. | RadialGradient
|  | interpolationMethod : String A value from the InterpolationMethod class that specifies which interpolation method to use. | GradientBase
|  | matrix : Matrix An array of values used for matrix transformation. | GradientBase
|  | rotation : Number By default, the LinearGradientStroke defines a transition from left to right across the control. | GradientBase
|  | scaleX : Number The horizontal scale of the gradient transform, which defines the width of the (unrotated) gradient | RadialGradient
|  | scaleY : Number The vertical scale of the gradient transform, which defines the height of the (unrotated) gradient | RadialGradient
|  | spreadMethod : String A value from the SpreadMethod class that specifies which spread method to use. | GradientBase
|  | x : Number The distance by which to translate each point along the x axis. | GradientBase
|  | y : Number The distance by which to translate each point along the y axis. | GradientBase

Protected Properties
Hide Inherited Protected Properties
Show Inherited Protected Properties

| Property | Defined By
--- | --- | ---
|  | compoundTransform : CompoundTransform Holds the matrix and the convenience transform properties (x, y, and rotation). | GradientBase

Public Methods

| Method | Defined By
--- | --- | ---
|  | RadialGradient() Constructor. | RadialGradient
|  | begin(target:Graphics, targetBounds:Rectangle, targetOrigin:Point):void Starts the fill. | RadialGradient
|  | end(target:Graphics):void Ends the fill. | RadialGradient

Public Constants
Hide Inherited Public Constants
Show Inherited Public Constants

| Constant | Defined By
--- | --- | ---
|  | GRADIENT_DIMENSION : Number = 1638.4 [static] Value of the width and height of the untransformed gradient | GradientBase

Property Detail

focalPointRatio | property

`focalPointRatio:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

Sets the location of the start of the radial fill.

Valid values are from `-1.0` to `1.0`. A value of `-1.0` sets the focal point (or, start of the gradient fill) on the left of the bounding Rectangle. A value of `1.0` sets the focal point on the right of the bounding Rectangle.

If you use this property in conjunction with the `angle` property, this value specifies the degree of distance from the center that the focal point occurs. For example, with an angle of 45 and `focalPointRatio` of 0.25, the focal point is slightly lower and to the right of center. If you set `focalPointRatio` to `0`, the focal point is in the middle of the bounding Rectangle.

If you set `focalPointRatio` to `1`, the focal point is all the way to the bottom right corner of the bounding Rectangle.

The default value is `0.0`.

This property can be used as the source for data binding.

Implementation
`public function get focalPointRatio():Number`
`public function set focalPointRatio(value:Number):void`

scaleX | property |

`scaleX:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

The horizontal scale of the gradient transform, which defines the width of the (unrotated) gradient

This property can be used as the source for data binding.

Implementation
`public function get scaleX():Number`
`public function set scaleX(value:Number):void`

scaleY | property |

`scaleY:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

The vertical scale of the gradient transform, which defines the height of the (unrotated) gradient

This property can be used as the source for data binding.

Implementation
`public function get scaleY():Number`
`public function set scaleY(value:Number):void`
Constructor Detail

RadialGradient | () | Constructor

`public function RadialGradient()`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

Constructor.

Method Detail

begin | () | method

`public function begin(target:Graphics, targetBounds:Rectangle, targetOrigin:Point):void`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

Starts the fill.

Parameters

| `target:Graphics` — The target Graphics object that is being filled.
| `targetBounds:Rectangle` — The Rectangle object that defines the size of the fill inside the `target`. If the dimensions of the Rectangle are larger than the dimensions of the `target`, the fill is clipped. If the dimensions of the Rectangle are smaller than the dimensions of the `target`, the fill expands to fill the entire `target`.
| `targetOrigin:Point` — The Point that defines the origin (0,0) of the shape in the coordinate system of target.

end | () | method |

`public function end(target:Graphics):void`

Language Version : | ActionScript 3.0

Product Version : | Flex 3

Runtime Versions : | Flash Player 9, AIR 1.1

Ends the fill.

Parameters

| `target:Graphics` — The Graphics object that is being filled.

Wed Nov 15 2017, 09:50 AM +01:00