Menu Circular em 3D

Leituras: 73684 -

1º Passo: Introdução

Olá a todos.

Veremos como criar um menu circular em 3D personalizável.
Iremos usar alguns truques de matemática para simular a rotação em profundidade.
Nada complicado, mesmo quem não é fera em assuntos de cálculo conseguirá acompanhar o tutorial normalmente e projetar o menu como explicado.



Existem muitos menus na web com efeitos similares a esse, como por exemplo o site:
http://www.square-enix.co.jp/dvd/ff7ac/
[na parte de trailers]

Essa URL foi submetida por um internauta ansioso em saber como se criava tal efeito.
Em 3 passos seguintes, será mostrado como fazer algo similar.

Agenda (passos):
1) Introdução (esta página)
2) Criando o ambiente em Flash
3) Mecânica circular
4) Criando o ActionScript

 

2º Passo: Criando o ambiente em Flash

2.1) Abra um novo arquivo com tamanho de projeto: 400 x 500

2.2) Crie botões para cada item de menu:




Veja que apenas coloquei um retângulo vermelho transparente no estado OVER do botão para dar efeito de destaque na foto.
Para esse exemplo, criei 5 botões, embora você possa criar quantos quiser, o ActionScript se adapta ao número de botões.

2.3) Converta cada botão em um clipe de filme: selecione cada botão e aperte F8 para convertê-lo em um clipe de filme.
Observe o ponto de registro:



2.4) Nomeie cada clipe recém criado no painel de propriedades
Nesse exemplo as instâncias receberam os nomes:
- embaixada
- goleiro
- disputa
- bola
- meiao

3º Passo: Mecânica Circular


Para criarmos o efeito ilusório em 3D de que o menu está girando e entrando em profundidade, iremos calcular as posições, transparências e tamanhos para cada botão do menu (encapsulado no respectivo clipe de filme). Podemos utilizar, da trigonometria, as funções para sabermos as posições X e Y em uma circunferência baseadas em um ângulo qualquer.



Para calcular as posições x e y do menu 1 por exemplo, temos:
x = cos ? * raio
y = sen ? * raio

Nesse caso o Y realmente corresponderá a altura, entretanto o X não corresponderá a posição horizontal do menu, visto que na horizontal, todos os menus estarão na mesma posição. O que muda, para cada menu, é sua altura (Y) e a profundidade (mais perto do observador ou mais distante). Nada nos impede em converter o X calculado em Z (profundidade), é apenas uma outra forma de enxergar a fórmula. Então, utilizaremos o X da equação para calcular o tamanho do menu (quanto menor, mais distante) e sua transparência (quanto mais transparente, mais distante).

É importante observar que cada botão de menu terá seu próprio ângulo, caso contrário, todos os botões estariam girando juntos na mesma posição.

Para podermos personalizar o menu, são criadas variáveis para regular toda a roda, como: valor do raio, transparência do item mais distante, transparência do item mais próximo, tamanho do item mais distante, tamanho do item mais próximo etc.

Para o giro, contamos com o deslocamento do mouse para cima e para baixo. Entretanto existe uma área de segurança no centro em que o mouse não rodará os menus para o usuário poder operar no botão com mais tranqüilidade.

Podemos agora olhar o código em ActionScript.

4º Passo: Criando o ActionScript

4.1) O seguinte trecho de código é colocado no primeiro quadro da linha de tempo principal

4.2) Para controlar a animação é utilizado o disparo freqüente do evento onEnterFrame da linha de tempo principal.

/*******************************************/
// variavies de configuracao
/*******************************************/
// guardar as instancias a serem rotacionadas em um vetor
var clips = Array("goleiro", "meiao", "disputa", "bola", "embaixada");
var raio = 150; // raio de rotacao
var aceleracao = 0.05; // aceleracao do mouse para o giro
var alphaMinimo = 20; // transparencia do botao de menu mais distante
var alphaMaximo = 70; // transparencia do botao de menu mais proximo
var escalaMinima = 50; // tamanho do botao de menu mais distante
var escalaMaxima = 100; // tamanho do botao de menu mais distante
var mouseSeguro = 100; // pixels em torno do centro nos quais o
// mouse nao gira o menu

/*******************************************/
// Variaveis calculadas
/*******************************************/
// variacao da transparencia
var difAlpha = alphaMaximo - alphaMinimo;
// variacao do tamanho
var difEscala = escalaMaxima - escalaMinima;

// posicao central do menu em X e Y
var xIni = Stage.width / 2;
var yIni = Stage.height / 2;

var dobroRaio = raio * 2;
var conversao = Math.PI / 180;
// fator de conversao de angulo para radiano
var difAngular = 360 / clips.length;
// diferenca angular entre os itens de menu

var angulo = 0; // angulo inicial da roda como um todo

/*******************************************/
// funcoes
/*******************************************/

// funcao para determinar as posicoes X e Y
// de um menu em funcao do angulo e do raio
function posCircular(angulo, raio)
{
var pos = new Object();
var rad = angulo * conversao;
pos.x = Math.sin(rad) * raio;
pos.y = Math.cos(rad) * raio;

return pos;
}

// funcao para ser chamada na mesma frequencia da animacao
// e que eh responsavel por girar o menu
this.onEnterFrame = function () {
// calculamos se o mouse esta fora da area central
// e com que velocidade o menu ira girar
velocidade = (_root._ymouse - yIni)
if (Math.abs(velocidade) <= mouseSeguro)
velocidade = 0;
else
velocidade *= aceleracao;

// giramos o menu todo
angulo += velocidade;

// reposicionamos cada item do menu
for (i = 0; i < clips.length; i++)
{
// criar alias para o clipe de filme atual
var ptr = _root[clips[i]];

// alterar posicao horizontal do menu
ptr._x = xIni;

// calcular a diferenca angular desse menu
// em relacao a origem da roda
ptr.difAngular = difAngular * i;

// buscar as posicoes X (profundidade) e Y (altura) do menu
var pos = posCircular(angulo + ptr.difAngular, raio);
ptr._y = yIni + pos.y;

// calcular percentual de afastamento do menu
// para alterar seu tamanho e transparencia
var perc = (pos.x + raio) / dobroRaio;
ptr._alpha = perc * difAlpha + alphaMinimo;
ptr._xscale = ptr._yscale = perc * difEscala + escalaMinima;

// colocar o menu acima dos que estao mais afastados
ptr.swapDepths(pos.x + dobroRaio);
}
}

Caso tenha algum efeito ou código que gostaria de saber como se faz, mande uma mensagem para thiagoprado@yahoo.com. Não se esqueça de enviar comentários e dúvidas a respeito dos artigos já publicados.

Nome: Thiago dos Santos Prado Nascimento: 27/07/1982 Naturalidade: Goiânia-GO Nascionalidade: Brasileiro Email: thiagocpostal-artigos@yahoo.com Atividades preferidas: futebol, filmes, algoritmos
Resumo: Desenvolvedor Web em Flash, PHP e Java

Caso tenha algum efeito ou código que gostaria de saber como se faz, mande uma mensagem para thiagocpostal-artigos@yahoo.com. Não se esqueça de enviar comentários e dúvidas a respeito dos artigos já publicados.

-----------------------------------------------------------------------------------------