Flash CS4 e pontos de fuga?

Eu, sempre preocupado com o mundo Apple, acabo nunca postando nada no TI Developer, mas ontem fiz umas pesquisas interessantes com Flash e resolvi compartilhar com os nobres leitores deste nobre blog.

Esse é um exemplo de um workflow de duas horas de trabalho com Flash CS4. Não funciona em CS3, nem pense nisso!

Ontem me deparei com uma situação interessante: a empresa onde trabalho está fazendo um layout mais arrojado para um desses sites cheios de flash e um dos recursos do layout envolve um quadrado que gira em torno do próprio eixo. Um lado do quadrado mostra um conteúdo, e outro lado mostra outro conteúdo. Simples, não? Não.
Um programador que trabalha comigo resolveu usar o Papervision 3D. A princípio ele fez 18 cubos com lateral 0. Os cubos eram idênticos a quadrados. A face da frente e a de trás possuiam um movieclip diferente cada. O efeito funcionou. Mas… (sempre tem um “mas”) o flash precisa renderizar quadro-a-quadro 18 cubos girando. Isso significa que o SWF ficou deveras pesadíssimo.

Como contornar isso? A primeira resolução foi acabar com essa folia de cubos. Cada “quadrado” tinha 4 faces inúteis e duas faces com movieclips quando poderíamos usar só uma. Acabar com esse POG deixou o negócio mais leve, mas ainda estava pesado demais para a web.

Então eu entrei na jogada. Por que usar Papervision? O flash CS4 já dá suporte a 3 dimensões. E girar uma droga dum quadradinho não deveria ser tão difícil! Girar 18 quadradinhos deveria dar no mesmo.
Eu sou um programador de ActionScript 2. Embora saiba programar em AS3, não gosto muito porque acho o AS3 muito enrolado com coisas óbvias. Mas enfim, resolvi fuçar os arquivos de ajuda atrás de uma solução mais simples.

Eis minha idéia:
Pegamos o conteúdo de cada face.
Criamos um MovieClip.
O MovieClip terá 2 quadros. Cada um vai comportar um dos dois conteúdos.
Quadrados são bidimensionais. Então sempre que girarmos o quadrado, poderemos nos deparar com 2 situações:
ou haverá um quadro em que ele ficará invisível ou, de um quadro para outro veremos uma e outra face, sem intermédios.
Justamente nessa mudança mudaremos do quadro 1 para o 2, dando a impressão que estamos vendo o verso do quadro, quando na verdade só vemos outro quadro. Entendeu? =D

Ok.. Você leu até aqui e não entendeu picas? Então vamos pôr a mão na massa e irás entender.

Estou usando Windows XP aqui no trabalho, então os atalhos de teclado aqui não valem para quem usa Mac, beleza?

Na maioria das vezes, quem usa mac só precisa trocar o [Ctrl] por [Command] e [Enter] por [Return]. Mas vá, se vc que lê isso tem flash, saberá se virar sozinho, certo?

1. Criando o MovieClip

Abri meu flash e criei um novo documento em AS3. Apertei [Ctrl+F8]. Dei o name de “bola”, type “MovieClip”. [Enter].
Apertei a tecla [R] do meu teclado para fazer um quadrado. No painel procurei o “fill and stroke” e deixei sem linhas, só preenchimento. Criei um retângulo. Cliquei depois nesse retângulo e deixei com H em -100, Y em -100 também, W em 200 e H em 200 também. Pronto. Um quadrado. Um quadrado chamado “bola”. “Quadrado” tem 8 letras. “Bola” tem 4 letras. Muito mais econômico.
Deixei meu quadrado vermelho “#FF0000″.
Então apertei [F6]. Meu quadro na linha do tempo foi duplicado. No quadro 2 deixei esse quadrado verde “#006600″.
Criei um novo layer na linha do tempo. Cliquei no quadro 1 desse novo layer, apertei [F9] e escrevi isso:

stop();

Pronto. Simples.

