Monthly Archives: April, 2010

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

Adobe and the Flex team are hiring

There are actually quite a few positions that we have open within the Flex organizations from Builder, the SDK and Catalyst. Without good people, we won’t be able to fulfill our huge agenda for the coming year. Help!

On our SDK QA team, I think we are looking for two people and have been having trouble finding good candidates. We’d love to get in contact with you if you are already a Flex developer passionate about our product. I think we can teach someone QA skills, but, it would be harder to inject enthusiasm for the work we do. Of course, someone with lots of QA experience is also welcome to apply even w/o any Flex knowledge.

Here is a Craigslist posting that just went up today specifically regarding the opening on my team:

http://sfbay.craigslist.org/sfc/sof/1693852460.html

Generally, we are looking for someone in our San Francisco office, but, if you are really, really, really awesome… I’m sure a remote position can be considered. Its not preferred.

If you are interested, drop me a private comment with your email address and I’ll send you an email asking for your resume.

Support for Illustrator blend modes in Flex 4

One of the little known features that we added to Flex 4 was the ability to use more blend modes in your mxml graphics. Flex supported blend modes in previous versions, however, the only ones supported were those that were natively supported by the Flash Player. This list of blend modes included: add, alpha, darken, difference, erase, hardlight, invert, layer, lighten, multiply, normal, overlay, screen and subtract.  A good description of these blend modes can be found in this article on InsideRIA.  Adobe Illustrator supports many other blend modes that Flex 4 added support for including colorburn, colordodge, softlight, exclusion, hue, saturation, color and luminosity. Since these blend modes are not supported by Flash Player APIs, the Flex SDK is using wrapper classes for pixel bender filters to recreate the blend modes.  If you are curious and want to look at the code for these pixel bender filters, you can find them in <flex_sdk>/frameworks/projects/framework/src/mx/graphics/shaderClasses/ wherever your SDK is installed.

To specify one of these blend modes in Flex 4, you would do something like:

<s:Group x=”580″ y=”400″ blendMode=”normal”>
<s:BitmapImage source=”@Embed(‘ks95553_s.jpg’)” x=”0.5″ y=”0.5″ blendMode=”colorburn” width=”90″ height=”124″ />
</s:Group>

Here is a view of what various blend modes in Flex will do.

Blendmode sample: BlendModes.swf

Download source: BlendModes.zip