STICKMAN (155 pts)

SYDNEY GANHO (60 pts)

MARCOS JOSÉ PINTO (44 pts)

MANGOOST (80 pts)

DAUTON JANOTA (255 pts)

ZECA BALA (45 pts)

GUILHERME SCHEIBE (49 pts)

JOÃO NETO (78 pts)

DEN IVANOV (260 pts)

MUZAK (45 pts)

NILTON BICALHO (61 pts)

EDUARDO PERROUD (52 pts)
Treinamento PontoFlash de Flash e ActionScript

Alguém poderia me dar uma explicação sobre instâncias de movieclip?

Gostaria que um executável preenchesse a tela toda em fullscreen.

Existe um modo de fazer tellTarget em vários MCs ao mesmo tempo?

Para que serve o ONIO SKIN?

Como eu faço para alterar nome do .exe na barra de títulos e o ícone também?

Eu quero que uma imagem (bitmap) abra uma janela POPUP.

Quero localizar a posição de um movieclip dinamicamente?

Quero fazer uma busca de texto no Flash.

Como retornar variáveis de um PHP no Flash?

Determinado o fim do tellTarget.

Tenho um movie principal, e ao cara clicar nos botões, esconda uma layer, e carregue um outro MC(swf) para dentro deste mesmo movie principal.

Na função JS da janela popup, para que serve, o "void(0)"?

Desabilitei o Ctrl + K do Flash 5. Tá fazendo a maior falta. Como faço para voltar com ele?

Classe preloader para carregar mais de um SWF?
Usando XML com Fireworks MX.

Componente Slideshow

Novas propriedade de botões no FireworksMX

Conceitos de Design - Apresentação.

Contador usando SharedObjects.

MP3 player

Local Shared Objects primeira parte.

Transparência no Flash.

Programando objetos 3D em Plataformas 2D como a do Flash

Vídeo no FlashMX.

Simulando 3D.

Objeto array.
Menu popop de pastas

Kick ball

Galho

Preload advanced

Loading trail

Texto com scroll

Lensflare

Tornado

Page Flip

Duplicate MC

MovieClip.onCollision

MC menu
HOME | TUTORIAIS
Rotacionar objetos 3D no Flash.
por Keith Peters

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:

onClipEvent(load){
speed=5;
radius=100;
xcenter=100;
ycenter=100;
angle=0;
}
onClipEvent(enterFrame){
_x=Math.cos(angle*Math.PI/180)*radius + xcenter;
_y=Math.sin(angle*Math.PI/180)*radius + ycenter;
angle+=speed;
if(angle>359){
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:

onClipEvent(load){
y=0;
speed=5;
radius=100;
xcenter=250;
ycenter=200;
zcenter=100;
angle=0;
}
onClipEvent(enterFrame){
_x=Math.cos(angle*Math.PI/180)*radius+xcenter;
_y=y+ycenter;
z=Math.sin(angle*Math.PI/180)*radius+zcenter;
angle+=speed;
if(angle>359){
angle-=360;
}
}

   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 é:

scale=fl/(fl+z);

   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:

onClipEvent(load){
y=0;
speed=5;
radius=100;
xcenter=250;
ycenter=200;
zcenter=100;
angle=0;
fl=150;
}
onClipEvent(enterFrame){
_x=Math.cos(angle*Math.PI/180)*radius+xcenter;
_y=y+ycenter;
z=Math.sin(angle*Math.PI/180)*radius+zcenter;
scale=fl/(fl+z);
_xscale= _yscale = scale*100;
angle+=speed;
if(angle>359){
angle-=360;
}
}

   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:

onClipEvent(load){
y=100;
speed=5;
radius=100;
xcenter=250;
ycenter=200;
zcenter=100;
angle=0;
fl=150;
}
onClipEvent(enterFrame){
z=Math.sin(angle*Math.PI/180)*radius+zcenter;
scale=fl/(fl+z);
x=Math.cos(angle*Math.PI/180)*radius;
_x=x*scale+xcenter;
_y=y*scale+ycenter;
_xscale= _yscale = scale*100;
angle+=speed;
if(angle>359){
angle-=360;
}
}

   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.
Por exemplo:

Você tem 10 objetos. 360/10 = 36. Ângulo inicial para cada objeto:
Objeto 1: angle =36;
Objeto 2: angle =72;
Objeto 3: angle =108;
etc…

   Você pode fazer isto manualmente, ou automaticamente com um loop FOR. Veja aqui o resultado final do arquivo:

Nota adicional:

   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



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
1 comentário


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 +++