HELEN TRIOLO (444 pts)

EDUARDO PERROUD (52 pts)

FÁBIO DUARTE (79 pts)

GUILHERME G.G. (137 pts)

PANDOGO (82 pts)

MARCOS JOSÉ PINTO (44 pts)

KEN AWAMURA (130 pts)

RICARDO TEIXEIRA (40 pts)

RICARDO FIGUEIRA (33 pts)

GÉRIO (93 pts)

DEMIS BUCCI (50 pts)

LUI FERNANDO (151 pts)
Treinamento PontoFlash de Flash e ActionScript

Vou dar uma sugestão simples e prática em Flash 5 para criar menus dinamicamente.

Como acessar o valor de um campo de texto input via teclado?

Como fazer um formulário no FlashMX com ASP?

Como é que faz para aparecer aquela animação de Carregando e a porcentagem?

Preciso criar um sistema que busque no banco de dados e retorne ao Flash.

Tenho 3 botões e quero que cada um toque uma música diferente.

Quero inserir um swf dentro de uma apresentação do PowerPoint.

Como eu faço um carregando bem simples no flash5?

Gostaria de fazer um sistema de login e senha no flash com ASP.

Quero fazer uma animação quando o mouse passa por cima do botão.

Preciso enviar um formulário integrando Flash e ASP.

Queria que o Flash importasse imagens de meu banco de dados.

Como reproduzo aquele efeito de espelho?

Como mostrar a posição X e Y de uma figura em uma página?
Componentes no Flash MX

Jogo da Forca (terceira parte)

Contador usando SharedObjects.

Trace Bitmap.

Componentes no Flash MX 2004

Parâmetro - Get camera().

Citroen, máscaras que simulam vídeo - Avaliação de sites

Conceitos de Programação e ActionScript.

Looping.

Frases randômicas

Load Movie into level (nível)

Número randômicos sem repetições no Flash 5.
Trocar cor de fundo

Texto com fade

Magnetismo

Raspadinha

5Balls_done

Cleopalyer

Array

Textfind

Marquee

Time left preloader

3d rotation2

Drawpad
HOME | TUTORIAIS
Menu estático.
por Helen Triolo

Nesse tutorial, criaremos um menu estático de miniaturas como esse mostrado abaixo (com miniaturas clicáveis e estáticas).

Criando o layout inicial.

Abra um novo filme de 450x258 pixels (12 fps é bom) com um fundo preto. Na timeline principal, adicione 2 novas camadas. Nomeie as três camadas como slider, thumbnails, e ações. Na camada slider, crie um retângulo cinza (sem bordas) com 450x60 pixels e na posição x = 0 e y = 185.

Importando as fotos

Comece escolhendo cinco fotos gifs ou jpgs. Elas devem ter o tamanho de 279X165 pixels. Clique em Arquivo / Importar e escolha seus 5 bitmaps. Cheque a biblioteca (ctrl-L) pra ver se as imagens foram importadas corretamente.

Tamanho das miniaturas

Clique na camada thumbnails, arraste uma cópia das imagens para o palco e redimensione todas para o tamanho 78x48 pixels. Posicione-as nessas posições (X,Y) (96, 191), (186, 191), (276, 191) e (366, 191). Elas devem estar alinhadas sobre o retângulo cinza que servirá de fundo para elas (veja como estão posicionadas no SWF acima).

Fazendo das miniaturas botões e das imagens movieclips

Devemos transformar as miniaturas clicáveis, certo? Converta-os em botões. Selecione a primeira foto/thumbnail, pressione F8 (Inserir / Converter para Símbolo), escolha botão e dê-lhe um nome. Repita os passos para as outras miniaturas.

   Nós queremos as imagens grandes inicialmete escondidas, para serem mostradas apenas quando os botões forem clicados. Crie uma camada para cada uma das imagens grandes.
5 camadas novas. Arraste outra cópia de cada uma das imagens da biblioteca para sua própria camada para podermos manipullá-las individualmente (não as redimensioneagora). Essas imagens devem estar em sua própria camada, mas na mesma posição (X = 90, Y = 10).

Converta as imagens grandes em movieclips (F8 = Inserir / Converter para Símbolo) e dê-lhes nomes de instância como: grande1, grande2, grande3, grande4, grande5.

Editando os movieclips para incluir estados visíveis e invisíveis

