GUILHERME G.G. (137 pts)

ALEXANDRE PORTO (1281 pts)

RICARDO FIGUEIRA (33 pts)

FÁBIO DUARTE (79 pts)

DANIELA PIRES (86 pts)

JONAS GALVEZ (521 pts)

NILTON BICALHO (61 pts)

GÉRIO (93 pts)

PEDRO CLAUDIO (50 pts)

DENIS CARAVALHO (85 pts)

AUTOR DESCONHECIDO (100 pts)

SÁVIO PONTE (39 pts)
Treinamento PontoFlash de Flash e ActionScript

Como faço para desabilitar a mãozinha do mouse em filmes que estão em levels inferiores?

Como setar _alpha para um texto criado dinamicamente no FlashMX?

Quero desenhar uma sombra enevoada em um botão!

Como justificar um texto e criar uma barra colorida?

Como dar um efeito alpha gradativamente, como se fosse um motion?

Como controlar uma trilha sonora com Action Script?

Onde teria algum recurso de upload, para enviar, via site, imagens para o servidor?

Como pular um frame que tem uma ação Stop?

Como saber se uma variável externa foi carregada?

Como criar um campo de texto dinamicamente pelo FlashMX?

Queria fazer um sistema de busca.

Quando usar onclipevent (enterframe) ou onclipevent (load)?

Tamanho de banners

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

Shared object.

Login e senha

Gerenciando camadas no CorelDraw

Rayoflight.

Turbine seu Fireworks

Ação Include.

Máscara com gradiente.

Objetos e classes

XMLSockets

Pre-carregador (Preloader)

Envio de um arquivo SWF por e-mail
Frame navegação

Preload leve

Mouse recorder

Wireframe

Position

Coordenadas

Multi text load

Load image

3dsnake

Alphacolor

BeeJay

Linhas paralelas
HOME | TUTORIAIS
Menu Popup
por Ana Luiza Giusti

Neste tutorial você vai aprender a fazer um menu pop up como o do exemplo acima.

Primeiramente, através do menu Insert - New Symbol, crie um símbolo do tipo button e nomeie como "botão". Clique 2 vezes no símbolo para entrar em seu modo de edição e desenhe um retângulo de tamanho idêntico nos quatro frames (mude as cores nos frames over e down para dar mais animação).

Agora, crie um novo símbolo do tipo movie clip, e nomeie como "menu". Entre em sua área de edição e crie 6 camadas ou layers na timeline: actions, rótulo principal, botão principal, rótulos menu, botões menu e botão escape (fig.1).


fig.1


fig.2

Na camada actions, pressione F5 (para inserir um frame em cada camada).
Selecione o primeiro frame da camada botão principal, abra a biblioteca e arraste uma instância do símbolo "botão" já criado e centralize-o na área de trabalho ou stage. Selecione o primeiro frame da camada rótulo principal, clique na ferramenta texto, e escreva MENU. Posicione este rótulo sobre o botão que está no stage.

Nas 3 camadas inferiores, use F7 para inserir mais um frame em branco em cada uma (fig.2). Selecione o primeiro frame da camada actions, clique com o botão direito do mouse e escolha Actions. Na caixa de diálogo Frame Actions, clique no botão +, escolha Basic Actions, selecione Stop (isto vai evitar que o movie clip entre em looping).

Agora vamos colocar no palco ou stage, mais instâncias do símbolo botão, que constituirão o "sub menu". Selecione o segundo frame da camada botões menu e arraste 5 instâncias do símbolo botão, posicionando-as abaixo do botão principal, deixando um pequeno espaço entre elas.

Na camada rótulos menu, selecione o segundo frame, clique na ferramenta texto e escreva "Item 1". Posicione este rótulo sobre o primeiro botão abaixo do botão principal. Repita os rótulos para os outros 4 botões.

Sua timeline do "menu" vai ficar como a fig. abaixo. Trave todas as camadas, menos botão principal, onde vamos inserir o comando que abrirá o "sub-menu".
Selecione o botão principal no stage, clique com o botão direito e escolha Actions.

Na caixa de diálogo Object Actions, clique em +, vá até Basic Actions e escolha Go To. Na parte inferior da caixa de diálogo, coloque o número 2 no campo Frame e desmarque o quadro Go to and Play. Clique sobre a linha on (release) para ver as opções de eventos do mouse, desmarque a opção Release e marque a opção Roll Over. O script vai ficar assim:

on (rollOver) {
   gotoAndStop (2);
}

Agora, o menu já está abrindo... Vamos fazer um pequeno teste. Volte à timeline do filme principal, abra a biblioteca e arraste uma instância do movie clip "menu" para o stage.

