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> |
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??
Anderson, é só colocar os IDs dos Panels que você quer usar separados por “;” Ex “panel1;panel2;panel3” />