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?

Cleiane em 12/03/2012 às 18:29

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 em 12/03/2012 às 18:44

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

Gustavo em 27/03/2012 às 14:15

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 em 27/03/2012 às 14:23

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.

Anônimo em 17/05/2012 às 20:08

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

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.