Abaixo neste trecho de código vou explicar como adicionar efeitos aos componentes gráficos, usando mxml ou actionscript
Criando e adicionando um filtro em actionscript
// dropshadow
var filter1:DropShadowFilter = new DropShadowFilter();
É possível já configurar o filtro enviando os valores como parâmetro do construtor, ou configurando posteriormente.
var filter1:spark.filters.DropShadowFilter = new spark.filters.DropShadowFilter(4, 45, 0, 1, 4, 4, 1, 1, false, false, false);
// ou
filter1.distance = 4;
filter1.angle = 45;
filter1.color = 0;
filter1.alpha = 1;
filter1.blurX = 4;
filter1.blurY = 4;
filter1.strength = 1;
filter1.quality = 1;
filter1.inner = false;
filter1.knockout = false;
filter1.hideObject = false;
Instanciando o filtro com MXML:
<s:DropShadowFilter id="shadowFilter"
blurX="{shadowBlurX.value}"
blurY="{shadowBlurY.value}"
hideObject="{shadowHideObject.selected}"
color="{shadowColor.selectedColor}"
angle="{shadowAngle.value}"
distance="{Number(shadowDistance.text)}"
strength="{shadowStrength.value}"
quality="{shadowQuality.value}"
knockout="{shadowKnockout.selected}"
inner="{shadowInner.selected}"/>
Para adicionar o filtro ao componente gráfico é necessário incluí-lo aos filtros deste.
Com actionscript:
var elementoGrafico:Sprite = new Sprite();
elementoGrafico.filters = [filter1];
Com MXML:
<s:Rect id="rect" left="100" width="100" height="100" verticalCenter="0">
<s:fill>
<s:SolidColor color="{fontColor.selectedColor}"/>
</s:fill>
<s:filters>
<!-- filtro de sombra -->
<s:DropShadowFilter id="shadowFilter"
blurX="4"
blurY="4"
hideObject="false"
color="0x000000"
angle="45"
distance="5"
strength="1"
quality="1"
knockout="false"
inner="false"/>
<!-- filtro bevel -->
<s:BevelFilter id="bevelFilter"
blurX="4"
blurY="4"
angle="45"
distance="5"
strength="1"
quality="1"
shadowColor="0x000000"
highlightColor="0xffffff"
knockout="false"/>
</s:filters>
</s:Rect>
É possível também configurar filtros para componentes MXML usando o código actionscript dentro das tags
</fx:Script> ... </fx:Script>
O objetivo aqui é auxiliar na adição de filtros, porém abaixo um breve resumo das principais propriedades dos filtros acima:
blurX - quantidade de desfoque no sentido horizontal
blurY - quantidade de desfoque no sentido vertical
color - cor do efeito
alpha - o quanto o efeito será visivel de 0 a 1
angle - ângulo em que o filtro propagará
distance - o quão longe o efeito propagará
quality - qualidade com que o efeito sera renderizado (quanto maior mais complexa e lenta fica a renderização)
strength - força com que o filtro será aplicado
inner - se o filtro se propagará para o interior do objeto
hideObject - esconde o objeto e mantém apenas o efeito
highlightColor - cor do lado claro (luz) no filtro bevel
shadowColor - cor do lado escuro (sombra) no filtro bevel
Abaixo um pequeno exemplo que nos permite testar e aprender mais sobre esses filtros.