Mostrando legendas num mapa com Flash

 

Vamos neste tutorial vetorizar um mapa do Brasil por regiões e fazer com que quando o mouse passar por cima de uma determinada região, seja exibida uma descrição daquela região, neste exemplo vou mostrar a lista dos estados de cada região.

 

1. Copie a imagem abaixo para seu micro.

 

 

2. Abra o Flash e crie um novo arquivo com 550 pixels de largura e 400 pixels de altura.

 

3. Importe o arquivo do mapa para o palco e centralize-o no palco.

 

4. Agora vamos vetorizar o mapa. Selecione o mapa e clique em Modify/Bitmap/trace bitmap.

 

 

5. Na caixa de diálogo que se segue, aceite os valores padrão clicando em OK.

 

 

6. Dê alguns cliques no mapa para testar, você irá perceber que o mapa ficou com a aparência de um desenho feito no próprio Flash, ele se transformou numa Forma.

 

7. Agora devemos transformar cada região num único Movie clip, vamos usar a região Sudeste como exemplo, clique no Rio de Janeiro, pressione a tecla SHIFT e vá clique em São Paulo, Minas Gerais e Espírito Santo. Quando você tiver os quatro estados selecionados, pressione a tecla F8 e converta em símbolo gráfico.

 

 

8. Repita o processo para as quatro outras regiões, até que tenhamos 5 Movie clips.

 

9. Dê um clique na região Sudeste, que agora é um único movie clip e dê o nome de “sudeste” a instância.

 

 

10. Dê o nome da região a cada um dos outros movie clips (nordeste, centro, norte e sul).

 

11. Dê um clique duplo na no movie clip da região sudeste, fazendo isto você irá entrar no modo de edição do movie clip.

 

 

12. Dê um clique no primeiro quadro da linha de tempo e insira uma action stop();

 

13. Pressione F6 para criar um quadro-chave no segundo quadro e escreva ao lado da região algumas informações sobre ela, neste exemplo vou colocar o nome dos estados. Aproveite e troque as cores dos estados também.

 

 

14. Coloque uma action stop(); no segundo quadro também.

 

15. Retorne a Scene 1.

 

 

Vamos fazer a mesma coisa com as quatro outras regiões.

 

16. Clique duas vezes na região Sul para entrar no modo de edição do movie clip.

 

17. Insira uma action stop(); no primeiro quadro da linha de tempo.

 

18. Pressione F6 para criar um quadro-chave no segundo quadro.

 

19. Insira uma action stop(); no segundo quadro.

 

20. Ainda no segundo quadro, altere a cor da região e insira as informações sobre os estados.

 

 

21. Clique duas vezes na região Nordeste para entrar no modo de edição do movie clip.

 

22. Insira uma action stop(); no primeiro quadro da linha de tempo.

 

23. Pressione F6 para criar um quadro-chave no segundo quadro.

 

24. Insira uma action stop(); no segundo quadro.

 

25. Ainda no segundo quadro, altere a cor da região e insira as informações sobre os estados.

 

26. Retorne a Scene 1.

 

 

27. Clique duas vezes na região Norte para entrar no modo de edição do movie clip.

 

28. Insira uma action stop(); no primeiro quadro da linha de tempo.

 

29. Pressione F6 para criar um quadro-chave no segundo quadro.

 

30. Insira uma action stop(); no segundo quadro.

 

31. Ainda no segundo quadro, altere a cor da região e insira as informações sobre os estados.

 

 

32. Retorne a Scene 1.

 

33. Clique duas vezes na região Centro-oeste para entrar no modo de edição do movie clip.

 

34. Insira uma action stop(); no primeiro quadro da linha de tempo.

 

35. Pressione F6 para criar um quadro-chave no segundo quadro.

 

36. Insira uma action stop(); no segundo quadro.

 

37. Ainda no segundo quadro, altere a cor da região e insira as informações sobre os estados.

 

 

38. Retorne a Scene 1.

 

39. Dê um clique na região Sudeste e insira a action abaixo:

 

on (rollOver)

            {

            gotoAndStop(2);

            }

on (rollOut)

            {

            gotoAndStop(1);

            }

 

40.  Dê um clique na região Nordeste e insira a action abaixo:

 

on (rollOver)

            {

            gotoAndStop(2);

            }

on (rollOut)

            {

            gotoAndStop(1);

            }

 

41. Dê um clique na região Sul e insira a action abaixo:

 

on (rollOver)

            {

            gotoAndStop(2);

            }

on (rollOut)

            {

            gotoAndStop(1);

            }

 

42. Dê um clique na região Norte e insira a action abaixo:

 

on (rollOver)

            {

            gotoAndStop(2);

            }

on (rollOut)

            {

            gotoAndStop(1);

            }

 

43. Dê um clique na região Centro-oeste e insira a action abaixo:

 

on (rollOver)

            {

            gotoAndStop(2);

            }

on (rollOut)

            {

            gotoAndStop(1);

            }

 

Espero ter sido útil, respondo qualquer dúvida que me for enviada (sobre Flash, e é claro se estiver ao meu alcance).