Try this:
package com.whatever.anotherwhatever.gradientbox
{
import mx.containers.Box;
[Style(name="fillColors", type="Array", arrayType="Number",
format="Color", inherit="no")]
public class GradientBox extends Box
{
import flash.display.*;
import flash.geom.*;
import flash.utils.*;
import mx.core.EdgeMetrics;
import mx.utils.GraphicsUtil;
import mx.logging.ILogger;
import mx.logging.Log;
private var myCornerRadius:Number; // top corner radius
private var myFillColors:Array; // fill colors (two)
private var _orientation : String = "vertical"
private static const log:ILogger =
Log.getLogger("com.betfair.controls.gradientbox.GradientBox");
[Bindable]
public static var ORIENT_VERTICAL : String = "vertical";
[Bindable]
public static var ORIENT_HORIZONTAL : String = "horizontal";
//
-------------------------------------------------------------------------------------
//
private function setupStyles():void
{
myCornerRadius = getStyle("cornerRadius") as Number;
if (isNaN(myCornerRadius)) myCornerRadius = 0;
// A Style metadata tag has been added for the fillColors
property since it is not a member of the superclass (Box)
myFillColors = getStyle("fillColors") as Array;
if (!myFillColors) myFillColors = [0xFFFFFF, 0xFFFFFF];
}
//
-------------------------------------------------------------------------------------
//
override protected function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
log.debug("GradientBox::updateDisplayList()");
super.updateDisplayList(unscaledWidth, unscaledHeight);
setupStyles();
var g:Graphics = graphics;
var b:EdgeMetrics = borderMetrics;
var w:Number = unscaledWidth - b.left - b.right;
var h:Number = unscaledHeight - b.top - b.bottom;
var m:Matrix;
if (this._orientation == ORIENT_VERTICAL)
{
m = verticalGradientMatrix(0, 0, w, h);
}
else
{
m = horizontalGradientMatrix(0, 0, w, h);
}
g.clear();
g.beginGradientFill("linear", myFillColors, [1, 1], [0,
255], m);
GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h,
myCornerRadius, myCornerRadius, myCornerRadius, myCornerRadius);
g.endFill();
}
public function set orientation(val : String) : void
{
this._orientation = val;
}
public function get orientation() : String
{
return this._orientation;
}
}
}
handles both orientations
HTH,
Cheers,
Claudiu
--- In [email protected], "Amy" <[EMAIL PROTECTED]> wrote:
>
> --- In [email protected], "gr33neye501" <devarc@> wrote:
> >
> > Does anyone know how to apply a gradient color to a Box control;
> > gradient going left to right, ie horizontally.
> >
> > I use style "fillColors: #ff0000, #0000ff" to get a vertical gradient,
> > top to bottom. but don't know how to do it horizontally.
> >
> > your help guys is really needed.
>
> http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html
>
> HTH;
>
> Amy
>