2. Posicionando o MovieClip

Voltei para o “Scene 1″. Apertei [Ctrl+L] para ver minha biblioteca e arrastei o MovieClip “bola” para o palco. Segurei [Ctrl+K]. Deixei a opção “To stage” acionada. Cliquei no MovieClip, apertei [Ctrl+Alt+2] e depois [Ctrl+Alt+5]. Agora meu quadrado está centralizado. Na janela properties eu instanciei ele como “bola”.
Criei um novo layer na linha do tempo. Cliquei no frame em branco desse layer. Apertei [F9] de novo. Agora… ActionScript!

3. Criando a animação

Primeiro vamos fuçar o método “Tween”.

Copiei e colei um código de animação e troquei o nome do MovieClip ali. Ficou assim:

import fl.transitions.*;
import fl.transitions.easing.*;

var t1:Tween=new Tween(bola,”x”,Regular.easeIn,0,100,2,true);

Vamos por partes então. Linhas 1 e 2 importam bibliotecas que vou usar no tween.
A linha 4 cria um objeto Tween. Ele vai incrementar a coordenada x do MovieClip chamado “bola”, de 0 a 100, em 2 segundos, usando uma suavização conhecida como “easeIn”. Ou seja, vai começar lento e terminar rápido.
Não quero esse ritmo, então trocarei por “None.easeNone”. Se eu der [Ctrl+Enter] eu verei meu quadrado percorrendo um certo espaço. Parece uma lesma.
Enfim… sei que posso usar qualquer propriedade do meu MovieClip na classe Tween. Vou substituir o “x” por “rotationY”, porque quero girá-lo. A propriedade “rotationY” usa o princípio de graus. Quero que meu quadrado vire ao contrário. Isso serão 180 graus. Então meu código ficou assim:

import fl.transitions.*;
import fl.transitions.easing.*;

var t1:Tween=new Tween(bola,”rotationY”,None.easeNone,0,180,2,true);

Girou! Aêê! Quem precisa de PaperVision pra fazer isso?
Continuemos. Eu preciso mudar a face do bagulho quando chegar a 90 graus. Para isso vou construir um listener. Não quero usar “onEnterFrame” porque fica lerdo e ocupa memória. Então vou fazer o listener sobre o Tween.

t1.addEventListener(TweenEvent.MOTION_CHANGE, teste);

Simples né? Não funciona, pois não existe a função “teste” ainda. Então criei uma função “teste”:

function teste(e:Event):void {
trace(1);
}

Pronto. Agora quando o quadrado girar receberei o valor “1″ no output. Isso serve para eu ver se o listener funciona direitinho.
Vamos fazer isso ficar mais útil e me informar a posição do quadrado.
Ao invés de:

trace(1);

vou usar

trace(e.target.obj.rotationY);

Veja que interessante: e.target aponta para meu Tween. “obj” é o objeto que o Tween está alterando, no caso, “bola”; e “rotationY” é propriedade de “bola”.
Agora posso mudar o quadro quando chegar em 90 graus. Meu código ficou assim:

import fl.transitions.*;
import fl.transitions.easing.*;

var t1:Tween=new Tween(bola,”rotationY”,None.easeNone,0,180,2,true);

t1.addEventListener(TweenEvent.MOTION_CHANGE, teste);

function teste(e:Event):void {
if (e.target.obj.rotationY>90) {
e.target.obj.gotoAndStop(2);
}
}

4. Corrigindo o ponto de fuga

Maravilha! Parece que mudou mesmo. Tudo certo? Então pronto.
Pronto nada. Tem um porém nessa coisa toda. Vamos mudar a posição desse MovieClip.
Ponho meu X em 434 e meu Y em 284. Agora vejamos. Percebe o que aconteceu? Não? Então vamos deixar mais lento.
Mude a linha 4 para ficar assim (olha o 5 ali):

var t1:Tween=new Tween(bola,”rotationY”,None.easeNone,0,180,5,true);

