Feeds
Newsletter
Menu Circular em 3D
Olá a todos. Veremos aqui como criar um menu circular em 3D personalizável. Utilizaremos 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):
01. Introdução (esta
página)
02. Criando o ambiente em Flash
03. Mecânica circular
04. 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); } } |
Interação
36 comentários
Jean Carlos Ferreira da Silva
31/01/2005 15h04
Muito Bommmm!!
Parabéns Thiago esse tutor simm eh interessante valew mesmo!!!
isis lima
01/02/2005 17h11
Naum sei naum...
Desculpe o comentário. Mas até onde eu entendo 3D. Significa um foco de visão de 3 lados de um ou mais objetos. Coisa que eu não vi nesse efeito e me corrija se estiver errado mas esse efeito é 2D e não 3D.
ricardo
01/02/2005 20h32
É 3D sim...
Alexandre.. é 3D sim.. pois as imagens tem largura (1D) e altura (+1D).. e elas vão uma para trás da outras... circulando em "profundidade" (+1D)..
:)
Andreoni Vieira
01/02/2005 21h18
Relaxa
kra...o maluko tah dando un tutorial...q provavelment vc nem sabia faze...se 2D ou 3D relaxa..o importante eh funcionar..
3Ds Designer
flavio araujo
01/02/2005 22h32
maaaaaaaassa
muito massa esse negócio,,,,muito profi. parabéns....
isis lima
01/02/2005 22h44
Naum comente se naum sabe...
Entaum Andreoni Vieira... Provavelmente a única coisa que naum faço num PC é fazer ele explodir... E naum to muito longe de fazer isso tb... Entaum fale quando tiver certesa... Meu comentário foi construtivo... Eu entrei nessa matéria pq vi um titulo diferente. Mas quando vi o que era naum achei que estava correto com o resultado. Parabéns a todos os integrantes do Imasters... não foi nada de pessoal nem antiprofissional somente uma critica construtiva.
Lucas Dias
02/02/2005 08h36
Massa mesmo
Muito legal, mas como sou totalmente iniciante na tecnologia flash, seria legal que você colocasse disponivel para downloads os arquivos.
Fica na paz!
Evaldo Mario Siqueira
02/02/2005 16h49
Ola ! thiago
Tem como eu fazer isso no flash mx br
é porque sou iniciante no flash
Alberto
05/02/2005 10h48
Vc é bom mesmo..
Cara me fala...vc fez cursos? se fez aonde...meu eu quero aprender bastante........po parabens pelos seus trabalhos são massas mesmos...boa sorte..
Vinícius Eduardo Ferreira dos Santos Silva
14/02/2005 11h34
menu horizontal
Olá Tiago,
Como faço esse menu horizontal ou então em forma de espiral como no link de exemplo do artigo?
Sds
Rodrigo Lima
Antonio Oliveira
05/03/2005 18h48
Não consegui!!!
Parabên oela matéria, porém não consegui eu sou iniciante em flash e achei com pouquissimas explicações ...em questão de passo - a - passo.
Gostaria muito de obter ajuda para conseguir fazer este menu. Uso o flash MX.
Obrigada!
Ricardo Menezes
11/03/2005 10h14
Efeito dinâmico
Oi.. gostei do seu exemplo. foi muito bom pro meu aprendizado...
Gostaria de saber se tem como fazer um efeito dinâmico.
Quando você tira o mouse da figura o movimento não seja tão bruto (pára na hora), que ele fizesse um movimento mais leve....
Se puder me ajudar...
Obrigado
Ludovic Morais Dos Santos
11/03/2005 16h27
oi**gostaria de saber como fonciona dentro de um movie clip sem estar na cena principal.ja tentei e n gira!obrigado
Wanderson Martins da Silva
15/03/2005 06h53
Criar um jogo igual ou parecido com o show do milhão
No Flash através das Actions Scripts há como criar um jogo de perguntas igual ou parecido com o show do milhão?
Carlos Eduardo Lula Melim
26/03/2005 19h30
E dentro de um MovieClip como funciona?
Olá Thiago,
Muito bom o tutorial, mas estou com o mesmo problema doLudovic, dentro de um MC ele não funciona, como faço?
Obrigado.
Pedro Mendes
29/07/2005 15h31
O meu também não funcionou
Estou com o mesmo problema do Alain e do Ludovic..........
Marcus Vinicius Santana
19/08/2005 18h15
po cara consegui faze ... mais
tipo consegui faze o menu circular, porem nao adianta um menu circular sem os botoes nao funcionarem, o "goto" nao vai, ja tentei de tudo que eu conheço, nao é muito, mais eh um poco.
queria saber como se faz para colocar destinos nos botoes, do geito normal nao da, tenhu que botar o action script do botao dentro do action do menu ??? por ffavor responda..
abraço bela materia
Alexandre Toledo Perez
09/09/2005 12h03
Solucionando o GOTO'
Galera, o problema do goto é bem simples. Basta abrir cada um dos Movie Clips e, na ação de botão (o objeto é um botão, lembram?) é só colocar a função. Eu fiz e deu bem certo.
Grande Tutorial Thiago. Valeu mesmo, estava precisando de algo assim.
Fernando Sanches
31/10/2005 17h33
Dúvida
Consegui fazer o emu perfeitamente, porém preciso carregalo em outro SWF através de um loadMovie, quais os caminho q tenho q alterar no AS para funcionar?
Thiago dos Santos Prado
31/10/2005 19h12
Menu na horizontal
Pessoal, como tenho recebidos muitos emails perguntando como colocar o menu na horizontal, resolvi postar aqui a dica:
No código substitua o trecho A por B:
(A) velocidade = (_root._ymouse - yIni)
(B) velocidade = (_root._xmouse - xIni)
(A) ptr._x = xIni;
(B) ptr._y = yIni;
(A) ptr._y = yIni + pos.y;
(B) ptr._x = xIni + pos.y;
Na horizontal, fica melhor também colocar um raio de 200 ou mais, para esse exemplo.
Thiago dos Santos Prado
31/10/2005 19h14
Menu dentro de movie clip
Outra pergunta que me fazem muito é como colocar o menu dentro de um clipe de filme. A única coisa que muda no código é onde estiver "_root" substitua por "this" (sem as aspas).
edson josé costa de oliveira
06/02/2006 14h48
colocar dica em site
gostaria de montar um site colocando um menu com a sua dica tem algum problema com direitos autorais ou algo do gênero ?
Cristiano Figueiredo
26/07/2007 10h55
Cara muito loco esse 3d
Esses caras naum sabem do que stão falando claro que é 3D. E otra manda eles desenvolverem ao invés de criticar... Valew?
Marcelo Nicolao
04/06/2008 18h15
Flash MX
Existe algum tutorial para Flash MX. Desde já agradeço a atenção.
Silva Filho
26/11/2008 21h49
FLASH
Embora pra mtos este tutorial esteja mto claro, gostaria de pedir ao responsável que colocasse o arquivo editável FLA, para que através disso eu possa me guiar, conto com sua sensibilidade ou pode mandar pro meu email o arquivo, tanto faz.
Muito bom
Valeu, thiago, muito bom essa dica, isso abre muitas portas para varios outros menus 3ds!
Abraçoo!
Thiago Silveira
16/02/2009 15h05
função ptr.swapDepths
oi thiago, cara ótimo esse seu tutorial. beleza de trabalho, mas particularmente estou tendo um probleminha.
fiz esse menu e ele só é ora aoaecer entre certos frames ex. do 306 até 600. so que mesmo que passe do frame 600 o menu ainda continua aparecendo mesmo onde no time line ele não esta programado pra aparecer.
fui dar uma olhada no código ( não entendo muita coisa ainda) e quando tirei ( ptr.swapDepths(pos.x + dobroRaio);) ele parou de aparecer onde não devia, mas pelo que entendi esse é a função onde coloca a foto(botão) por cima das outras. só que ele ta colocando por cima tbm te todos os muvieclips que tem no projeto.
tem como dar uma luz?
obrigado e agradeço desde já!
Renis Pereira
08/03/2009 04h29
Parabens
Nussssss muito bom Thiago , tutorial mais bem explica que ja vi em toda vida , Parabens ; )
Como colocar este menu para rodar atravez de um botao.
Tipo qando clico na seta para a esquerda ele gira <<< quando coloca a seta para >>>> ele roda. na verade fazer ele ativar atravez de um boao no lado na tela.. rollOut e RollOver.
Rodrigo Jantara
21/09/2009 10h11
Perspectiva.
Olá a todos.
Gostatia de saber se tem como fazer esse corrossel ficar com uma perspectiva.
Uma visão mais de cima.
se alguem puder me ajudar agradeço desde já.
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.