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??