Flash: Animação com rotationY

Pessoal, vamos criar um efeito bem simples, apenas rotacionando pequenos quadrados que estarão por cima de uma imagem. Vou disponibilizar essa imagem para fazer o tutorial, mas fica a sua escolha o uso de qualquer imagem.

Vamos utilizar mais uma vez o motor de interpolação da greensock, você pode baixá-lo clicando aqui.

Crie um arquivo no flash do tipo ActionScript 3.0 e importe a imagem escolhida para dentro do arquivo criado. Se o tamanho do palco estiver maior ou menor que a imagem escolhida, não faz nenhuma diferença, pois vamos ajustar o tamanho do palco para o tamanho da imagem.

Click na imagem escolhida que está no palco. Observe que no painel Properties você pode visualizar o posicionamento x e y e o tamanho width e height. Deixe x e y com 0 (zero) e repare que a imagem ficou alinhada no topo e a esquerda.

Agora pressione ctrl + j para ajustar o tamanho do palco e após configurar o palco de acordo com sua imagem pressione OK.

Crie uma nova camada e trave a camada onde está nossa imagem clicando no cadeado. Usando a ferramenta de desenho Rectangle Tool ou simplesmente pressionando r que é o seu atalho, desenhe um quadrado de 50 por 50, escolha a cor de preenchimento branca e deixe sem contorno. Converta o quadrado criado para um movie clip e em Registration deixe alinhado no topo e à esquerda. Marque também a opção Export for ActionScript e em Class escreva “Box” clique em OK.

Como já referenciamos uma classe ao movie clip podemos deletá-lo do palco, pois o adicionaremos de forma dinâmica. Crie uma nova camada e pressione f9 para visualizar o painel ACTIONS e digite:

import flash.display.MovieClip;

var box:MovieClip = new Box();
box.x = Math.random() * stage.stageWidth;
box.y = Math.random() * stage.stageHeight;
addChild(box);

Teste o arquivo. Observe que estamos instanciando o movie clip criado no passo anterior e adicionando-o em uma posição aleatória do palco. Como se trata de um movie clip, de forma simples nós poderíamos desenha-lo usando a API de desenho do flash. Vamos criar uma grade contendo apenas nosso mc Box. Como vão ser vários boxes, vamos adicionar todos em um container para melhor praticidade.

import flash.display.MovieClip;
import flash.display.Sprite;

var containerBoxes:Sprite = new Sprite();
addChild(containerBoxes);
criaGrade();

function criaGrade():void
{
   var i:uint;
   var j:uint;

   while (j < stage.stageHeight)
   {
      while(i <= stage.stageWidth)
      {
         var box:MovieClip = new Box();
         box.x = i;
         box.y = j;
         containerBoxes.addChild(box);

         i += 50;
      }
      i = 0;
      j += 50;
   }
}

Ctrl + Enter para testar o arquivo. Observe que nossa grande que contém os boxes está sobre a imagem no palco. Vamos deixar o alfa dos boxes com 0 (zero).

box.y = j;
box.alpha = 0;

Ctrl + Enter para testar o arquivo. Observe que os boxes agora estão invisíveis. Agora, adicionaremos dois eventos: ao passar o mouse sobre o boxe invisível, ele aparece; ao remover o mouse ele desaparece.

criaGrade(); //adicione daqui para baixo

containerBoxes.addEventListener(MouseEvent.MOUSE_OVER, onOver);
containerBoxes.addEventListener(MouseEvent.MOUSE_OUT, onOut);

function onOver(e:MouseEvent):void
{
   TweenLite.to(e.target, 1, {alpha:1, delay:0});
}

function onOut(e:MouseEvent):void
{
   TweenLite.to(e.target, 1, {alpha:0, delay:0});
}

Adicione os imports da TweenLite no topo do arquivo.

import com.greensock.easing.*;
import com.greensock.*;

Copile. Observe que ao passar o mouse sobre a imagem, os boxes começam a aparecer e ao remover o mouse começa novamente a desaparecer. Você pode notar que se o mouse estiver movimentando sobre a imagem, o boxe começa a aparecer, mas logo em seguida já desaparece, pois o mouse já está sobre outro boxe ativando assim o onOut. Troque o delay onOut de 0 para 3, assim retardamos em 3 segundos para que volte para alfa 0.