Agora execute de novo. Viu agora? O quadrado ficou verde antes dos 90 graus! Mas como isso!?
Muita calma nessa hora.
Em primeiro lugar o flash não mudou o quadro nem antes nem depois da hora que foi definida. Passou de 90 graus, é instantâneo. A pergunta não é “porque ele mudou antes dos 90 graus”, mas “por que os 90 graus não estão perpendiculares à ‘câmera’?”.
Simples: o Flash possui um ponto de fuga. Quando o MovieClip estava centralizado, o ponto de fuga ficava exatamente no meio do quadrado e ele mudava de cor exatamente no momento em que as face fica visível do lado oposto. Quando deslocamos o MovieClip para outro ponto no palco, o ponto de fuga mudou em relação a ele e a visão dos 90 graus mudou. Se você não entendeu isso, pegue uma carta de baralho e deixe-a na perpendicular até que ela pareça uma linha. Agora desloque o seu braço para a direita ou esquerda sem mudar a posição da carta em relação ao braço. Vê que uma face ficou mais visível né? Pois é. O flash simula perspectivas.

Meu POG falhou. Mas não desisto!
Pensando com meus botões concluí: deve existir um meio de mudar o ponto de fuga do movieclip!
E tem. Vamos lá:

Podemos declarar um objeto do tipo “PerspectiveProjection” (com p maiúsculo) e mudar o valor de seu “projectionCenter”.
O MovieClip ainda tem uma propriedade chamada “perspectiveProjection” (com p minúsculo). Se atribuirmos essa nova variável a seu resultado final, conseguimos mudar o ponto de fuga. Os novos valores serão o centro do objeto: as coordenadas x e y. Meu código ficou assim:

import fl.transitions.*;
import fl.transitions.easing.*;

var t1:Tween=new Tween(bola,”rotationY”,None.easeNone,0,180,5,true);

t1.addEventListener(TweenEvent.MOTION_CHANGE, teste);
var pp:PerspectiveProjection = new PerspectiveProjection();

function teste(e:Event):void {
pp.projectionCenter=new Point(e.target.obj.x,e.target.obj.y);
e.target.obj.transform.perspectiveProjection=pp;
if (e.target.obj.rotationY>90) {
e.target.obj.gotoAndStop(2);
}
}

Simples, apesar de tudo. Declarei uma variável, atribuí um valor e troquei uma propriedade. Só isso. Não se assuste com o tamanho do negócio, na verdade é só variáveis de nome grande, nada mais.

5. Corrigindo a inversão do MovieClip

Mas ainda não terminei. Preciso saber se meu MovieClip exibe o conteúdo corretamente.
Abrindo o MC “bola”, vou ao quadro 1 e ponho uma grande letra “R” no meio do quadrado. No quadro 2 eu ponho uma letra “K”.

Executando… Mas que diabos! A letra “K” inverteu!
É claro, eu girei o MC inteiro. Se houvesse só um quadro para ver, eu veria ele invertido, espelhado.
Eu pensei a princípio em fazer uma verificação do ângulo do quadrado e quando ele chegasse em 90 graus eu mudaria para -90 graus e terminaria em 0. Isso exigiria dois tweens diferentes. Mas tem uma solução muito mais simples. Vamos a ela:

No quadro 2, vou selecionar tudo. Quadrado e texto. Dou um [F8] para salvar como MovieClip. Ok. Voltano ao quadro 2… vamos dar um nome menos idiota a esse MC. Vou instanciá-lo como “mc”. Simples!
Agora dou um [F7] no quadro 2 do “Layer 2″. E agora [F9].
Escrevo assim ali:

this.mc.rotationY = 180;

Epa.. o quadrado verde foi pro outro lado. A solução também é simples. O “hotpoint” do MC está no topo, à esquerda. É só entrar no MC e alinhá-lo no meio.

Voilá.. um quadrado que gira e não ocupa muita memória e ainda funciona em todas as regiões do palco. =D

Divirtam-se com moderação.