Fala galera do blog, nesse espaço estarei postando algo diferente da net. Como forma de agradecimento por varios blogs terem me ensinado o que aprendi nesse tempo todo que venho programando, decidi que estava na hora de compartilhar com vocês. Quero começar trazendo um tutorial que fara vocês criarem coisas novas. Sendo assim minha primeira postagem estarei demonstrando como criar um cubo em 3D no flash. Vocês devem estar se perguntando, pra que eu quero criar um cubo? Bom, eu explico, conhecendo os principios, você poderá criar menus em 3D ou até mesmo um site inteiro. Antes de dar inicio a esse tutorial, estarei utilizando a tecnologia AS3 e logo abaixo demonstro em um mini aplicativo feito no Flex como ficará nosso cubo. Teste o cubo altere suas propriedades gire clique nele, é bem divertido.
O Principio do cubo é bem simples, estaremos trabalhando com as dimensões X, Y, Z do AS3 no Flash CS4.
Aviso aos navegantes... O Flash CS3 não reconhece a dimensão Z. Para rodar nosso cubo estaremos utilizando a plataforma Flash Player 10.
Vamos lá.. Mãos a obra.
Clique Aqui e baixe os dois imports ( Caurina e o SimpleZSorter )
// Duas Importante Importações para funcionar o nosso cubo
// Caurina para dar o Movimento ( Separar e Juntar ) ao nosso cubo
import caurina.transitions.Tweener;
// SimpleZSorter para Organizar nosso cubo quando ele é girado
import com.theflashblog.fp10.SimpleZSorter;
var nCubos:Number = 3;
// Quantidade de linhas / Colunas de cubos var largura:Number = 30;
// Largura do Cubo var altura:Number = 30;
// Altura do Cubo var comprimento:Number = 30;
// Comprimento do Cubovar espaco:Number = 40;
// Espaço entre um cubo e outro ( SEPARAR )var line1:Number = 0xFF6600;
// Linha 1 da Cor do Cubovar cor1:Number = 0xCF0000;
// Cor 1 do Cubovar line2:Number = 0xFFFF00;
// Linha 2 da Cor do Cubovar cor2:Number = 0xFFCC00;
// Cor 2 do Cubovar total:Number;
// Total de Cubos ( Lado * Lado * Prof. )var posX:Number;
// Posicao em Xvar posY:Number;
// Posicao em Yvar posZ:Number;
// Posicao em Zvar pMouseX:Number;
// Posicao Inicial do Mouse X ( Centro da Tela )var pMouseY:Number;
// Posicao Inicial do Mouse Y ( Centro da Tela )var objeto:MovieClip;
// Objeto que Carregará nossos Cubosinit();
function init():void{
// Conta Num de Cubos ( lado * lado * Profundidade )
total = nCubos * nCubos * nCubos;
// Achar o Centro em X
posX = ((largura * nCubos) - largura)/2;
// Achar o Centro em Y
posY = ((altura * nCubos) - altura)/2;
// Achar o Centro em Z
posZ = ((comprimento * nCubos) - comprimento)/2;
// Criando o Objeto que carregara os cubos e adicionando no palco
objeto = new MovieClip();
addChild(objeto);
var n:Number;
// item que verificara os cubosvar color:Number = cor1;
// cor dos cubos
// verifica se a quantidade de linhas é par ou impar
var numPar:Boolean = verParImpar();
for(var i:int=0; i
//Numero que definira em qual cubo estamosn = i + 1;
//Criando nosso cubo e definindo sua posicao Inicial no palcovar cubo:MovieClip = new MovieClip();
cubo.name = "cubo_"+i;
cubo.x = posX;
cubo.y = posY;
cubo.z = posZ;
// Posicionamos o proximo Objeto com relacao a larguraposX = posX - largura;
color = trocarCor(color);
// troca a Cor do ObjetomakeCubo(cubo, color);
// Cria o Cubo com a cor desejadaif((n%nCubos)==0){
// Muda a linha em Y dos cubos // caso for "NUMERO PAR" troca a Corif(numPar){ color = trocarCor(color); }
// Volta a posicao Inicial em XposX = ((largura * nCubos) - largura)/2;
// Altera para a Linha debaixoposY = posY - altura;
}
if((n%(nCubos * nCubos))==0){
// Muda para Linha Z// caso for "NUMERO PAR" troca a Corif(numPar){ color = trocarCor(color); }
// Volta a posicao Inicial em XposX = ((largura * nCubos) - largura)/2;
// Volta a posicao Inicial em YposY = ((altura * nCubos) - altura)/2;
//Altera para Coluna de TrasposZ = posZ - comprimento;
}
//Adiciona o Cubo ao Objetoobjeto.addChild(cubo);
}
objeto.x = stage.stageWidth/2;
// Posiciona em X o Cubo no meioobjeto.y = stage.stageHeight/2;
// Posiciona em Y o Cubo no meioobjeto.rotationX = 25;
// Define uma rotacao Inicial em Xobjeto.rotationY = 25;
// Define uma rotacao Inicial em YpMouseX = stage.stageWidth/2;
// Ajusta o ponto Inicial X do mouse no MeiopMouseY = stage.stageHeight/2;
//Ajusta o ponto Inicial Y do mouse no Meio//Adiciona um Evento ao Clicar com o Mouse no Palcostage.addEventListener(MouseEvent.CLICK, movObj1);
//Adiciona um Evento ao Criar o Objeto com o Loop para organizar os lados do Cuboobjeto.addEventListener(Event.ENTER_FRAME, loop);
//Adiciona um Evento ao Mover o Mouse para Mover o Cubostage.addEventListener(MouseEvent.MOUSE_MOVE, rotacao);
}
// Função para Definir se o numero de linhas é Par ou Imparfunction verParImpar():Boolean{
var n1:Number = nCubos/2;
var n2:Number = Math.round(n1);
var result:Boolean;
if(n1 == n2){
result = true;
} else{
result = false;
}
return result;
}
// Função para Inverter a Cor do Cubofunction trocarCor(color:Number):Number{
if(color == cor1){ color = cor2; }
else{ color = cor1; }
return color;
}
function makeCubo(cubo:MovieClip, color:Number):void{
//O Cubo tem 6 lados para isso alguns lados terão que ser rotacionados quando criados//Criamos todos os 6 lados do cubo
var ladoEsquerdo:MovieClip = new MovieClip();
var ladoDireito:MovieClip = new MovieClip();
var ladoCima:MovieClip = new MovieClip();
var ladoBaixo:MovieClip = new MovieClip();
var ladoFrente:MovieClip = new MovieClip();
var ladoTras:MovieClip = new MovieClip();
makeLados(ladoEsquerdo, comprimento, altura, color);
makeLados(ladoDireito, comprimento, altura, color);
makeLados(ladoCima, largura, comprimento, color);
makeLados(ladoBaixo, largura, comprimento, color);
makeLados(ladoFrente, largura, altura, color);
makeLados(ladoTras, largura, altura, color);
//Definindo a posicao e a Rotacao de cada um dos ladosladoEsquerdo.x = ((largura/2) * -1);
ladoEsquerdo.rotationY = 90;
ladoDireito.x = (largura/2);
ladoDireito.rotationY = -90;
ladoCima.x = 0;
ladoCima.y = ((altura/2) * -1);
ladoCima.rotationX = 90;
ladoBaixo.x = 0;
ladoBaixo.y = (altura/2);
ladoBaixo.rotationX = -90;
// Esses dois lados nao é rotacionado mas movido na dimensao ZladoFrente.z = ((comprimento/2) * -1);
ladoTras.z = (comprimento/2);
// Adicionamos todos os lados ao objeto novo chamado Cubocubo.addChild(ladoEsquerdo);
cubo.addChild(ladoDireito);
cubo.addChild(ladoCima);
cubo.addChild(ladoBaixo);
cubo.addChild(ladoFrente);
cubo.addChild(ladoTras);
// Adicionando o Loop no Cubo Criado para Organizar os ladoscubo.addEventListener(Event.ENTER_FRAME, loop);
}
function makeLados(lado:MovieClip, larg:Number, alt:Number, cor:Number):void{
var line:Number;
// Definindo a Cor da linha conforme a cor do Cuboif(cor == cor1){ line = line1; }
else{ line = line2; }
// Colocando o Desenho no Centro do MovieClipvar pX:Number = ((larg/2) * -1);
var pY:Number = ((alt/2) * -1);
//Criando o Desenho do Lado do Cubolado.graphics.clear();
lado.graphics.lineStyle(1,line,1);
lado.graphics.beginFill(cor,1);
lado.graphics.drawRect(pX,pY,larg,alt);
lado.graphics.endFill();
//Quando criamos o cubo com a lineStyle a linha tem uma borda fora do tamanho do Desenho marcamos novamente o tamanho no objeto inteiro.lado.width = larg;
lado.height = alt;
}
function movObj1(e:MouseEvent):void{
// Achamos o meio do objeto em X com o Espacovar pMovX:Number = (((largura + espaco) * nCubos) - (largura + espaco))/2;
// Achamos o meio do objeto em Y com o Espacovar pMovY:Number = (((altura + espaco) * nCubos) - (altura + espaco))/2;
// Achamos o meio do objeto em Z com o Espacovar pMovZ:Number = (((comprimento + espaco) * nCubos) - (comprimento + espaco))/2;
for(var i:int=0; i
var n:Number = i + 1;
// Buscamos o Cubo correspondente ao Numero (i) no Objetovar cubo:MovieClip = MovieClip(objeto.getChildByName("cubo_"+i));
// Aplicamos ao cubo o novo endereco X , Y e Z Tweener.addTween(cubo, {x:pMovX, y:pMovY, z:pMovZ, time:0.5, transition:"linear"});
// Achamos o novo endereco em X para o Proximo CubopMovX = pMovX -(largura + espaco);
// Muda para a Linha abaixo assim q terminar a linha Xif((n%nCubos)==0){
//Define um novo valor a X da Posicao Inicial com espacopMovX = (((largura + espaco) * nCubos) - (largura + espaco))/2;
//Muda para a Linha de baixo com EspacopMovY = pMovY -(altura + espaco);
}
//Verifica quando mudar para a coluna de trasif((n%(nCubos*nCubos))==0){
//Define um novo valor a X da Posicao Inicial com espaco pMovX = (((largura + espaco) * nCubos) - (largura + espaco))/2;
//Define um novo valor a Y da Posicao Inicial com espacopMovY = (((altura + espaco) * nCubos) - (altura + espaco))/2;
//Muda para a Coluna de tras com espacopMovZ = pMovZ - (comprimento + espaco);
}
}
// Remove o Evento de Separar o Objeto stage.removeEventListener(MouseEvent.CLICK, movObj1);
// Adicina o Evento de Juntar o Objetostage.addEventListener(MouseEvent.CLICK, movObj2);
}
// Esse aqui é o mesmo movimento do Inicio do Tutorial// A posicao do Objeto sem espacofunction movObj2(e:MouseEvent):void{
var pMovX:Number = ((largura * nCubos) - largura)/2;
var pMovY:Number = ((altura * nCubos) - altura)/2;
var pMovZ:Number = ((comprimento * nCubos) - comprimento)/2;
for(var i:int=0; i
var n:Number = i + 1;
var cubo:MovieClip = MovieClip(objeto.getChildByName("cubo_"+i));
Tweener.addTween(cubo,{x:pMovX, y:pMovY, z:pMovZ, time:0.5, transition:"linear"});
pMovX = pMovX - largura;
if((n%nCubos)==0){
pMovX = ((largura * nCubos) - largura)/2;
pMovY = pMovY -altura;
}
if((n%(nCubos * nCubos)) == 0){
pMovX = ((largura * nCubos) - largura)/2;
pMovY = ((altura * nCubos) - altura)/2;
pMovZ = pMovZ - comprimento;
}
}
// Volta ao Primeiro Evento do Mouse ( Separar o Objeto )stage.removeEventListener(MouseEvent.CLICK, movObj2);
stage.addEventListener(MouseEvent.CLICK, movObj1);
}
//Funcao para Organizar os lados dos Cubosfunction loop(e:Event):void{
// Organiza os lados de todos os cubosvar obj:MovieClip = MovieClip(e.currentTarget);
SimpleZSorter.sortClips(obj);
}
function rotacao(e:MouseEvent):void{
//Define um valor para Rotacao em X e Y Subtraindo a posicao Inicial do Mouse - a finalvar valorX:Number = (pMouseX - mouseX);
// Valor sendo Negativo para Rotacao em Y Multiplicando por -1var valorY:Number = (pMouseY - mouseY) * -1;
objeto.rotationX = valorY;
objeto.rotationY = valorX;
}
//==================| Fim do Tutorial |===================//
