Como se Faz esse Efeito???

[Virto 0]

Olá pessoal!!! Vi esse efeito nesse site: http://www.credicard.com.br/home/default.htm e fiquei muito curioso em saber como foi feito. Se alguém puder me ajudar de alguma forma, seja por tutorial, indicação de links e tals ficarei muito agradecido. Já procurei e ainda não achei, mas continuarei procurando. Se alguém puder me ajudar...

Obrigado!!!

[Vinicius R3 0]

Por action script ou mesmo por motion tween da pra fazer... Por exemplo coloka um on Release, pra que quando pressionado os cartões vão para o lado pressionado. E você não pode postar aki como faço, posta tipo como rolar um mc para o lado clikando em um botão eh melhor!!!Valew espero q tenha dado uma iluminada ae

[GabrielFerrari 41]

é parecido só q nao tem os botoes XD

 

 

 

 

 

 

 

 

 

 

 

 

 

:natal_w00t:por Thiago Prado

 

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.

 

 

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

 

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.

 

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];

// 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. Não se esqueça de enviar comentários e dúvidas a respeito dos artigos já publicados.

[leila•trupe 1]

Olha, um tutorial especificamente pra fazer isso é difícil. Mas conhecendo alguma coisa de AS você consegue fazer tranquilo. Eu faria utilizando classes Tween. Dê uma olhada como elas funcionam aqui. Não é tudo que você precisa mas é um ponto de partida.

[GabrielFerrari 41]

acho q esse tuto nao vai ser de muita ajuda ¬¬ pois ele so roda nao tem os botoes

[Virto 0]

Vlw ae pela ajuda de todos, mas sou iniciante em Flash. Nem sei começar com AS... rsrs.Thelon vlw ae pelo tuto, vou começar a fazer ou pelo menos tentar. Mas teria como você enviar o link desse tuto para que eu pudesse ver ele por "completo"??? Vlw ae!!!

[GabrielFerrari 41]

tp o site q eu peguei nao tem link direto você vai ter q da uma caçada la XD ;)

 

http://www.pontoflash.com.br ta em tutoriais em avançado... achei q nao ia presta pra nada.

 

 

se você nao consegui da pra baxa o exemplo.

 

flw boa sorte.

[Vinicius R3 0]

ae talves isso o ajude =]

 

http://www.pontoflash.com.br/colunas/mater...=3&Item=366

[Public2004 79]

Acho que a sua intenção foi boa, mas ressucitar um tópico de 2006 não foi legal.

[GabrielFerrari 41]

Nossa eu escrevia como um primata espero ter melhorado

 

(desculpa mas é que fiquei chocado comigo mesmo)