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.

Agora é possível adquirir o pacote com o swf (já com o actionscript no seu devido lugar), o fla e um pequeno manual de utilização do mapa do Brasil vetorial em flash no meu site. Tá mais barato que um lanche no McDonald’s!

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!


Não quer perder o próximo post? Cadastre seu e-mail e você receberá um aviso sempre que sair coisa nova :)

Comentários

  • http://patrimoniodanacao.blogspot.com Anônimo

    show de bola!

  • http://www.jaimedias.com.br Anônimo

    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

    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

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

      Abs!

  • http://baturiteceara.blogspot.com/ Anônimo

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

  • http://baturiteceara.blogspot.com/ Anônimo

    É 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.

  • http://baturiteceara.blogspot.com/ Anônimo

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

  • http://baturiteceara.blogspot.com/ Anônimo

    EXCELENTE.

  • http://baturiteceara.blogspot.com/ Anônimo

    EXCELENTE.

    • Elia

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

  • Anônimo

    Valew mano, me ajudou bastante, parabens pelo post

  • Anônimo

    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

      é 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

        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

          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

            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

            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

    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

  • http://mix7.com.br Anônimo

    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

  • http://www.chrisbrant.com.br/ab/index.php?option=com_content&view=article&id=53&Itemid=57 Anônimo

    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

      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.

  • http://www.chrisbrant.com.br/ab/index.php?option=com_content&view=article&id=53&Itemid=57 Anônimo

    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

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

  • http://www.projetoprimeirodemaio.com.br Cleiane

    Olá!
    Estou colocando o mapa dentro do wordpress…
    http://www.projetoprimeirodemaio.com.br/gpp-no-brasil
    O mapa aparece porém ainda nao estou conseguindo linkar os estados
    Na chamada do objeto está dessa maneira:


    O que estou fazendo de errado?
    Grata!

    • Elia

      Entre os endereços deve ter “&” e antes disso não deve haver ponto-e-vírgula.

  • Gustavo

    Muito bom o mapa! Estou encontrando um probleminha nos links.

    No HTML, fiz código da seguinte maneira:

    param name=”FlashVars” value=”AC=paginaAC.html&; AL=paginaAL.html&; AP=paginaAP.html&; AM=paginaAM.html&; BA=paginaBA.html&; CE=paginaCE.html&; DF=paginaDF.html&; ES=paginaES.html&; GO=paginaGO.html&; MA=paginaMA.html&; MT=paginaMT.html&; MS=paginaMS.html&; MG=paginaMG.html&; PA=paginaPA.html&; PB=paginaPB.html&; PR=paginaPR.html&; PE=paginaPE.html&; PI=paginaPI.html&; RJ=paginaRJ.html&; RN=paginaRN.html&; RS=paginaRS.html&; RO=paginaRO.html&; RR=paginaRR.html&; SC=paginaSC.html&; SP=paginaRO.html&; SE=paginaSE.html&; TO=paginaTO.html&;”

    Porém, dessa forma, só o Acre funciona. Você sabe explicar onde está o meu erro?

    Desde já agradeço.

    • Elia

      Oi Gustavo, você deve tomar cuidado com a separação entre um estado e outro.

      No lugar de “AC=paginaAC.html&amp; AL=paginaAL.html” você deve formatar o código de modo que fique AC=paginaAC.html&amp;AL=paginaAL.html, sem espaço em branco e com um ponto-e-vírgula só, ok?

      Abraços.

  • http://www.renatopasquini.com Anônimo

    Onde eu devo alterar as cores do mapa? por exemplo se eu quiser mudar para vermelho?

  • Anônimo

    tchê, vc deu uma mão enorme com este array!!! valeu!!!

  • Anônimo

    O meu não mudou nada :(, eu quero linkar os estados, fiz tudo direito, mas quando vou clicar ele manda pro …/undefined, oque eu faço?

  • Anônimo

    Olá, estou com o mesmo problema que algumas pessoas encontraram. Segui tudo direitinho e quando vou clicar nos estados o link cai no …/undefined. O que será isso? Você poderia ajudar? Muito obrigada!

    • Elia

      Mande um link de onde está publicado o mapa que tento ajudar ok?

  • Destronoyzer

    Olá, parabéns pelo site e pelo tutorial, já procurava isso a muito tempo, mas estou com um pequeno problema.

    Estou utilizando o seguinte código:

    Eu inseri o mapa na seguinte página:
    http://testeperfuradores.freeiz.com/mapa-3

    Com esse código, o mapa é exibido corretamente no IE, Chrome e Firefox, mas ao clicar no Acre(foi o único estado que eu linkei para testar) retorna página não encontrada para o Chrome e Firefox, esta funcionando corretamente apenas no IE.
    Você saberia pq?
    Desde já agradeço a atenção.

  • http://www.grupocartafabril.com.br/institucional/vendas Anônimo

    Olá, bom dia!
    Peço sua ajuda para conseguir entender/resolver um problema.
    http://www.grupocartafabril.com.br/institucional/vendas
    Fiz o mapa para o site com base nos seus dados, porém, hoje, quando fiz atualização e exportei notei que o mapa (nos Estados de MG e SP) aparecem com uma caixa branca no nomes atribuídos ao determinado mapinha. Isso acontece na versão 10 do IE, pois na versão 9 o internet explorer responder bem.
    Pode me orientar porque isso acontece e como resolver?
    Agradeço muito.
    Att,
    Evellin.