View comments | RSS feed
Packagemx.graphics
Classpublic class LinearGradient
ImplementsIFill

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 classes 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" alpha=".5"/>
     <mx:GradientEntry color="0xFEFE24" ratio=".33" alpha=".5"/>
     <mx:GradientEntry color="0xECEC21" ratio=".66" alpha=".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,.5);
    var g2:GradientEntry = new GradientEntry(0x000000,.33,.5);
    var g3:GradientEntry = new GradientEntry(0x99FF33,.66,.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 Syntaxexpanded 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"
  />
  

See also

mx.graphics.GradientEntry
mx.graphics.RadialGradient
mx.graphics.IFill
Using a gradient fill with chart controls


Public Properties
 PropertyDefined by
  angle : Number
Controls the transition direction.
LinearGradient
Public Methods
 MethodDefined by
  
Constructor.
LinearGradient
  
Starts the fill.
LinearGradient
  
end(target:Graphics):void
Ends the fill.
LinearGradient
Property detail
angleproperty
angle:Number  [read-write]

Controls the transition direction. By default, the LinearGradient class defines a transition from left to right across the graphical element. A value of 180 causes the transition to occur from right to left.

Implementation
    public function get angle():Number
    public function set angle(value:Number):void
Constructor detail
LinearGradient()constructor
public function LinearGradient()

Constructor.

Method detail
begin()method
public function begin(target:Graphics, rc:Rectangle):void

Starts the fill.

Parameters
target:Graphics — The target Graphics object that is being filled.
 
rc: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.
end()method 
public function end(target:Graphics):void

Ends the fill.

Parameters
target:Graphics — The Graphics object that is being filled.




Comments


No screen name said on Jul 19, 2006 at 3:16 AM :
This may be a stupid comment, but pasting:

<mx:fill>
<mx:LinearGradient>
<mx:entries>
<mx:GradientEntry color="0xC5C551" ratio="0" alpha=".5"/>
<mx:GradientEntry color="0xFEFE24" ratio=".33" alpha=".5"/>
<mx:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
</mx:entries>
</mx:LinearGradient>
</mx:fill>

into my Flex App causes the error:

Could not resolve <mx:fill> to a component implementaion.
danger42 said on Jul 20, 2006 at 12:21 PM :
That's a good point, actually. The doc should say that mx:fill can only be used as a child tag of controls that support the fill property. In this case, you can use it as a child tag of most chart controls (all the ones the inherit from the ChartBase class), legend items, and most chart series (all except for HLOCSeries), plus PieSeriesItem.

hth,

matt horn
flex docs

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/2/langref/mx/graphics/LinearGradient.html