I have a banner consisting of a left-to-right gradient (ending in white)
followed by a logo. The programmatic skin below is used as a border skin of
an HBox.
It looks great, and you can resize the window, but if you maximize it, the
darker color of the gradient appears on either side of the logo.
The MXML structure is as follows.
<mx:HBox width="100%" styleName="bannerBox"
verticalAlign="middle">
<mx:HBox width="100%" height="100%" styleName="bannerGradient"
verticalAlign="middle" >
<mx:VBox paddingTop="0" paddingBottom="0" verticalGap="0">
<mx:Label text="{resourceManager.getString('admin',
'productName_'+brand)}" styleName="productTitle"/>
<mx:Label text="{resourceManager.getString('admin',
'applicationName_'+brand)}" styleName="applicationTitle"/>
</mx:VBox>
</mx:HBox>
<mx:Image id="logo" source="{resourceManager.getObject('admin',
'companyLogo_'+brand)}" />
</mx:HBox>
Any ideas?
- Richard
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 cornerRadius:int = getStyle("cornerRadius");
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, 0x999999];
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 =
this.rotatedGradientMatrix(0,0,unscaledWidth,unscaledHeight,angle * Math.PI
/ 180);
this.drawRoundRect(0,0, unscaledWidth,unscaledHeight,
cornerRadius*.5, fillColors, fillAlphas, matrix, gradientType);
}