Application Background Gradients in Flash Builder 4 (Flex Gumbo)

June 1st, 2009 · 3 Comments

I was playing around with the beta release of Flex Builder 4 (now called Flash Builder 4 or Gumbo while it’s in beta) and I was astonished to see the linear background gradient options removed from CSS styles.  After some research I found an article by Peter deHaan over at flexexamples.com.  His article was somewhat dated in that it didn’t include the new (heavily debated) namespace changes, so I changed his source to include the new namespace rules and, voila, it worked perfectly.

It seems that you must create a new MXML component that extends the fx:Skin component and use FXG to draw the gradient yourself on the skin.  You then set the skinClass property of the fx:Application to your newly created MXML fx:Skin component.

See the Application in Action
View the Source

fx:Application with Linear Gradient Background

Tags: ActionScript · Flash · Flash Builder 4 · Flex · Gumbo