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 flexcoders@yahoogroups.com, "Amy" <[EMAIL PROTECTED]> wrote: > > --- In flexcoders@yahoogroups.com, "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 >