Efficient Gradient Box


The standard containers like Canvas, HBox, VBox offer only a solid color background. Occasionally you’d want to place a gradient as a background – now you can, using this custom component GradientCanvas.

When often we are forced to use a bitmap as background (a very bad thing to do), the only viable alternative would be to create the effect programmaticaly in the component code. Besides the obvious the advantage of saving memory, it allows us to resize the container without any side effects Рmaking it a truly reusable component.

With the GradientCanvas properties its easy to control the colors, alphas and corners of the container – up to 16 entries of colors and alphas can be used.
The container code is a very basic example on how to create a custom container, and using it from mxml to achieve different effects.

<box:GradientCanvas top="30" left="290" width="190" angle="75"
	colors="[0xffffe4 , 0xfff97f, 0xfff97f, 0xfff97f, 0xef8d23]"  corners="[4,4,16,16]">
	<mx:VBox width="100%" top="16" paddingLeft="16" paddingRight="16" horizontalAlign="center" >
		<mx:Label text="While Supplies Last"/>
		<mx:Button label="Press Me" />
		<mx:Text width="100%" text="{someText}"  fontWeight="normal"/>
		<mx:Spacer height="22"/>
	</mx:VBox>
</box:GradientCanvas>

The code is compact, and most of the work is done inside the updateDisplayList function. Gradients can be created directly with the graphics drawing calls, but since we extent UIComponent its better to use the helper function that is already provided in the class.

This component can be further enhanced to leverage the functionality and create far more complex gradients, as much as needed.

One thought on “Efficient Gradient Box

  1. Thank you sooo much!
    I work with the old application, cannot use Spark components. Was trying to resolve the problem , but nothing worked. Your Box saved me a lot of headache.

Comments are closed.