EDUARDO CARREGA (150 pts)

FLASHGURU (155 pts)

IRAPUAN MARTINEZ (45 pts)

ÉMERSON ROCHA (85 pts)

RICARDO TEIXEIRA (40 pts)

HELEN TRIOLO (444 pts)

DEN IVANOV (260 pts)

MARLOS ALVES CARMO (90 pts)

JOÃO NETO (78 pts)

SYDNEY GANHO (60 pts)

GABRIEL SPORCH (53 pts)

RODRIGO AMARAL (56 pts)
Treinamento PontoFlash de Flash e ActionScript

Método sendAndLoad do objeto LoadVars mais fácil.

O que é e como funciona o Math.round?

Como fazer uma timeline andar mais lenta que outra?

Tem como encontrar um determinado texto numa string?

Tenho um movie principal, e ao cara clicar nos botões, esconda uma layer, e carregue um outro MC(swf) para dentro deste mesmo movie principal.

Qual a vantagem de exportar alguma coisa do Fireworks para o Flash?

Preciso pegar no Flash variáveis do ASP.

É possível criar uma variável de outra variável?

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

Como deletar a última palavra de um campo de texto?

Não consigo enviar uma ação de dentro de um movieclip para outro. Eles estão em frames diferentes na timeline principal.

É necessário criar um objeto para usar o prototype?

Como fazer um jogo de perguntas e respostas?

Comentários do o script do “desenho livre” (sources/actionscript)?
Parâmetro - Get camera().

Entendendo como funciona um preloader. Terceira parte.

Voltar à Timeline principal usando a função "Call"

Dicas para otimizar seu SWF (revisado e atualizado).

Alterar a parência dos componentes do FlashMX.

Desenhando no Flash.

Flash Turbine (integração Flash com PHP ou ASP)

Integração Flash X ColdFusion.

Ação Include.

Vídeo no FlashMX.

Como criar objetos 3D no Fireworks.

Objeto Movieclip - Endereçamento (primeira parte)
Wormspyder

Busca texto

Drag tele

Menu móvel

Animação frame by frame

Worm

Tween motion

Validação de senha e login

Spinner

Drag circling

Passagens

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.