Flex Gradient Filled Text

We've all seen it in PSD's and often had to resort to using images and the like... Text with a gradient fill "color". This is super easy to accomplish in PhotoShop and Illustrator (example below)...

But it is not so easy in flex...

Flex gives us powerful tools to manipulate the background of a Spark Label component... but very few useful tools to manipulate the color of the text itself.

Below you can see how to easily perform this, using the <s:Graphic> tag and a mask.

This example code also will show you how to add an outline to this text. And for added fun, we are throwing in a white glow behind it.

Hopefully this is useful to you. Very few sites will actually give you the code for advanced tricks like this.

Happy Hacking!

<s:Graphic width="223"
   top="35" right="2" 
   height="25"
   maskType="alpha"
    >
    <s:Rect x="0" y="2" width="223" height="18">
          <s:fill>
                 <s:LinearGradient rotation="-90">
                        <s:entries>
                               <s:GradientEntry color="#7be31d"/>
                               <s:GradientEntry color="#eaff00" />
                               <s:GradientEntry color="#c9ff30" />
                        </s:entries>
                 </s:LinearGradient>
          </s:fill>
    </s:Rect>
    <s:mask>
          <s:Label id="wonMsgMask"
                         text="YAY! GRADIENT!"
                         textAlign="right"
                         verticalAlign="middle"
                         horizontalCenter="-1"
                         verticalCenter="0"
                         scaleX="1.05"
                         scaleY="1.05"
                         height="25"
                         width="223"
                         paddingRight="10"
                         fontSize="17"
                         fontWeight="bold"
                         fontStyle="italic"
                         >
          </s:Label>
    </s:mask>
    <s:filters>
          <s:GlowFilter alpha="0.45"
                                 blurX="2"
                                 blurY="2"
                                 color="#000000"
                                 strength="20"
                                 />
          <s:GlowFilter id="whiteGlow"
                                 alpha="1"
                                 blurX="25"
                                 blurY="25"
                                 color="#FFFFFF"
                                 strength="4"
                                 />
    </s:filters>
</s:Graphic>