AS 3.0/ Flex

Flex Crônicas – parte 2

Trabalhar com efeitos de transições dentro do Flex é bem mais fácil do que possa imaginar, mas a idéia de movimentos é igual a que temos no Flash, sem mudar praticamente nada.
De acordo com o help que o Flex traz, ele sugere que você faça transições tanto usando States como transições de objetos usando os tags para inserir a transição.
Entretanto no caso de ser usado mais que uma “transição”, ele pede que você obrigatoriamente use a seguinte syntax. 

1
2
3
4
5
6
7
8
9
10
11
12

</mx:Application>
<mx:Transition id="trans" fromState="*" toState="*">
<mx:Transitions id="trans1">
<!-- tipo de efeito aqui-->
</mx:Transitions>
<mx:Transitions id="trans2">
<!-- tipo de efeito aqui-->
</mx:Transitions>
<mx:Transitions id="trans3">
<!-- tipo de efeito aqui-->
</mx:Transitions>
</mx:Transition>

Porém no help não existe alguns tips que você possa inserir efeitos sem precisar de tais organizações que nele acompanha. Eu tentei fazer outras formas e consegui com sucesso. Por exemplo na aplicação abaixo você pode fazer o efeito de WipeLeft e WipeRight sem precisar colocar toda essa parafernalha que ele pede para fazer transições.

Exemplo 1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:WipeRight id="efeito" duration="1000"/>
<mx:WipeLeft id="efeito2" duration="500"/>
<mx:Panel title="Exemplo de transições" x="37.5" y="63" width="540" height="249">
<mx:ViewStack id="base" width="100%" height="100%" creationCompleteEffect="efeito">
<mx:Canvas showEffect="{efeito}" hideEffect="{efeito2}" width="100%" height="100%" id="estado1">
<mx:Text x="115" y="83" text="Ola bem vindo ao estado um de nosso Install Flex"/>
</mx:Canvas>
<mx:Canvas showEffect="{efeito}" hideEffect="{efeito2}" width="100%" height="100%" id="estado2">
<mx:DateField x="29" y="52"/>
<mx:Label x="10" y="26" text="Escolha uma data:"/>
<mx:DateChooser x="314" y="10"/>
<mx:Label x="220" y="26" text="Ou use esse:"/>
</mx:Canvas>
<mx:Canvas showEffect="{efeito}" hideEffect="{efeito2}" width="100%" height="100%" id="estado3">
<mx:Text x="119.5" y="76" text="Obrigado Etapas concluídas" fontSize="20"/>
</mx:Canvas>
</mx:ViewStack>
</mx:Panel>
<mx:Button x="326" y="320" click="base.selectedIndex = base.selectedIndex +1;" id="ant" label="Próximo"/>
<mx:Button x="222" y="320" click="base.selectedIndex = base.selectedIndex -1;" id="pro" label="Anterior"/>
</mx:Application>

Veja que se fosse usar alguma coisa parecida eu teria que criar todo aquila idéia que o help pede. Mas o que realmente Acontece? Bom quando você usa o não queira dizer que está errado, apenas seu Filme vai pesar mais do que deveria, por que ele vai fazer o import completo da classe de transição a classe “mx.states.Transition”. Que na verdade se for usar isso você vai tá precisando usar só a classe “mx.effects.easing.*” que não precisaria importar a classe States.Transition, o que não deixa de forma nenhuma de funcionar. Veja outro exemplo abaixo que fiz usando outros tipos de efeitos sem precisar usar o tag Transition. Que ao meu ver é descartável em ambos os exemplos.

Exemplo 2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Script>
 
  import mx.effects.easing.*;
 
  </mx:Script>
  <!-- Efeitos -->
  <mx:Rotate id="rodar" target="{painel}" easingFunction="Bounce.easeIn" duration="900" repeatDelay="100" repeatCount="9"/>
  <mx:Move id="moverDir" target="{painel}" easingFunction="Elastic.easeOut" duration="400" xBy="400"/>
  <mx:Move id="moverEsq" target="{painel}" easingFunction="Bounce.easeIn" duration="500" xFrom="400" xTo="10"/>
  <mx:Fade id="FadeIN" target="{painel}" easingFunction="Bounce.easeIn" duration="800" alphaFrom="1" alphaTo="0" filter="show"/>
  <mx:Fade id="FadeOUT" target="{painel}" easingFunction="Bounce.easeIn" duration="800" alphaFrom="0" alphaTo="1" filter="show"/>
  <mx:Transition> </mx:Transition>
  <!-- Controles -->
  <mx:Button click="rodar.play();" x="176" y="331" label="Rodar"/>
  <mx:Button click="moverDir.play();" x="244" y="331" label="Mover a +400"/>
  <mx:Button click="moverEsq.play();" x="356" y="331" label="Mover a -400"/>
  <mx:Button click="FadeIN.play();" x="464" y="331" label="FadeIn"/>
  <mx:Button click="FadeOUT.play();" x="176" y="361" label="FadeOut"/>
  <mx:Panel id="painel" x="215.5" y="101" width="184" height="137" layout="absolute" title="Alvo">
  </mx:Panel>
  <mx:Label x="19" y="345" text="Escolha uma das Opções:" fontWeight="bold"/>
  <mx:Label x="10" y="10" text="Exemplo com transições diferentes" fontSize="15" color="#ffffff" fontWeight="bold" fontFamily="Verdana"/>
</mx:Application>

Veja que usei outros efeitos de transições sem precisar usar novamente o tag que novamente tornou-se desnecessário. A questão de ter feito o import da classe effects.easing.* foi para poder usar alguns métodos como Elastic, Bounce, Back,Linear,etc, e suas propriedades easeIn e easeOut.

Você ainda pode praticar alguns apliques de filtros dentro dos efeitos que você está criando, por exemplo no código abaixo usei o efeito de PixelDisolve.

Exemplo 3:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
 
//import mx.effects.easing.*;
import mx.effects.Dissolve;
 
</mx:Script>
<!-- Efeitos -->
<mx:Dissolve id="disolver" alphaFrom="1" alphaTo="0" color="0x0000" duration="700" target="{painel}"/>
<mx:Blur repeatCount="1" id="Blur" duration="700" target="{painel}" blurXFrom="0" blurXTo="8.0"/>
<!-- Controles -->
<mx:Button click="disolver.play();" x="176" y="331" label="Disolver"/>
<mx:Button  click="Blur.play();" x="257" y="331" label="Blur"/>
<mx:Panel id="painel" x="215.5" y="101" width="184" height="137" layout="absolute" title="Alvo">
</mx:Panel>
<mx:Label x="36" y="333" text="Escolha uma Opção:" fontWeight="bold"/>
<mx:Label x="10" y="10" text="Exemplo com transições diferentes" fontSize="15" color="#ffffff" fontWeight="bold" fontFamily="Verdana"/>
</mx:Application>

2 thoughts on “Flex Crônicas – parte 2”

  1. legal os exemplos Igor mas como eu faço pra mover 2 ou mais painéis por exemplo? Imagine que eles estão enfileirados e quando clico em um deles ele expande e os outros ficam logo abaixo. Teria como postar o texto plano??

  2. Anderson, é só colocar os IDs dos Panels que você quer usar separados por “;” Ex “panel1;panel2;panel3” />

Comments are closed.