One of my very first posts on this blog was about how to create a “Generic Background Gradient for Containers“. In Flex 3, you could only use styles to create solid backgrounds for your various MX Containers. To accomplish a gradient background, you needed to write your own custom class that used the flash player’s native APIs to draw gradients.  After I posted this, multiple people also wanted to know how to give the container with a background rounded corners. You had to jump through a few extra hoops in your background gradient class to get this done, too.

Now, I decided to recreate the same scenario in Flex 4 with Spark containers. How would I create a background gradient for a Spark container? Actually, it was soooo easy. I didn’t need to write one line of Actionscript. I simply used the BorderContainer component and created either a LinearGradient fill or a RadialGradientFill for it. I could also specify a cornerRadius style for BorderContainer to give it rounded corners. So, while you had to use a custom AS class in Flex 3, a gradient background on a Spark container looked like this:

<s:BorderContainer width=”300″ height=”200″ cornerRadius=”10″ x=”16″ y=”13″>
<s:backgroundFill>
<s:LinearGradient id=”gradient1″ rotation=”90″>
<s:entries>
<s:GradientEntry id=”entry1″ color=”0xEEEEFF” alpha=”0.7″/>
<s:GradientEntry id=”entry2″ color=”0x8888AA” alpha=”0.7″ />
</s:entries>
</s:LinearGradient>
</s:backgroundFill>
</s:BorderContainer>

Super simple! The example that you can download from this entry shows you how to create both linear and radial gradients.

Sample Code: gradientBackgroundSample.mxml

Sample SWF: gradientBackgroundSample.swf