RÔMULO NUNES (32 pts)

PANDOGO (82 pts)

PEDRO CLAUDIO (50 pts)

LUI FERNANDO (151 pts)

SYDNEY GANHO (60 pts)

RODRIGO AMARAL (56 pts)

ZEBEDIAH (35 pts)

MUZAK (45 pts)

MARCOS JOSÉ PINTO (44 pts)

JONAS GALVEZ (521 pts)

KEN AWAMURA (130 pts)

DENIS CARAVALHO (85 pts)
Treinamento PontoFlash de Flash e ActionScript

Como armazenar dados em uma base de dados para só depois serem importadas para o Access?

Porque imagens TIFF têm melhor qualidade do que as imagens em .JPG (3).

Queria aprender a usar loops (While ou o For) em actioscript.

Script que chama o método play(); em todos os movieClips filhos de um movieClip.

Dá pra fazer um menu popup usando a propriedade _currentFrame?

Como verificar se dois campos receberam o mesmo valor e disparar uma ação?

Como setar o foco usando o setFocus e o onSetFocus e o onKillFocus?

Preciso que um campo de texto exiba um arquivo txt e como usar o loadVars?

Gostaria de saber se existem plugins para flash.

Tem como setar um level (nível) para um movieclip?

Como fazer que num movie tenha três músicas, onde eu posso parar e continuar de onde ela parou?

Como faço um cursor customizado apenas em uma determinada área do site?

Como é que eu faço um efeito de um objeto crescendo e entrando em foco?

Quero acrescentar vídeos e um menu num CD de áudio.
Pre-loader simples.

Entendendo como funciona um preloader - Segunda parte

Criando um verificador de campos de um formulário.

Objeto XML - xml viewer

Janelas pop-up e semi-full no flash

Efeito de Fogo no Photoshop

Jogo da Forca

Comunicação Flash-PHp-MySql - Editar banco de dados

Editor de banco de dados (PHP-MySql) orientado a Objetos (OOP)

RIA, Macromedia Flex e Laszlo Presentation Server

Entendendo como funciona um preloader. Primeira parte.

Sistema de busca utilizando Flash + ASP.
Menu popop de pastas 2

batatoso

Menu tint

Mapa do Brasil

Lightball

Xbox f5

Replace

Preload advanced

The Vars

Text fx1

Clock

Barneys menu
HOME | TUTORIAIS
Menu circular em 3D personalizável
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[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);
   }
}

Baixe aqui o arquivo para download



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 alex sandro
| 18/5/2010 - 12:38 |


gostei do menu , mas não consegui criar o link do botão com a imagem