mx.graphics

# LinearGradient - AS3 Flex

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

Language Version: | ActionScript 3.0

Product Version: | Flex 3

Runtime Versions: | Flash Player 9, AIR 1.1

The LinearGradient class lets you specify the fill of a graphical element, where a gradient specifies a gradual color transition in the fill color. You add a series of GradientEntry objects to the LinearGradient object's `entries` Array to define the colors that make up the gradient fill.

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

      <mx:fill>
      	<mx:LinearGradient>
      		<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:LinearGradient>
      </mx:fill>

You can also define a LinearGradient 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.LinearGradient;

      	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:LinearGradient = new LinearGradient();

      		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 ];
      		fill.angle = 240;

       		// Draw a box and fill it with the LinearGradient.
      		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:LinearGradient>` tag inherits all the tag attributes of its superclass, and adds the following tag attributes:

      <mx:LinearGradient
        Properties
        angle="0"
      />

Default MXML Property `entries`

More examples

FXG
Paths in FXG and MXML graphics
Libraries and symbols in FXG and MXML graphics
Groups in FXG and MXML graphics
Shapes in FXG and MXML graphics
Text in FXG and MXML graphics
Fills in FXG and MXML graphics
Bitmap graphics in FXG and MXML graphics
Effects in FXG and MXML graphics

Learn more

Using gradient fills with chart controls
Graphics classes and elements
MXML graphics

Related API Elements

mx.graphics.GradientEntry
mx.graphics.RadialGradient
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
|  | constructor : Object A reference to the class object or constructor function for a given object instance. | Object
|  | entries : Array An Array of GradientEntry objects defining the fill patterns for the gradient fill. | GradientBase
|  | 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 | LinearGradient
|  | 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 : mx.geom:CompoundTransform Holds the matrix and the convenience transform properties (x, y, and rotation). | GradientBase

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | LinearGradient() Constructor. | LinearGradient
|  | addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event. | EventDispatcher
|  | begin(target:Graphics, targetBounds:Rectangle, targetOrigin:Point):void Starts the fill. | LinearGradient
|  | dispatchEvent(event:Event):Boolean Dispatches an event into the event flow. | EventDispatcher
|  | end(target:Graphics):void Ends the fill. | LinearGradient
|  | hasEventListener(type:String):Boolean Checks whether the EventDispatcher object has any listeners registered for a specific type of event. | EventDispatcher
|  | hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined. | Object
|  | isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter. | Object
|  | propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable. | Object
|  | removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void Removes a listener from the EventDispatcher object. | EventDispatcher
|  | setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations. | Object
|  | toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions. | Object
|  | toString():String Returns the string representation of the specified object. | Object
|  | valueOf():Object Returns the primitive value of the specified object. | Object
|  | willTrigger(type:String):Boolean Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type. | EventDispatcher

Events
Click for more information on events
Hide Inherited Events
Show Inherited Events

| Event | Summary | Defined By
--- | --- | --- | ---
|  | activate | [broadcast event] Dispatched when the Flash Player or AIR application gains operating system focus and becomes active. | EventDispatcher
|  | deactivate | [broadcast event] Dispatched when the Flash Player or AIR application operating loses system focus and is becoming inactive. | EventDispatcher

Public Constants
Hide Inherited Public Constants
Show Inherited Public Constants

| Constant | Defined By
--- | --- | ---

Property Detail

### 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. When this property is modified, it dispatches the `propertyChange` event.

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

### LinearGradient

()
Constructor

`public function LinearGradient()`

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.

© 2015 Adobe Systems Incorporated. All rights reserved.
Mon Apr 10 2017, 12:28 PM -07:00