Mapa do Brasil vetorial - Link pra página de cada estado

Por favor, LEIA o post antes de enviar perguntas. O actionscript abaixo deve ser COPIADO E COLADO no fla.

O Victor Costa do Design Labs postou há algum tempo o Mapa do Brasil vetorial (link direto pro arquivo) que tivemos que desenvolver para um dos nossos trabalhos, o Site do IEL (veja funcionando nesta página).

Para usar o flash com as mesmas cores, só trocando os links, você pode copiar o swf e mudar as urls na chamada ao <object> no html - veja o segundo trecho de código deste post para entender melhor. O fla aberto está disponível no post do Victor.

Na versão final incluímos ainda um textfield que exibe a sigla do estado em que o usuário está passando o mouse. Você pode baixar a versão disponível no Design Labs, copiar e colar o código. Segue abaixo o actionscript que inserimos no fla:

this.createTextField("siglaEstado",10,230,10,100,25);
var my_fmt:TextFormat = new TextFormat();
my_fmt.color = 0x20428E;
my_fmt.font = "Verdana";
my_fmt.size = 18;
my_fmt.bold = true;
my_fmt.italic = true;
var siglaEstado:TextField;
siglaEstado.antiAliasType = "normal";
siglaEstado.setNewTextFormat(my_fmt);
function selecaoestados (estado:MovieClip) {
    estado._alpha = 0;
    estado.onRollOver = function () {
        for (var i:Number = 0; i < _level0.siglas.length; i++) {
            if (eval(siglas[i]+'mv') != estado) {
                eval(siglas[i]+'mv')._alpha = 0;
            }
        }
        siglaEstado.text = estado._name.substr(0, 2);
        onEnterFrame = function () {
            estado._alpha += 10;
            if (estado._alpha > 100) {
                onEnterFrame = function(){ null};
            }
        }
    }
    
    estado.onRollOut = function () {
        siglaEstado.text = '';
        onEnterFrame = function () {
            estado._alpha -= 10;
            if (estado._alpha < 0) {
                onEnterFrame = function(){ null};
            }    
        }
    }
    estado.onRelease = function (): Void{
        getURL(eval(estado._name.substr(0, 2)));
    }
}
//chamada função
var siglas:Array = ['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'GO', 'ES', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SP', 'SC', 'SE', 'TO'];
for (var i:Number = 0; i < siglas.length; i++) {
    selecaoestados(eval(siglas[i]+'mv'));
}

E aqui a chamada para o swf:

<!--[if !IE]> -->
    <object type="application/x-shockwave-flash" data="endereco/para/o/flash/Mapa.swf" width="280" height="280">
<!-- <![endif]-->
<!--[if IE]>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="280" height="280">
         <param name="movie" value="endereco/para/o/flash/Mapa.swf" />
<!--><!---->
          <param name="wmode" value="transparent" />
         <param name="FlashVars" value="AC=paginaAC.html&amp;AL=paginaAL.html&amp;AP=etc..."/>
         <p>Atualize seu navegador para visualizar corretamente o mapa.</p>
    </object>
<!-- <![endif]-->

Qualquer dúvida que ainda não esteja esclarecida no post você pode falar comigo pela página de contato, pelos comentários ou pelo twitter. Abraços a todos!

Submarino.com.br

Comentários

Anônimo em 06/10/2010 às 15:00

show de bola!

Anônimo em 05/11/2010 às 11:40

Olá.

Primeiro gostaria de parabeniza-lo por disponibilizar seu trabalho, vai me poupar um bom tempo!

Baixei o .fla alterei as cores que preciso, fiz a chama no html conforme seu post orientou, mais os links não funcionam. O mapa abre mais quando click nos estados não acontece nada.

Por favor, se possivel me oriente melhor como funciona os links.

Desde ja grato!

Anônimo em 07/04/2011 às 16:04

Olá,

Cara adorei o mapa, mas estou com um problema.

como faço pra redirecionar os links quando clica no estado?

Desde já agradeço

Vlw

Elia em 07/04/2011 às 16:11

Definindo os valores na tag que chama o flash, como está descrito acima.

Abs!

Anônimo em 03/06/2011 às 16:30

É que eu gostei muito do mapa, mas não conseguir colocar no blog, vc poderia me ajudar, DESDE JÁ AGRADEÇO A ATENÇÃO.

Anônimo em 03/06/2011 às 16:31

É que gostei muito do mapa, show de bola, mas não conseguir colocar no blog, vc poderia me ajudar, desde já agradeço a atenção.

Anônimo em 03/06/2011 às 16:33

é que gostei muito do mapa, mas não conseguir colocar no blog, vc pode me ajudar, desde já agradeço a atenção.

Anônimo em 03/06/2011 às 16:34

EXCELENTE.

