A partir desta semana pretendo iniciar aqui no blog uma série de artigos explicando pequenas coisas que vocÊ pode fazer com o Flex.
Coisas simples como fazer uma animação, mas que podem ser algo complicado para quem está iniciando.
Como você já sabe, ou não, o Flex, diferentemente do Flash, não trabalha com a famosa timeline, ou linha do tempo.
Ou seja no flex a animação deve ser construída usando o Action Script e o MXML.
Vamos ao primeiro exemplo:
Objetivo: Mover um objeto de uma lado ao outro da animação ao clicar no botão.
Como fazer: Para executar esta ação basta você criar um componente de animação no mxml e apontar o mesmo para o objeto que deseja animar, após isso configuramos a ação no ActionScript e pronto!
Confira o código comentado:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”385″ height=”228″>
<!– Criando os objetos utilizados na animação –>
<mx:Button x=”310″ y=”10″ label=”Mover” click=”animar()” />
<mx:Canvas id=”objetoAnimado” x=”10″ y=”159″ width=”66″ height=”59″ backgroundColor=”#FF0000″>
</mx:Canvas>
<!– criando o objeto de animação–>
<mx:Move id=”animacao” target=”{objetoAnimado}” />
<!–Iniciando o Action Script –>
<mx:Script>
<![CDATA[
//função que será chamado ao clicar no botão
public function animar() {
//definindo o ponto de origem
animacao.xFrom = 10;
//definindo o ponto de chegada
animacao.xTo = 310;
//definindo a duração da animação
animacao.duration = 500;
//rodando a animação
animacao.play();
}
]]>
</mx:Script>
</mx:Application>
E agora veja o exemplo em funcionamento:
É isso, simples assim, em breve novas dicas de Flex3 aqui!