Efeitos básicos, deixe a sua aplicação mais agradável

Blz?!

É muito importante quando se está desenvolvendo uma aplicação a confiabilidade na persistências dos dados,
a usabilidade de aplicação como um todo e para isso ficar mais agradável ao usuário pode-se fazer uso de efeitos de transição e se bem aplicados ganham pontos positivos do usuário final. Nesse exemplo veremos duas maneiras de aplicar efeitos de transição: usando a tag de efeito diretamente no mxml e também como fazer a mesma coisa com "actionScript puro".


< ?xml version="1.0" encoding="utf-8"?>
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="380" height="192">
  < mx:Script>
    < ![CDATA[
      import mx.effects.Sequence;
      import mx.effects.Move;
      import mx.effects.Blur;
    
      private function efeito(): void {
        var
          _rSeq: Sequence = new Sequence(),
          _rMv: Move = new Move(),
          _rRt: Rotate = new Rotate();
      
        // Configurando os efeitos
        _rMv.duration = 1000;
        _rMv.xTo = 330;
        _rMv.xFrom = 36;
        _rRt.duration = 100;
        _rRt.angleFrom = 45;
      
        // Agrupando os efeitos no parallel
        _rSeq.addChild(_rMv);
        _rSeq.addChild(_rRt);
  
        _rSeq.target = cvImg;
        _rSeq.play();  
      }
    ]]>
  < /mx:Script>
  < !-- Montando o efeito apenas com as tags no mxml  -->
  < mx:Parallel id="effPar">
     < mx:Rotate id="effRotate" duration="1000" angleFrom="45" target="{cvImg}"/>
     < mx:Move target="{cvImg}" duration="1000" xTo="330" xFrom="40"/>
  < /mx:Parallel>

  < !-- Efeito usado para destacar o botão "Start - as" quando o mouse estiver sobre o mesmo -->
   < mx:Blur duration="500" id="efBlur" target="{btnAs}"/>
  < mx:Canvas id="cvImg" x="20" y="97" width="36" height="36" borderStyle="solid" cornerRadius="20" borderColor="#070707" backgroundColor="#B6B752">
    < mx:Button x="12.6" y="0" label="Button" width="8.759999" height="34" enabled="false" cornerRadius="10" fillAlphas="[1.0, 1.0]" fillColors="[#114ECC, #040000]"/>
  < /mx:Canvas>

  < !-- Basta "acionar o play()" e pronto -->
  < mx:Button x="20" y="10" label="Start - mxml" click="{effPar.play()}" height="30"/>

  < !-- Como o efeito está sendo construido totalmento no actionScript, chamamos um método -->
  < mx:Button id="btnAs" x="126" y="9" label="Start - as" width="98" height="31" click="efeito()" mouseOver="{efBlur.play()}"/>
< /mx:Application>

Os dois botões possuem os mesmos efeitos e as mesmas configurações, o que diferencia o comportamento é a classe Parallel (executa seus filhos simultâneamente) e a classe Sequence (executa seus filhos um após o outro).

Outras classes de efeito:

• Blur
• Dissolve
• Fade
• Glow
• Iris
• Move
• Resize
• Rotate
• Zoom

Bons estudos e bom trabalho a todos.

Abraços