Agora devemos configurar os movieclips de maneira que eles fiquem visíveis apenas quando o queremos visível. Uma forma de se fazer isso é criar um estado "visível" e um "invisível" no movieclip.

   Para fazer isso, entre na área de edição de um dos movieclips. Clique no frame 1, mantenha o cursor pressionado e arraste o quadro para o frame10. Agora você deve ter os 9 primeiros frames vazios (nós queremos eles invisíveis, lembra-se?) e a foto no frame 10. Clique no frame 20 e pressione F5 para extender os frames (isso está sendo feito apenas para ser mostrado o nome do rótulo que vamos adicionar). Adicione uma nova camada, chame-a rótulos e na barra de propriedades, coloque, para o frame 1, o rótulo "invisivel" (sem aspas). Ainda na mesma camada, pressione F7 no frame 10 para criar um novo quadro-chave e coloque como rótulo desse frame: "visivel".

   Numa outra camada, chamada ações, crie um novo quadro-chave no frame 10 (F7), abra a janela de ações e coloque essa ação no frame 10:

stop();

   Coloque essa mesma ação no frame 1 também.


Veja como fica a timeline do movieclip

   Agora seu movieclip tem dois estados: invisível (sem conteúdo) e visível (com conteúdo), cada um com uma ação stop e um rótulo. E está pronto para usar. Volte para a timeline principal de seu filme e verá que esse movieclip agora será mostrado apenas por uma bolinha branca, pois não há nada no primeiro frame. Repita esses passos para todos os movieclips, para que todos tenham um estado visível e outro invisível. Llembrando sempre de relacionar corretamente os botões/miniaturas com os movieclips com a cópia maior da imagem.

Adicionando códigos aos botões

O padrão de todos os movieclips é agora invisível. Para torná-los visíveis quando clicados, você precisa adicionar códigos aos botões. Na timeline principal, clique no primeiro botão para selecioná-lo. Com o botão selecionado, abra a janela de ações e cole ese código:

on (release) {
   grafico1.gotoAndStop("visivel");
}

Teste seu flme e veja se o primeiro botão abre a imagem correspondente. Se tudo estiver OK, repita os passos para os outros botões.

Adicionando uma função para "esconder" os movieclips

Teste seu filme novamente e teste os botões. Reparou em algum problema? As fotos se abrirão umas sobre a outra e a da camada mais acima ficará sempre sobrepondo as outras. Solução? Em cada clique, nós devemos "esconder" todos os outros movieclips antes de mostrar o correspondente ao botão clicado.

Podemos colocar esse código em todos os botões?
Sim, mas podemos também usar uma função que seria chamada repetidamente pelos botões.

Onde essa função seria facilmente acessível a todos os botões?
No frame 1 da timeline principal, na camada ações. Abra a janela de ações e coloque isso:

function invisivel() {
   _root.grafico1.gotoAndStop("invisivel");
   _root.grafico2.gotoAndStop("invisivel");
   _root.grafico3.gotoAndStop("invisivel");
   _root.grafico4.gotoAndStop("invisivel");
   _root.grafico5.gotoAndStop("invisivel");
}

Clique no primeiro botão e abra a janela de ações. Insira essa linha antes da ação gotoAndStop, ateriormente adicionada:

invisivel();

Isso manda todos os movieclips para o estado invisível antes da ação que mostra o movieclip escolhido. Repita em todos os botões. O código deles deverá estar assim:

on (release) {
   invisivel();
   grafico1.gotoAndStop("visivel");
}

Acho que agora seu filme está funcionando perfeitamente.

No próximo tutorial, vamos animar esse menu.

Se você não consegui fazer o arquivo, baixe aqui o exemplo desse tutorial.

Tradução:
Alê Porto



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
2 comentários


Comentário de Artur Gomes
| 18/3/2010 - 01:02 |


oi helen, Muito legal essa dica. Mas tenho uma pergunta. Eu gostaria de saber se é possível criar um menu, que ao clicar por exemplo, na terceira imagem ele vá para a imagem com efeito de movimento e ao clicar em uma imagem anterior ele volter com um efeito de movimento reverso. Seria muito complicado? Agradeço desde já...



Comentário de Fernanda
| 15/1/2010 - 03:20 |


Oi. Os links tão quebrados E o anexo não consigo ver

Já consertei Fernanda. Obrigado pela visita e pelo aviso.