Todos nós vimos isso em PSDs e muitas vezes tivemos que recorrer ao uso de imagens e similares … Texto com uma “cor” de preenchimento gradiente. Isso é super fácil de fazer no PhotoShop e no Illustrator (exemplo abaixo) …
Mas não é tão fácil no flex …
O Flex nos fornece ferramentas poderosas para manipular o plano de fundo de um componente Spark Label … mas muito poucas ferramentas úteis para manipular a cor do próprio texto.
Abaixo você pode ver como fazer isso facilmente, usando a tag <s: Graphic> e uma máscara.
Este código de exemplo também mostrará como adicionar um esboço a este texto. E para maior diversão, estamos lançando um brilho branco atrás dele.
Espero que seja útil para você. Poucos sites fornecem o código para truques avançados como esse.
Feliz 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>