BÁRBARA TOSTES (64 pts)

GABRIEL SPORCH (53 pts)

MAURO ROCHA TAVARES (40 pts)

DEMIS BUCCI (50 pts)

FLASHGURU (155 pts)

ALEXANDRE PORTO (1281 pts)

KEN AWAMURA (130 pts)

RICARDO FIGUEIRA (33 pts)

AMAURY BENTES (123 pts)

STICKMAN (155 pts)

MANGOOST (80 pts)

EDUARDO WALMOTT (226 pts)
Treinamento PontoFlash de Flash e ActionScript

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

Entrada diferente numa segunda visita ao site.

Alguém sabe como evitar o cachê da máquina do usuário para um SWF?

Preciso de um exemplo de um efeito de vibração?

Como fazer um movieclip andar numa área do palco e parar só usando actions?

Como importar um texto no Flash com as tags de negrito do HTML?

Como coloco um cronômetro no flash?

Como fazer um nextFrame e prevFrame com o teclado? Dicas do uso de Listeners (ouvintes).

É possível redimensionar um jpg aberto dinamicamente?

Máscara e textos importados de um TXT.

Gostaria de saber se o Flash 5 importa aquivos do Photoshop com extensão .psd?

Como fechar uma janela fullscreen ou poup?

Alguém sabe como um link em html controlar um FlashMovie.

Existe algum modo de definir quais variáveis vão ser enviadas pelo POST do flash?
Menu estático.

Movimento por meio de actionscript

Efeito Blur - Actionscript

Degradé com tons metálicos - Fireworks

Aplicação simultânea de Fio e Sombra a bitmaps - Fireworks

Calendário dinâmico

Jogo da Forca (segunda parte)

3D Wireframe - segunda parte

Includes.

Alterar a parência dos componentes do FlashMX.

Utilização da class XMLConnector

Ação Include.
3dsimmoufollow

Scroll text2

Chinese dragoon

Mouse tracks

Menu Silverado

Line trail e random

Lineas

Menu orbita

Mapa - Países com C

Personagem animado

Frank

Spectrum Sound Analyzer
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.