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&AL=paginaAL.html&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!
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&?
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