A utilização de efeitos no Flex é um dos grandes pedidos da comunidade. O uso moderado de efeitos pode tornar a sua aplicação mais bonita e funcional, só não abuse porque o usuário do sistema vai cansar de ver tanto componente girando na tela 
Uma notícia não muito boa do Flex 4 é que não podemos mais utilizar as propriedades MoveEffect, ResizeEffect.. entre outros no Flex 4, devendo atribuir cada efeito diretamente na declaração do documento mxml. Isso significa que toda a descrição de um efeito deve estar contida na tag fx:Declarations.
Efeito Move
Este efeito é responsável em mover componentes na tela. Uma simples aplicação para ela é, por exemplo, uma tela de login:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<fx:Declarations>
<s:Move id="MoveDown" target="{login}"
yFrom="-200" yTo="200"/>
<s:Move id="MoveUp" target="{login}"
yFrom="200" yTo="-200"/>
</fx:Declarations>
<s:creationComplete>
<![CDATA[
MoveDown.play();
]]>
</s:creationComplete>
<s:Panel id="login" title="Login"
width="200" height="150"
x="300"
>
<s:Button label="ok" x="50" y="50">
<s:click>
<![CDATA[
MoveUp.play();
]]>
</s:click>
</s:Button>
</s:Panel>
</s:Application>
Neste simples exemplo, criamos dois efeitos chamados de MoveDown e MoveUp. O efeito Move possui as propriedades yTo e yFrom, que descrevem a animação do efeito de mover, da coordenada y de origem e da coordenada y de destino. O mesmo vale para xFrom e xTo. Outra propriedade é o target, que informa o alvo em que o efeito será realizado. Neste caso o target é o panel criado.
Para realizarmos o efeito, usamos o método play(). Ele é feito no creationComplete da aplicação e no click do botão.
Aplicando bounce
Bom, o efeito acima é muito simples, e possivelmente você não gostou dele. Você quer dar mais “efeito ao efeito” e para isso existem os efeitos do tipo bounce. Esta técnica aplica um efeito de “mola” no componente, e é ativado através do efeito s:Bounce do Flex 4. Veja:
<fx:Declarations>
<s:Bounce id="bounceEasing"/>
<s:Move id="MoveDown" target="{login}"
yFrom="-200" yTo="200"
easer="{bounceEasing}"
duration="2000"
/>
<s:Move id="MoveUp" target="{login}"
yFrom="200" yTo="-200"
/>
</fx:Declarations>
Neste exemplo, criamos o efeito Bounce e aplicamos ele no efeito MoveDown, através da propriedade easer. Utilizamos também a propriedade duration para definir a duração do movimento, em milissegundos.
Aplicando efeitos simultâneos
Podemos aplicar efeitos ao mesmo tempo em um componente através da tag Parallel (Paralelo). O Exemplo a seguir ilustra como combinar o efeito de Fade (aparecer) com o Move:
<s:Parallel id="MoveDown" target="{login}">
<s:Move
yFrom="-200" yTo="200"
easer="{bounceEasing}"
duration="2000"
/>
<s:Fade alphaFrom="0" alphaTo="1"
duration="2000"
/>
</s:Parallel>
Neste exemplo, criamos a tag s:Parallel e já definimos o seu target. Inserimos então os efeitos Move e Fade. O Fade possui duas propriedades novas, alphaFrom e alphoTo. Alpha é o valor da transparência sendo que o valor 0 é totalmente transparente e o valor 1 é totalmente opaco.
Aplicando Targets dinâmicos
Nos exemplos exibidos, sempre relacionamos o efeito ao componente. Ou seja, todos os efeitos faziam uma referência ao componente. Em determinados momentos, precisamos criar componentes dinâmicos no Flex, e para que possamos aplicar efeitos nestes componentes, precisamos definir um target dinâmico também. O método play que foi usado nos exemplos anteriores possui um parâmetro que aceita um array de componentes, que pode ser usado da seguinte forma:
NomeDoEfeito.play([componente1,componente2]);
O exemplo a seguir mostra este processo:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<fx:Declarations>
<s:Bounce id="bounceEasing"/>
<s:Parallel id="MoveDown">
<s:Move
yFrom="-100" yTo="400"
easer="{bounceEasing}"
duration="2000"
/>
<s:Fade alphaFrom="0" alphaTo="1"
duration="1000"
/>
</s:Parallel>
<s:Fade id="Sumir" alphaFrom="1" alphaTo="0"
duration="500"
/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
import mx.events.EffectEvent;
private function OnClick(e:MouseEvent):void
{
Sumir.play([e.target as Button]);
}
]]>
</fx:Script>
<s:Button label="Criar">
<s:click>
<![CDATA[
var b:Button = new Button();
b.x = Math.round(Math.random() * 600);
b.label = b.x.toString();
b.y = -100;
b.addEventListener(MouseEvent.CLICK,OnClick);
this.addElement(b);
MoveDown.play([b]);
]]>
</s:click>
</s:Button>
</s:Application>
Neste exemplo, criamos botões dinâmicos que caem na tela. Ao clicar no botão, aplicamos um efeito de Fade para que tenhamos a sensação de que ele sumiu da tela, apesar dele continuar lá. Veja que usamos três efeitos agora, o primeiro é contido no Parallel (2 efeitos então) e o terceiro é um Fade para sumir o botão.
Ao clicar no botão “Criar”, criamos dinamicamente um botão e definimos o valor da coordenada x como um número randômico até 600. A coordenada y é –100, pois ainda vamos aplicar o efeito de movimento nele. Também adicionamos um listener no click do botão, executando o método OnClick. Este método irá executar o efeito de Fade.
Como os efeitos são realizados em componentes dinâmicos, temos que passá-lo como parâmetro do método play. Como este parâmetro é sempre um array, usamos os colchetes para simular um array com um elemento.
Atenção: Este exemplo serve apenas para ilustrar o processo. Veja que mesmo sumindo com os botões através do efeito fade, eles continuam lá, na memória.
No próximo artigo iremos falar mais sobre efeitos. A idéia é aplicar os efeitos em coisas úteis, ao invés de ficar mostrando como cada efeito funciona sem nenhum uso apropriado. Idéias pessoal??
