A customer submitted a bug this week requesting an easy way to use background gradients in our containers like VBox, HBox, etc. This sounded like a great request and I was surprised that we didn’t already offer this in the framework. I logged the bug as bug SDK-111200 and sought the help of our developer Glenn who is the master of all things styles, skins and themes. Glenn offered the simple solution of using a style we already have called applicationControlBar. Here is an example where you can control the hightlights, colors and alphas of the gradient:




.gradientBackground { borderStyle: applicationControlBar; fillColors: #EEEEFF, #8888AA; fillAlphas: 0.7, 0.7; highlightAlphas: 0, 0; }



This worked great. However, the customer came back to tell me that this style shifted all of the components in the container by one pixel. Apparently, this is because the applicationControlBar style has a default 1 pixel border. Oh well. So, if someone wants a simple gradient, and doesn’t care about that one pixel border, use the code above.

However, Glenn came up with an even better solution. I have to repeat, all of these solutions were kindly provided by Glenn Ruehle. I was just the messenger in this transaction with the customer. Glenn went ahead and created a custom gradient class that you can use on any container and control the gradientType, fillColors, fillAlphas, angle, and focalPointRatio of the style. Here is what it looks like:



Here is the code for this simple Application:




.gradientBackground1 {
backgroundImage: ClassReference(”GradientBackground”);
backgroundSize: “100%”;
fillColors: #EEEEEE, #999999;
fillAlphas: 0.5, 0.5;
}

.gradientBackground2 {
backgroundImage: ClassReference(”GradientBackground”);
backgroundSize: “100%”;
gradientType: radial;
fillColors: #FFCC33, #999999;
fillAlphas: 0.2, 0.5;
angle: 210;
focalPointRatio: 0.75;
}






And, here is Glenn’s code for the gradient background style:

package
{
import mx.skins.ProgrammaticSkin;
import flash.geom.Matrix;

public class GradientBackground extends ProgrammaticSkin
{
override public function get measuredWidth():Number
{
return 20;
}

override public function get measuredHeight():Number
{
return 20;
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var fillColors:Array = getStyle(”fillColors”);
var fillAlphas:Array = getStyle(”fillAlphas”);
var gradientType:String = getStyle(”gradientType”);
var angle:Number = getStyle(”angle”);
var focalPointRatio:Number = getStyle(”focalPointRatio”);

// Default values, if styles aren’t defined
if (fillColors == null)
fillColors = [0xEEEEEE, 0×999999];

if (fillAlphas == null)
fillAlphas = [1, 1];

if (gradientType == “” || gradientType == null)
gradientType = “linear”;

if (isNaN(angle))
angle = 90;

if (isNaN(focalPointRatio))
focalPointRatio = 0.5;

var matrix:Matrix = new Matrix();
matrix.createGradientBox(unscaledWidth, unscaledHeight, angle * Math.PI / 180);

graphics.beginGradientFill(gradientType, fillColors, fillAlphas, [0, 255] , matrix, “pad”, “rgb”, focalPointRatio);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
}
}