Clique na primeira frame do filme principal com o botão direito do mouse e escolha Actions. Na caixa de diálogo Frame Actions, clique em +, escolha Basic Actions - FSCommand. Na parte debaixo da caixa de diálogo, abra o menu Commands for standalone player e escolha a opção allowscale (true/false). Na caixa Arguments substitua true por false. O comando allowscale define se o filme será redimensionado na tela (true) ou não (false).

Aperte Control+Enter para testar o filme. Você verá que o menu abre, mas não fecha.
Para que o menu volte a fechar quando o mouse sai fora do botão, seria preciso acrescentar o seguinte script:

on (rollout) {
   gotoandStop (1);
}

Mas esta não é uma solução satisfatória, pois se o menu se fechar, como poderemos descer o mouse sobre as opções de nosso sub-menu? Para resolver este problema, faremos um "botão invisível" que vai servir como "área de escape" para o nosso menu.

Clique 2 vezes no movie clip menu (na biblioteca ou no stage) para entrar em seu modo de edição. Trave todas as camadas, menos a camada botão escape. Selecione o segundo frame desta camada e clique na ferramenta Retângulo. Desenhe um retângulo grande, envolvendo todos os botões, inclusive o botão principal.

Este retângulo deve ser bem maior que o menu, pois, mesmo que o internauta desloque o mouse muito rápido para fora do menu, esta área será suficiente para o acionamento das actions. E como ele está na camada inferior da timeline, ele ficará por trás do menu na tela.

Agora, clique na ferramenta Seta e selecione o retângulo que você acaba de desenhar.
Vá até o menu Insert - Convert to Symbol e salve o símbolo como do tipo button, com o nome de "escape".

Agora que temos o botão escape, vamos torná-lo invisível.
Clique com o botão direito sobre ele e escolha Edit. Na área de edição do botão, selecione o retângulo e vá até o menu Edit e escolha Cut.
Clique com o botão direito no quadro Hit da timeline e escolha Insert Keyframe. Vá ao menu Edit de novo e selecione Paste in Place.
Agora você tem um botão com os quadros up, over e down vazios, e apenas o quadro hit tem conteúdo.

Volte à área de edição do movie clip "menu" e posicione o ponteiro do mouse sobre o segundo frame. Você verá que o botão "escape" aparece, mas agora com uma cor azul-clara transparente, que não aparecerá na tela.

Agora vamos definir o script para o botão "escape". Clique com o botão direito sobre ele e selecione Actions.
Na caixa de diálogo Object Actions, clique em + e escolha Basic Actions - Go To. Na parte inferior, escreva o número 1 na opção Frame e desmarque a opção Go to and Play que fica embaixo.
Clique sobre a linha on (release) para abrir as opções de eventos do mouse. Desmarque Release e marque as opções Roll Over e Roll Out.

Teste o filme. Você notará que o menu se fecha ao passar pelos pequenos espaços entre os botões, isto porque, abaixo dos botões, está ativo o botão escape.
Para corrigir isso, vamos editar o hit do botão escape novamente para que ele se ajuste perfeitamente a nossos objetivos.

Vamos voltar à área de ediçao do movie clip "menu", com apenas a camada escape destravada.
Selecione o segundo frame da camada escape, clique com o botão direito sobre o botão "escape" no stage e escolha a opção Edit in Place. Você será levado ao modo de edição do botão, mas não deixará de visualizar o restante do conteúdo da cena, como na figura ao lado.

Leve o ponteiro do mouse sobre o quadro Hit.
O que vamos fazer é abrir um "buraco" na área sensível ou Hit do botão "escape", de modo a fazer um botão vazado.
Clique na ferramenta Retângulo e trace um retângulo com as mesmas dimensões do menu e seu conjunto de botões.

Agora, selecione o retângulo menor e simplesmente Delete. Este recurso criará um "buraco" no retângulo do quadro Hit.
Teste o filme novamente e veja como tudo funciona melhor.

Agora você pode incrementar os comandos nos botões do sub-menu.
Na área de edição do movie clipe "menu", clique com o botão direito no mouse sobre o primeiro botão abaixo do botão principal e selecione a opção Actions.

Aqui o script vai variar de acordo com o que você quer fazer, se abrir uma página qualquer, carregar um movie clip ou mesmo ir para uma nova cena.

Se quiser abrir uma página qualquer na Internet em uma nova janela do browser, o script será, por exemplo:

on (release) {
   gotoAndStop (1);
   getURL ("http:www.pontoflash.com.br", _blank);
}

Se quiser carregar um novo filme na cena, o script será, mais ou menos:

on (release) {
   gotoAndStop (1);
   loadMovieNum( "nomedoarquivo.swf", target ou level);
}

Tudo dependerá do que você quer. Você também pode alterar a seu gosto o número e formato dos botões. Bom proveito!

Baixe aqui o arquivo FLA desse tutorial.



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 GUILHERME FAGUNDES SARAIVA
| 26/3/2012 - 13:26 |


obrigado! perfeito! funcionou de primeira! parabéns pelo trabalho!