Quantcast
Channel: FlexWiz Blog » Container
Viewing all articles
Browse latest Browse all 2

Efficient Gradient Box

0
0


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.


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images