Várias formas para fazer code animation (animação por actionscript).
É possível executar, à partir do flash, uma apresentação do Power Point?
Como faço para colocar um Botão de liga / desliga som?
Mais dicas para otimizar seu Flash Movie.
Como faço para do flash abrir uma nova página num ou outro frame do HTML?
Criei o script para FullScreen e está abre o site em flash, mas o botão fechar criado no flash não funciona.
Como crio um controlador de som de play e stop e em loop infinito desse som?
Porque o ponteiro do mouse trocado não acompanha o mouse perfeitamente como deveria?
Calcular distância de um movieclip invisível.
Como dar um fade (alpha) num movieclip clicando num botão?
Menu horizontal com descrição.
Carregador inteligente no Flash 5.
Como fatiar um site modelo portal no Fireworks
Spyral draw
Tensionchain
Hitest eat
Este tutorial é sobre como rotacionar objetos 3D no Flash. Na verdade, "revolver" ou "orbitar" são palavras melhores. Os objetos em si não irão girar, mas se moverão em torno de um ponto central.
Primeiro, uma introdução em 3D. Três dimensões.
Largura - esquerda pra direita;
Altura - do topo ao pé; e
Profundidade - de próximo a distante.
A tela de um monitor mostra apenas duas dimensões - largura e altura. Para mostrar profundidade, podemos nos apoiar em vários truques, o mais óbvio sendo, quando as coisas se afastam, elas ficam menores. Também, os objetos tendem a se mover para um ponto central "ponto de desaparecimento" enquanto se movem para longe de você e desaparecerão de uma forma que depende do ambiente. Todos estes efeitos podem ser facilmente criados com o FLASH.
Em computadores, a altura é geralmente representada por Y, ou no flash, o Y, Yscale e propriedades de altura. A largura é o X, Xscale e propriedades de largura. A profundidade é representada por Z. Sendo o flash um programa que trabalha em duas dimensões, ele não tem a propriedade Z, mas nós podemos criar uma.
Agora, vamos falar sobre rotação. Há três maneiras de se rotacionar (orbitar) um objeto. A rotação Z rotaciona algo em volta de um eixo. Pense em um relógio, ou o volante de um carro. O objeto não irá se afastar ou se aproximar de você, mas suas posições X e Y irão mudar. A rotação Y é em volta do eixo. Pense em um vinil na vitrola. A altura (Y) não muda, mas o X (esquerda para a direita) e o Z (profundidade) mudarão.
A rotação X em volta do eixo, como você deve ter presumido, muda a altura (Y) e a profundidade (Z), mas não se move da esquerda para a direita. Pense na lâmina de uma serra circular. O Flash suporta a rotação Z para movieclips através da propriedade rotação. Mas esta é uma rotação fixa, o objeto irá girar em volta de seu próprio centro. Se quisermos orbitar o objeto em volta de um ponto central, como um planeta em volta do sol, precisaremos de recursos mais avançados.
Sendo a rotação Z a mais simples, começaremos com ela, mesmo não sendo realmente 3D ainda. O problema básico é mover algo em volta de um ponto central. Terá sempre a mesma distância a partir deste ponto central, 100 pixels por exemplo. Então teremos um radio de 100 e um ângulo que pode variar de 0 a 360. À partir desta informação, precisaremos calcular as posições X e Y. A fórmula é assim:
_x=Math.cos(angle)*radius + xcentro;
_y=Math.sin(angle)*radius + ycentro;
Eu não vou entrar na explicação da trigonometria envolvida aqui. Na verdade é muito simples, mas vou deixar isto para outro tutorial. Um ponto muito importante para o qual você precisa estar atento é que o "ângulo" precisa ser em "raio", o que pode ser um sistema diferente dos 360 graus ao qual você deve estar acostumado. Sendo muito mais fácil pensar em graus, você terá que convertê-los. A formula é assim:
radius=degree*Math.PI/180;
Agora você só precisa de um loop que aumente o ângulo de 0 a 360 e você terá um movimento circular. Para juntar tudo, faça um movieclip com algum objeto e coloque o seguinte código:
radius=100;
_x=Math.cos(angle*Math.PI/180)*radius + xcenter;
_y=Math.sin(angle*Math.PI/180)*radius + ycenter;
angle+=speed;
angle-=360;
Teste e você terá um objeto movendo-se em círculo. Não é 3D ainda, mas é um importante passo para se chegar lá. Veja como fica seu filme:
OK. Assumindo que seu movieclip está funcionando, vamos tentar uma rotação Y. Imagine o círculo que você acabou de fazer, mas você puxou a parte de cima para perto e empurrou a parte de baixo para longe até que esteja completamente deitado. O Y agora é o Z mas o X continua o mesmo. Então tudo que temos que fazer é substituir o Z pelo Y:
xcenter=250;
ycenter=200;
zcenter=100;
_x=Math.cos(angle*Math.PI/180)*radius+xcenter;
_y=y+ycenter;
z=Math.sin(angle*Math.PI/180)*radius+zcenter;
Note que eu adicionei um valor ao centro Z na seção load e mudei o centro Y para centro Z na seção enterFrame. Você pode brincar com estes valores. Um número mais alto fará toda a animação parecer mais distante de você. Um número menor obviamente fará parecer mais próximo. Eu computei um valor para Y. De outra forma, o Y seria 0 e a coisa toda estaria no topo da tela.
Se você testá-lo agora o objeto apenas se moverá da esquerda para a direita. Apesar de termos computado o valor de Z, nós não fizemos nada com ele. Agora nós o usaremos para gerar uma forma de escala (scaling) para termos um pouquinho de efeito 3D. Então, quanto teremos que alterar na escala para ter uma perspectiva realística? Agora entraremos no campo dos ópticos, acredite ou não.
Primeiro, precisamos determinar o foco, o que é uma distância teórica do ponto de vista até a tela. O número que você der a este valor determinará quanta perspectiva as coisas terão - com que velocidade as coisas crescerão ou diminuirão enquanto se aproximam ou se afastam de você. Vamos colocar 150 por agora. Você pode brincar com isto mais tarde para conseguir o efeito exato que você busca. O foco não mudará, então colocaremos na seção "load" do código.
fl=150;
Agora nós precisamos de um valor para a escala que se baseará no foco e Z. A fórmula é:
Você pode entender a física disto se quiser, mas termina a escala com um decimal entre 0 e 1. Quando Z=0, a escala será 1.0. Como Z mostra a distância (cresce em direção ao infinito), a escala irá diminuir em direção a 0. Depois poderemos usar isto para computar uma escala X e uma Y para seu objeto:
_xscale= _yscale = scale*100;
Nosso código final:
Faça o teste. Estamos muito bem até agora. Mas ainda podemos fazê-lo mais realista.
Eu mencionei anteriormente que enquanto um objeto se move para a distância, ela vai em direção ao ponto de desaparecimento. Em nosso exemplo acima, nós temos Y=0, o que no nível dos olhos já está no ponto de desaparecimento, então você não veria mudanças. Mas vamos dizer que Y=100. Ele agora estaria abaixo do nível dos olhos e nós esperaríamos vê-lo se mover para cima enquanto se afasta. Similarmente, se fosse menos de 0, estaria acima do nível e se moveria para baixo em direção ao horizonte enquanto se afasta.
A mesma é verdadeira para o valor X. Enquanto o objeto se afasta, ele se move para o centro de nossa visão horizontalmente. Você não nota isto aqui, porque ele já está se movendo da esquerda para a direita. Mas, vamos ser perfeccionistas.
Para o X, nós primeiro calcularemos a posição do círculo e a designaremos para X, depois, ajustar a perspectiva e designá-la para X. Assim:
x=Math.cos(angle*Math.PI/180)*radius;
_x=x*scale+xcenter;
_y=y*scale+ycenter;
Note que precisamos computar Z e a escala primeiro para que esteja disponível para o resto do código. Tente mudar o valor inicial de Y para que o objeto rotacione em alturas diferentes. Tente números negativos também. Esta é a realidade a que se pode chegar em termos de escala e posicionamento. Para o toque final, você pode adicionar uma atmosfera computando uma escala baseada em alpha. Apenas adicione:
_alpha=scale*100;
Você pode adicionar + ou - atmosfera brincando com este número 100.
O próximo passo lógico é adicionar vários objetos se movendo em círculo. Para tê-los divididos em espaços iguais, você só precisa ajustar o ângulo inicial de cada um. Divida 360 pelo número de objetos e adicione isto a cada objeto sucessivamente.
Você tem 10 objetos. 360/10 = 36. Ângulo inicial para cada objeto:
Objeto 1: angle =36;
Objeto 2: angle =72;
Objeto 3: angle =108;
Você pode fazer isto manualmente, ou automaticamente com um loop FOR. Veja aqui o resultado final do arquivo:
Eu codifiquei isto com onClipEvent's para facilitar a explicação. Eu recomendo colocar todo este código dentro do clip em sua própria linha do tempo, definir todas as constantes (as coisas que estão no onClipEvent(load)) no primeiro frame do movieclip, executar todas a ações, (as coisas que estão no onClipEvent(enterFrame)) no frame 2 e no frame 3 o gotoAndPlay(2);.
Desta maneira, o código é construído dentro do objeto e você poderá simplesmente arrastá-lo da library para fazer mais cópias, usá-lo em outros movies, etc, sem ter que criar todas a ações no onClipEvent.
Falando nisso, se você quiser fazer uma rotação X, no código acima, apenas troque todas as referências de Y por X e de X por Y..
Eu espero que você possa pegar o que fiz aqui e usá-lo em algo mais interessante. Se o fizer por favor me mostre. Boa sorte. Se você fizer algum comentário ou adicionar algo a este documento, favor mandar-me uma cópia. Obrigado!
tradução Charles Martins
Comentário de jhou
| 13/3/2011 - 15:09 |
Vlws aew cara ... ajudou e muito .... Teria aí no site .... alguma postagem no qual ensina um objeto rotacionar o outro .... estilo este ... mais um ficar rodando em volta do outro (atras) ... ateh +++