Como definir efeitos de transição em componentes no Flex 3
O Flex provê diversos efeitos que podemos colocar em qualquer componente visual. A forma mais simples de fazer isso é definindo as propriedades dos triggers desses eventos.
Triggers são parecidos com eventos, mas não são iguais. Quando um evento é disparado, um eventListener captura esse evento e executa alguma função em AS. Quando um trigger é disparado, um efeito é executado. Um trigger não pode executar uma função em AS e versa-vice. Da mesma forma como associamos funções a eventos através dos eventListeners, precisamos associar efeitos a componentes através dos triggers. Vamos ver agora como fazer isso.
A forma mais simples (simples de verdade!) é definir a propriedade que tem o nome do trigger com o valor do efeito desejado. Os nomes dos triggers sempre têm essa forma: eventoDoTriggerEvent, onde eventoDoTrigger é o … hmm … nome do evento do trigger. Acho que não estou sendo muito claro. Vamos ver um exemplo pra facilitar:
Quando pressionamos o mouse sobre um botão, ele dispara o evento mouseDown e o trigger mouseDownEffect. Assim, se quisermos que o botão tenha um efeito de zoom ao ser clicado, podemos criá-lo assim:
<mx:Button x="10" y="166" label="Clique com zoom" mouseDownEffect="Zoom"/>
Não falei que era simples? 
Alguns dos efeitos mais comuns disponíveis no Flex 3 são: Zoom, WipeUp, WipeDown, WipeLeft, WipeRight, Blur, Dissolve, Fade, Glow, Iris, Move, Resize, Rotate e SoundEffect. Com este último é possível executar um áudio mp3 durante um efeito.
Eu fiz uma aplicação bem simples pra mostrar como usar os efeitos na transição entre states. Quando essa aplicação muda de um state para o outro, uns botões somem com efeitos diversos enquanto o primeiro deles muda de lugar. Ao mudar de state, os botões disparam os triggers addedEffect (ao ser adicionado como filho a outro componente), removedEffect (ao ser removido do componente pai) e moveEffect (ao mudar de lugar). Eu deixei um último botão paradão no final pra ilustrar a linha de código que coloquei acima, onde o botão executa o efeito de zoom quando clicado (concordo, nenhuma aplicação prática, mas é só pra servir de exemplo). Veja a aplicação abaixo e o código fonte aqui:
Também é possível criar os efeitos de outra forma, mas não vou falar sobre isso neste artigo. Com essa forma simples já dá pra incrementar bem sua aplicação. Você pode encontrar mais detalhes sobre esses efeitos na documentação.
Poderia avaliar este artigo, por favor? |
  Loading ... |
Posts relacionados
-
Arnaldo
-
http://blog.geraldoandrade.com/ Geraldo Andrade
-
Rodrigors17