Anônimo em 03/06/2011 às 16:35

EXCELENTE.

Elia em 03/06/2011 às 22:38

Oi, posso ajudar sim, só entrar em contato pelo formulário do site. Abs!

Anônimo em 06/08/2011 às 15:20

Valew mano, me ajudou bastante, parabens pelo post

Anônimo em 17/08/2011 às 22:13

Cara, adorei o mapa! Sensacional

Não sou expert em flash, mas esse mapa vai me ajudar muito em um projeto de logística.

Dúvida: Baixei o fla, agora quero inserir o código do textfield que exibe a sigla do estado (em que tela colar o código mencionado no post?) Qual o caminho?

Quero também mudar as URLs de acordo com o estado.

Por favor me ajude!!!

Usando o Adobe Flash CS4

Grato,

Anthony

Elia em 17/08/2011 às 22:27

é preciso colocar o código mencionado numa layer com os actionscripts. Pra mudar as urls de acordo com o estado basta informar os endereços na chamada do flash, como está no final do post.

Abs,
Elia.

Anônimo em 17/08/2011 às 23:50

Ok, consegui inserir o código textfield com as siglas do estado, funcionou!
Agora a chamada do flash com as URLs tenho que colar esse código numa layer com os actionscripts também?

Dúvida: No código da chamada do flash mencionado no post, tem apenas duas vezes ou tres vezes o campo , para colocar os endereços, como vou alterar as URLs de todos os estados? E como vou saber o estado que estou inserindo a URL?

Desculpe a ignorância no flash

Elia em 18/08/2011 às 12:59

O código da chamada do flash é um html e não deve ir no flash não. Ele só configura a chamada do swf lá na página onde ele vai aparecer.

A chamada do flash no post é só um exemplo, basta inserir as siglas dos outros estados e seus respectivos endereços como eu fiz nos dois ou três primeiros.

Abs,
Elia.

Anônimo em 19/08/2011 às 21:42

Ok!

Agora só uma última questão: Ao invés de inserir as URLs de acordo com o estado, e se eu quiser que abra um ToolTip (caixa de texto) com um texto que eu colocar de acordo com o estado. Isso é possível?

Exemplo: quando passar o mouse em cima de São Paulo: Quero que apareça a mensagem (Braspress, contato: Rafael) e assim com cada estado.

Sabe aonde posso conseguir esse código?
Vc pode me ajudar?

Só falta isso, para finalizar o meu projeto de logística.

Desde já agradeço pela atenção.

Abs,
Anthony

Elia em 22/08/2011 às 09:24

Oi Anthony,

Você teria que criar um outro textfield, um xml com as mensagens que você quer que apareça e integrar as duas coisas mudando bastante esse actionscript que está aí. Infelizmente seria MUITA coisa pra eu te passar por aqui ou por e-mail.

Comece, tendo alguma dúvida me manda um email pelo formulário de contato do site.

Abs,
Elia.

Anthony em 17/08/2011 às 22:29

Cara, espetacular!

Dúvida: Baixei o fla, agora preciso saber como colar o código do textfield com a sigla dos estados. (Em que tela colar esse código? Qual o caminho?)

Quero saber também em que tela mudar as URLs de acordo com o estado.

Grato,

Anthony

Anônimo em 23/10/2011 às 03:28

MUITOOOO BOMMMMM O MAPA!!!

achei perfeito, porém não está abrindo no Internet Explore, pode me ajudar?

Segue o Link:

http://mundialatacadista.com.br.cpweb0019.servidorwebfacil.com/unidades

Anônimo em 21/12/2011 às 15:58

Muito obrigada pelo mapa.
Fiz todo procedimento correto, só não estou conseguindo linkar os estados.
Coloquei o codigo de chamada no html, mas estou tento dúvida ao colocar o endereço a ser linkado. Tem que terminar em .html&amp?

Elia em 21/12/2011 às 16:24

Não, o último deve terminar só com ".html". Lembrando que (1) entre os estados tem que ter o "&" (com ponto e vírgula no final) e (2) não é necessário incluir o domínio.

Anônimo em 19/01/2012 às 17:24

Obrigada pela informação, mas ainda não estou conseguindo linkar os estados.
O meu html de chamada está assim:

-->

Atualize seu navegador para visualizar corretamente o mapa.

O que posso estar fazendo de errado?
Desculpe o incômodo.
Desde já agradeço sua atenção!

Christiana

Elia em 23/01/2012 às 07:30

Oi Christiana, pelo link vi que vc conseguiu resolver o seu problema, certo?

Comentar

(Não será exibido ao público)
Image CAPTCHA
Enter the characters shown in the image.
  • Endereços de páginas de internet e emails viram links automaticamente.
  • Tags HTML permitidas: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Quebras de linhas e parágrafos são feitos automaticamente.