Gradient Backgrounds for Spark Containers

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

About these ads

7 responses

  1. Slightly off topic, but you look like a right person to ask this question. Can you please recommend some forum, blog etc. with the examples, articles, latest news and trends related to Flex 4 styling, skinning and themes? I mean that probably there is some single point of contact on this subject? Flex documentation does not look concise and accurate at this point and does not give clear guidelines and best practices for styling not speaking about serious extended examples rather than small fragments of styling code. I would greatly appreciate if you could point me to the place where real experts discuss this subject on a permanent basis.

    1. @Luiz: The best place for questions would be the Adobe Flex Forums. Many people on our team look at the questions there every day and answer them. Be sure to be specific, post code, if possible and you are much more likely to get the answer that you are looking for. Good luck!

      I believe that this article on Flex 4 skinning should be up to date:

      http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

      It is written by a developer on our team. If you have questions about it, you can probably also go to his blog. He hasn’t written to it in a while, but, I’m sure if you leave him a comment/question, he’ll respond. Good luck. http://frishy.blogspot.com/

      1. Joan-
        Thanks for a prompt response! This is a really nice tutorial for beginners and I’ve read it at the time when it was published about a year ago. At this point I am looking for more advanced and in-depth materials. For example, what it takes to create a complete new theme, or modify an existing one? Looks like there is a gap between introductory materials and real-life projects that require much more knowledge of best practices and tons of details. Probably what I am looking for is something similar to what Juan Sanchez from ScaleNine did for Flex3 a couple of years ago. Do not think that something like that exists for Flex 4, but at least I hope to find the place, maybe at at Adobe Forums as you suggested, for in-depth discussions. Thanks a lot again!

  2. Hi Joan Lafferty,

    My doubt is:
    How can i get menubar submenus as dropup’s? I need to show like “when i click on menubar it show’s submenu as dropdown popup, But i need instead of that dropup popup”

  3. Great example.Thank you..

  4. this is really great info in how to make gradient containers

  5. NIce

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: