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…
O tutorial me pareceu bem interessante.
Só ficou faltando uma página demo do tutorial, que é imprescindível para termos ideia do que está sendo estudado e fazer os tetes antes para saber se nos é adequado.
Conheço um site sobe arte e anatomia que visualiza modelos 3D com a famosa rotação 360º e grades opcionais sobre a tela da imagem, tudo produzido em flash. Mas trata-se de simulação 3d e não do 3d verdadeiro – utiliza-se capturas jpeg sequenciais de um modelo real produzido no blender por exemplo. Mesmo assim a técnica já é bastante útil (e a mais adequada para websites), pois possibilita visualizar vários ângulos facilmente. O único problema (que pouco importa) é que não faz o preload das imagens no tamanho maior. Em compensação, o sistema é bem eficiente e funciona bem até em conexões lentas!
Pergunta: Onde encontro o fonte de um visualizador assim?
OBS: jQuery não supera o Flash neste quesito.