Apply Gradient to Box

programming flash
1

I need to apply a gradient and I read this article about making a custom MXML component to accomplish this. It seemed pretty straight forward but I haven’t been able to get the gradient to appear.

I guess the only wrinkle is that I wanted to assign a bindable var to it so that I can easily change the values based on what button a user clicks on. I’ve tried sticking hard values in and it still won’t render.

Here’s my code:

My app’s main.mxml


//In a script node:
[Bindable] public var beginGradient:uint;
[Bindable] public var endGradient:uint;

private function loadLayout(index:int):void
{this.beginGradient =  moduleXML.moduleItem[index].attribute("beginGradient");
this.endGradient =  moduleXML.moduleItem[index].attribute("endGradient");
}

<local:GradientBox id="hbox" gradientFrom="{beginGradient}" gradientTo="{endGradient}" width="650" horizontalGap="0" height="330" styleName="insetBox" clipContent="true"  cornerRadius="10" backgroundColor="#F2EBE8" borderThickness="1" borderColor="#BBBBBB" x="5" y="5" borderStyle="solid">

GradientBox.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Box	xmlns:mx="http://www.adobe.com/2006/mxml"
	borderStyle="solid"
	borderThickness="0">

	<mx:Script>
		<![CDATA[		
		
	    import flash.display.*;
	    import flash.geom.*;
	    import flash.utils.*;
	    
	    import mx.core.EdgeMetrics;
	    import mx.utils.ColorUtil;
	    import mx.utils.GraphicsUtil;
        
        public var _gradientFrom:uint;
	    public var _gradientTo:uint;


	    public function set gradientFrom(value:uint):void
	    {
		this._gradientFrom = value;
	    }

	    public function set gradientTo(value:uint):void
	    {
		this._gradientTo = value;
	    }

            // ------------------------------------------------------------------------------------- //
        
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
            	trace("update called!");
                super.updateDisplayList(unscaledWidth, unscaledHeight);    
            
                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 = verticalGradientMatrix(0, 0, w, h);

        	g.clear();
                g.beginGradientFill("linear", [_gradientFrom, _gradientTo], [1, 1], [0, 255], m);
            
                var cn:uint = this.getStyle("cornerRadius");
                GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, cn, cn, cn, cn);
                g.endFill();
                
             }

		]]>
	</mx:Script>
	
</mx:Box>