Criando os efeitos Move e Resize com Flex

"Criar efeitos no Flex não é algo trabalhoso, principalmente quando se quer criar efeitos de transição, como aumentar painéis ou então mover containers na tela.


Vamos inicialmente mover um Panel. Crie um Panel com as seguintes características:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Button id="MyButton" label="Mover">
<mx:click>
MyPanel.x = 300;
</mx:click>
</mx:Button>

<mx:Panel id="MyPanel" x="20" y="23" width="162" height="129" layout="absolute" title="Eu sou um Panel" >
<mx:Label x="10" y="10" text="x: {MyPanel.x }  y: {MyPanel.y} "/>
</mx:Panel>

</mx:Application>

Até aqui temos um Panel e um botão. Dentro do Panel temos um label que indica a posição X e Y do Panel. Ao clicar no botão, alteramos a propriedade X do Panel, fazendo que que ele 'pisque' para o outro lado da tela. Até aqui tudo normal.


E como fazer para que o Panel realize o movimento de mover sobre a tela? Simples... Existe uma propriedade do panel chamada 'moveEffect'. Aqui está o segredo. Basta adicioná-lo ao Panel para ver o resultado.

<mx:Panel id="MyPanel" x="20" y="23" width="162" height="129"
layout='absolute' title='Eu sou um Panel' moveEffect='Move' >

Muito simples!

O mesmo acontece com o resizeEffect. Veja o exemplo a seguir.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Button id="MyButton" label="Mover">
<mx:click>
MyPanel.x = 300;
MyPanel.width = 300;
MyPanel.height = 300;

</mx:click>
</mx:Button>

<mx:Panel x="20" y="23" width="162" height="129" layout="absolute" title="Eu sou um Panel" id="MyPanel"
moveEffect='Move' resizeEffect='Resize'>
<mx:Label x="10" y="10" text="x: {MyPanel.x }  y: {MyPanel.y} "/>
</mx:Panel>

</mx:Application>

Existem dezenas de outros efeitos que podem ser consultados em: http://livedocs.adobe.com/flex/3/langref/mx/effects/package-detail.html"