Teste novamente. Repare que ao passar o mouse, mesmo alterando o delay de onOut, não resolveu o problema. O que será? Estamos com uma sobrecarga de tween, com o movimento do mouse o target altera a todo instante. Adicione essa linha logo abaixo dos imports e teste novamente.

OverwriteManager.init(OverwriteManager.AUTO);

Altere nas funções criaGrade e onOut o alpha para 1 (um) e em onOver para 0 (zero). Apenas invertemos a ordem de como os boxes estavam aparecendo.

Agora para finalizar, adicione em criaGrade e onOut a propriedade rotationY para 180 e em onOver adicione também a propriedade rotationY para 0 (zero). Aconselho também ajustar o valor do delay em onOut para maior que 6. Copile o arquivo, passe o mouse sobre os boxes e observe o efeito.

Pronto, segue o código completo da timeline.

import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import com.greensock.easing.*;
import com.greensock.*;
OverwriteManager.init(OverwriteManager.AUTO);

var containerBoxes:Sprite = new Sprite();
addChild(containerBoxes);
criaGrade();

containerBoxes.addEventListener(MouseEvent.MOUSE_OVER, onOver);
containerBoxes.addEventListener(MouseEvent.MOUSE_OUT, onOut);

function onOver(e:MouseEvent):void
{
   TweenLite.to(e.target, 1, {alpha:0, rotationY:0});
}

function onOut(e:MouseEvent):void
{
   TweenLite.to(e.target, 1, {alpha:1, rotationY:180, delay:3});
}

function criaGrade():void
{
   var i:uint;
   var j:uint;

   while (j < stage.stageHeight)
   {
      while(i <= stage.stageWidth)
      {
         var box:MovieClip = new Box();
         box.x = i;
         box.y = j;
         box.alpha = 1;
         box.rotationY = 180;
         containerBoxes.addChild(box);

         i += 50;
      }
      i = 0;
      j += 50;
   }
}

Agora, é hora de escrever todo esse código que está na timeline para uma classe. Então junto ao seu arquivo .fla criei uma pasta com o nome “app” e dentro dela crie uma arquivo “Main.as”.

Segue a classe.

package app
{
   import com.greensock.easing.*;
   import com.greensock.*;

   import flash.events.MouseEvent;
   import flash.events.Event;
   import flash.display.Sprite;
   import flash.display.MovieClip;

   public class Main extends Sprite
   {
      private var containerBoxes:Sprite;

      public function Main():void
      {
         if (stage)
            init();
         else
            this.addEventListener(Event.ADDED_TO_STAGE, init);

      }

      private function init(e:Event = null):void
      {
         this.removeEventListener(Event.ADDED_TO_STAGE, init);

         OverwriteManager.init(OverwriteManager.AUTO);

         containerBoxes = new Sprite();
         addChild(containerBoxes);

         containerBoxes.addEventListener(MouseEvent.MOUSE_OVER, onOver);
         containerBoxes.addEventListener(MouseEvent.MOUSE_OUT, onOut);

         criaGrade();
      }

      private function onOver(e:MouseEvent):void
      {
         TweenLite.to(e.target, 1, {alpha:0, rotationY:0});
      }

      private function onOut(e:MouseEvent):void
      {
         TweenLite.to(e.target, 1, {alpha:1, rotationY:180, delay:3});
      }

      private function criaGrade():void
      {
         var i:uint;
         var j:uint;

         while (j < stage.stageHeight)
         {
            while(i <= stage.stageWidth)
            {
               var box:MovieClip = new Box();
               box.x = i;
               box.y = j;
               box.alpha = 1;
               box.rotationY = 180;
               containerBoxes.addChild(box);

               i += 50;
            }
            i = 0;
            j += 50;
         }
      }

   }

}

Agora para finaliza, você pode alterar vária propriedades do “box” como rotation, rotationX, rotationY, rotationY, x, y, alpha…