Menu Circular 3D


Olá pessoal. Vou compartilhar com vocês agora o código do Menu Circular um código que não é meu…srrs mas vou postá-lo com devida autorização do autor.
Na verdade eu tenho uma mínima participação, que foi uma alteração  que fiz na questão da profundidade.

menucircular.jpg

Para aplicá-lo, você só necessita colocar os movieclips que irão rotacionar no palco, com escala de 100% para visualizar o tamanho real, e instanciá-los.


Coloque o seguinte AS no seu frame:

/*******************************************/
// variavies de configuracao
/*******************************************/
// guardar as instancias a serem rotacionadas em um vetor
var clips = Array(“cel1″, “cel2″, “cel3″, “cel4″);
var raio = 230;
// raio de rotacao
var aceleracao = 0.05;
// aceleracao do mouse para o giro
var alphaMinimo = 50;
// transparencia do botao de menu mais distante
var alphaMaximo = 100;
// 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
//altura minima
// 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 = 50;
var yIni = -130;
var alturaMaxima = yIni;
//valor da altura
var alturaMinima = alturaMaxima-50;
var dobroRaio = raio*2;
var conversao = Math.PI/180;
// fator de conversao de angulo para radiano
var difAngular = 360/clips.length;
var diffAltura = alturaMaxima-alturaMinima;
// 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 = (this._xmouse-xIni);
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 = this[clips[i]];

// 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._x = xIni+pos.x;
// calcular percentual de afastamento do menu
// para alterar seu tamanho e transparencia
var perc = (pos.y+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.y+dobroRaio);

// alterar posicao vertical do menu]
var pctPos = (ptr._xscale-escalaMinima)/(difEscala/100);
var posAlt = (pctPos*(diffAltura/100))+alturaMinima;
ptr._y = posAlt;
trace(posAlt)
}
trace(“———————”)
};

Agora, é só configurar, alterando os valores das variáveis. Entenda abaixo:

var clips = new Array; //Aqui você colocará o nome da instância dos movieclips que irão participar da rotação.
var raio = 230; //Valor do raio da rotação
var aceleracao = 0.05; //Velocidade com que a rotação será feita
var alphaMinimo = 50; //Valor da transparência do movieclip quando estiver no limite do fundo
var alphaMaximo = 100; //Valor da transparência do movieclip quando estiver no limite da frente
var escalaMinima = 50; //escala em % do tamanho do movieclip quando estiver no limite do fundo
var escalaMaxima = 100; //escala em % do tamanho do movieclip quando estiver no limite da frente
var mouseSeguro = 100; //área central em pixels onde o mouse não aciona o menu
var xIni = 50; //posicão x inicial do menu
var yIni = -130; //posição y inicial do menu
var alturaMinima = -180; //altura em que o movieclip fica quando estiver no limite do fundo
var alturaMaxima = -130; //altura máxima que o movieclip fica quando estiver no limite da frente

É isso aí galera. QQ dúvida é só perguntar.

Você pode baixar um exemplo aqui.

A matéria do amigo Thiago dos Santos, autor do código original, você encontra aqui:
http://imasters.uol.com.br/artigo/2931/actionscript/menu_circular_em_3d/

*As imagens utilizadas no exemplo são para mera demonstração, os direitos são de seus autores

, , ,

  1. #1 por renato arantes em Abril 9th, 2008

    caro weverton

    gostei das modificaçãoes que vc fez neste menu circular,
    como sou iniciante em flash, tenho uma dificuldade que é fazer novas imagens rodarem, apesar de ter criado as arrays delas e ter colocado elas no movieclip menu circular,

    se puder me ajudar agradeço muito
    renato

  2. #2 por fabio em Maio 16th, 2008

    estou com alguns problemas, não precisa definir nenhum movimento no frame principal???

  3. #3 por Weverton Naves em Maio 16th, 2008

    renato, mande-me o arquivo.

  4. #4 por Weverton Naves em Maio 16th, 2008

    fabio.

    Que movimento?
    De início, é só abrir e testar. Se precisar alterar algo, vc tem que mudar as configurações.

    Abs

  5. #5 por Pedro Diniz em Agosto 23rd, 2008

    fala ai Weverton Naves, blz ?
    era exatamente isso que estava procurando
    mas como transformar os MC (fotos dos celulares) em botão ?
    eu tentei apenas mudar de movie clip para botão mas ñ da certo, ñ parece ser tão simples assim neh
    se possivel, me add no msn
    pedrodiniz18@hotmail.com
    valeu

  6. #6 por Weverton Naves em Setembro 1st, 2008

    Pedro, por volta da linha 74, vc cola o seguinte código:

    ptr.onRelease = function(){
    //suas ações aqui
    }

    Só que como isso é um loop, ele aplica o código para todos.
    Abs.

  7. #7 por STORM em Setembro 9th, 2008

    Olá Weverton, por acaso você tem o tutorial desse menu em AS3, pedi pro Thiago mas ele disse que não está interado no AS3 ainda…rs

    Beijos ficou lindo!

  8. #8 por Weverton Naves em Setembro 11th, 2008

    Então STORM,
    Eu tbm não estou muito interado com o AS3 tbm.
    Obrigado.

  9. #9 por paula faria em Outubro 6th, 2008

    e como faço para ele ficar na horizontal?

  10. #10 por Raphael em Janeiro 21st, 2009

    para Pedro diniz…..

    para colocar um link diferente em cada botão eh simples….

    clique em cima do cel que deseja inserir o link…
    e pressione F9 (tela para inserir o action)

    em seguida coloque o código

    on (release){
    getURL (“pagina.html”,”janela a ser aberta”);
    }

    é só isso….
    espero ter ajudado =D

  11. #11 por celso em Junho 4th, 2009

    preciso de ajuda
    estou usando esse menu giratorio, so que a velocidade dele e determinada conforme a distacia do mouse e o tamanho do palco, e como ele nao fica no centro nao esta ficando legal pois se vc vai para um lado maior gira mais rapido e no outro lado quase nao gira.
    poderia me ajudar?

    • #12 por Weverton Naves em Junho 5th, 2009

      Amigo, faça um if para que a sensibilidade do mouse só funcione em determinado espaço do palco.
      Att.

  12. #13 por Lairson em Junho 17th, 2009

    Olá Weverton,
    Muito Bom!!
    Flash não é tão minha praia assim e tentei criar aqui e não obtive sucesso…
    Será que terias como me enviar ou “ajeitar” o seu link de um exemplo..para que eu possa verificar…?
    Ficaria Muito Grato!
    Ótimo Site! Gostei!
    Abs

  13. #14 por Anderson Rino em Agosto 14th, 2009

    Olá amigo.

    Estou tentando fazer este menu funcionar mais ele esta dando varios erros de código.

    Seria posivel mandar um arquivo fla para eu estudalo melhor.

  14. #15 por Weverton Naves em Outubro 27th, 2009

    renato, mande-me o arquivo.

(não será publicado)
  1. Nenhum trackback.