Criando um menu Pop up com o Flash

 

Conheceremos neste tutorial a maneira de se criar um menu com sub-itens, quando passarmos o mouse sobre o botão principal, aparecerão, ao lado ou abaixo os sub-itens relacionados.

 

1. Crie um novo arquivo no Flash com 300 pixels de largura por 300 pixels de altura.

 

 

2. Clique em Insert/New Symbol, marque a opção Button e dê o nome de principal ao botão.

 

 

3. Desenhe no centro da página um retângulo com 150 pixels de largura e 20 pixels de altura.

 

4. Escreva sobre o retângulo a palavra “Principal”.

 

5. Pressione F6 até o último estágio do botão (Hit).

 

 

6. Altere como quiser as cores do botão nos estágios “Over” e “Down”.

 

7. Retorne a Scene 1.

 

8. Crie outro botão com as mesmas dimensões, com a palavra “Sub-item”. Dê o nome de sub-item à este botão.

 

9. Retorne a Scene 1.

 

10. Clique em Insert/New symbol, escolha a opção Movie clip e dê o nome de menu.

 

 

11. Dentro deste Movie clip crie mais três camadas, e modifique o nome destas camadas como mostrado abaixo.

 

 

12. Clique no segundo quadro da camada “acoes” e pressione F7 para criar um quadro-chave em branco.

 

13. Insira uma action stop() em cada um dos dois quadros da camada ações.

 

14. Clique no primeiro quadro da camada “botao” e puxe da biblioteca o botão “Principal” para o centro do stage.

 

 

15. Clique no segundo quadro da camada “acoes” e pressione F6 para criar um quadro-chave. Fazemos sito para que o botão esteja presente nos dois quadros da linha de tempo.

 

16. Clique no segundo quadro da camada “menu” e pressione F7 para criar um quadro-chave em branco.

 

17. Puxe para o palco o botao sub-item 5 vezes, posicionando como mostrado na imagem abaixo (sem espaço entre os botões).

 

 

18. Clique no segundo quadro da camada “escape” e pressione F7 para criar um quadro-chave em branco.

 

19. Desenhe um retângulo em volta de TODO o menu, como mostrado abaixo.

 

 

20. Selecione este retângulo e pressione F8 para convertê-lo em botao.

 

 

21. Após converter o botão, clique duas vezes sobre ele para entrarmos no modo de edição do botão.

 

22. Este botão não deve ser visível, pois a função dele é apenas fazer o recolhimento do menu quando o mouse se afastar do menu.

 

23. Selecione o retângulo que está na fase UP do botão, recorte-o com CTRL X.

 

24. Clique na fase HIT do botão e pressione F7 para criar um quadro chave em branco.

 

25. Pressione CTRL+SHIT+V para colar o retângulo na mesma posição. Agora temos um botão invisível, que só tem área clicável.

 

26. Retorne a edição do clipe de filme, como mostrado na imagem abaixo, se por acaso você retornar a Scene 1 por acidente, use suas biblioteca para retornar a edição deste movie clip.

 

 

27. Vamos começar agora a fase de colocar as actions em cada um dos botões para fazer o menu funcionar.

 

28. Clique no primeiro quadro da camada “botao” e dê um clique no botão “Principal” que está no palco, é MUITO importante que esteja o botão selecionado e não o quadro. Para ter a certeza de que está colocando a action no lugar certo observe a imagem abaixo.

 

 

29. Pressione F9 para mostrar o painel actions  e insira a action abaixo no botão.

 

on (rollOver)

      {

      gotoAndStop(2);

      }

 

30. clique no segundo quadro da camada “botao”, e dê um clique no botão “Principal” em seu palco, e insira a action abaixo.

 

on (rollOut)

      {

      gotoAndStop(1);

      }

 

31. Clique no segundo quadro da camada menu, selecione o primeiro botão subitem e insira a action abaixo.

 

on (rollOver)

      {

      gotoAndStop(2);

      }

 

32. Insira a mesma action em TODOS os outros botões.

 

33. Clique no segundo quadro da camada “escape” e selecione o botão escape em seu palco.

 

34. Insira a action abaixo.

 

on (rollOut)

      {

      gotoAndStop(1);

      }

 

35. Retorne a Scene 1 e insira o clipe de filme no palco.

 

Teste sua aplicação. Se você notar que tirando o mouse muito rápido de cima do menu, ele não desaparece, aumente um pouco o tamanho do botão “escape”.