PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais Avançados

Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX
Dificuldade: Avançado
Data de Publicação: 25/11/2003


Este tutorial vai tentar ensinar-vos de como fazer menus com um efeito de desaparecer. O nome pode parecer um pouco estranho, mas à medida que iremos desenvolver este tipo de menus, vamos ver que se torna bastante engraçado para poder utilizar nos nossos projectos.

Ficheiro Swf

Clique com o botão direito do rato sobre o filme para visualizar o menu de opções


Downloads:

Flash Player icon Ficheiro Fla Tutorial em PDF

1. Comecemos por criar um novo projecto no Flash. Após o terem criado, escrevam texto ou desenhem uma shape com o texto que vocês pretenderem.

2. Deveremos de seguida converter o texto ou a shape, para Button. Poderemos dar o nome de Botao Principal e não se esqueçam de seleccionar a opção de Button. Para converterem deverão seleccionar o objecto e depois pressionar a tecla de F8.

3. Após terem convertido para Button, é-vos agora pedido para que revoltem a converter para Movie Clip. Deverão seleccionar desta vez o Botão e de seguida pressionar a tecla de F8. O nome a ser indicado, deverá ser o de Menu Principal. Não se esqueçam de clicar sobre a opção de Movie Clip. Desta forma iremos ter o nosso botão criado, dentro de um Movie Clip. Apartir deste momento, dêm dois cliques no Movie Clip, pois necessitaremos de trabalhar dentro do mesmo.

4. Vamos criar 6 novas layers. Isto pode ser feito clicando no botão de Insert Layer.

5. Deveremos arrastar uma das layers para a parte mais baixa das layers. Para este momento, deveremos ter uma layer totalmente em branco para criarmos o nosso efeito.

6. Teremos então de começar a identificar cada uma das layers pelos seus nomes. Assim sendo, deveremos nomear as layer por ordem de cima para baixo da seguinte forma: Actions, Labels, Sobre, Produtos, Contactos, Menu Principal e Botao Invisivel.

7. Na layer de Actions, deveremos clicar sobre a frame 1, e arrastar até à frame 40.

8. Teremos de criar uma acção de Stop, na frame 1 e 22, da layer de Actions. Para tal, sobre cada uma das frames, clicamos com o botão direito do rato, e vamos escolher a opção de Actions. Dentro do painel das Actions, escreveremos o seguinte código:

stop();

Na frame 22, deverá ser carregado na tecla F6 para que se insira uma keyframe, de modo a que seja possível inserir outra instrução de stop.

9. De seguida vamos criar duas labels sobre a layer Labels. A primeira label deverá ser criada na frame 1 com o nome de Normal. De novo iremos repetir o mesmo passo, mas sobre a frame 10, onde lhe daremos o nome de Over.

10. Vamos pressionar a tecla de F6, sobre a frame 10 das seguintes layers: Contactos, Produtos e Sobre.

11. Sobre a frame 10 de cada uma das layers anteriores deveremos criar um botão para cada uma delas. A nossa escolha recaiu sobre a criação de botões com os mesmos nomes das layers.

Não se esqueçam que para criar um botão deverão criar o conteúdo no ecrã, e de seguida converter para botão, pressionando a tecla de F8.

12. Alinhem de seguida os vossos botões com as teclas de direcção, e com o painel de alinhamento do Flash.

13. Sobre as frames 14 das layers que contêm os botões criados, vamos criar keyframes para cada uma delas.

14. Vamos seleccionar somente as frames 10 de cada uma das layers com os botões. Para tal cliquem 1 vez sobre a primeira frame 10 que quiserem e de seguida pressionando a tecla de Shift, cliquem 1 vez sobre a frame 10, de cada uma das layers restantes.

15. Com as frames 10 das 3 layers seleccionadas, movam os botões com a tecla de direcção da esquerda, cerca de 20 vezes.

16. Com as frames ainda seleccionadas, vamos tornar o Alpha para 0%. A função de Alpha pode ser encontrada, no painel do Color Mixer.

17. Ainda com as frames seleccionadas, vamos clicar com o botão direito do rato sobre as frames seleccionadas, e escolher a opção Motion Tween.

18. Teremos de seguida de trabalhar sobre as layers de Produtos e Contactos. Sobre a layer de Produtos, vamos clicar sobre a frame 10 e pressionando a tecla de Shift, clicamos na frame 14, de modo a seleccionar todo o efeito de Motion Tween. De seguida vamos arrastar esse mesmo conteúdo, para que comece na frame 14. O mesmo deverá ser feito para a layer de Contactos, onde o efeito deverá ser arrastado para a frame 18.

19. Criemos keyframes sobre as frames 22, das layers de Sobre e Produtos. Para tal, deveremos clicar sobre a frame 22, e pressionar a tecla de F6.

20. Desta vez sobre as 3 layers de Contactos, Sobre e Produtos, vamos inserir keyframes sobre as frames 26 de cada uma delas.

21. Como feito num passo anterior, vamos seleccionar as 3 layers na frame 26, e vamos colocar o valor de Alpha a 0%.

22. Ainda com as 3 layers seleccionadas, vamos puxar para a esquerda, através da tecla de direcção umas 20 vezes.

23. Seleccionando as frames 22 de cada uma das layers vamos criar um efeito de Motion Tweening como já foi explicado anteriormente.

24. Vamos seleccionar desde a frame 22 até à frame 26 da Layer de Contactos e de seguida arrasta-la de maneira a que tenha o seu inicio na frame 26 e termine na frame 30. De igual forma deverá ser feito o mesmo para o efeito da frame 26, da layer de Sobre.

25. Pressionando a tecla de F6 sobre a frame 22 da layer de Menu Principal, vamos criar uma Keyframe.

26. Vamos clicar sobre a frame 1 da mesma layer e clicar 1 vez sobre o nosso botão previamente criado.

27. Cliquemos sobre a frame 26 da mesma layer, e vamos com o botão direito do rato, seleccionar a sub-opção de Actions. Nela vamos inserir no painel de Actions, o seguinte código:


on (rollover) {
gotoAndPlay(“over”);
}

28. Sobre a layer Botao Invisivel, deveremos criar uma keyframe na frame 22.

29. Criamos então de seguida, um rectângulo no total da stage, menos na área do menu. Deveremos ter em atenção que há a necessidade de criar uma área em que o rectângulo não deverá abranger, de forma a que o menu funcione. Para tal após ter sido desenhado o rectângulo na nossa stage, deveremos com a borracha apagar a área que queremos. Poderemos ver na ilustração seguinte o que pretendemos.

30. Com o rectângulo que acabamos de criar seleccionado, vamos converte-lo em botão, pressionando a tecla de F8. Poderemos dar o nome de Rectangulo Botao.

31. Após termos convertido para botão o rectângulo, vamos dar um duplo clique sobre o mesmo. Deveremos então, arrastar a keyframe, do local de UP, para o local de HIT.

32. Cliquem sobre o botão de Scene 1 ou sobre a seta azul, para podermos regressar ao BotaoPrincipal.

33. Seleccionem o Botao Invisivel que acabaram de criar, e vamos inserir-lhe o seguinte código, no painel das Actions.

on (rollover) {
play();
}

34. Para finalizar vamos adicionar somente mais um linha de código. Na frame 34, vamos adicionar no painel de Actions da layer Actions.

gotoAndStop(“Normal”);

 

Esperamos que este trabalho vos tenha sido de alguma ajuda para os vossos trabalhos futuros. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.

Bons trabalhos!
Pedro Teixeira
pedro.teixeira@flashwebtraining.com

 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados