Muchas veces es necesario convertir cada región de un mapa gráfico normal en un botón que efectúe las acciones que necesitamos.
El método normal es "a mano", es decir, seleccionar la región, editarla con sus bordes y convertirla en MC o botón una a una. A partir de un mapa gráfico y utilizando éste código podemos convertir, de un solo golpe, cada región en un botón de Flash.
El script necesita como entrada un mapa o imagen jpg, gif o png, con sus bordes o fronteras en negro (o escala de grises).
Es posible que tengamos que pasarlo previamente por un editor de imágenes (Photoshop o similar) para retocarlo un poco y pasarlo a 2 colores.
La imagen final la ponemos en la biblioteca de Flash y la vinculamos para AS con el nombre: mapa
También debemos decidir el color de los botones, el umbral de gris que hará de "frontera" entre zonas y el tamaño mínimo en pixeles para que un determinado área se convierta en botón.
Veamos un ejemplo:
Este es un mapa que he conseguido de la Web y de calidad tirando a baja... aún así (este no lo he editado) lo paso tal cual a la biblioteca de mi flash.
MAPA ORIGINAL:

Este es el código que pongo en Flash eligiendo y ajustando los valores como he dicho anteriormente:
Código :
import flash.geom.*; import flash.display.*; import flash.filters.*; CM = 0xFF0EBE1F;//Color de las regiones del mapa resultante. uN =0xff505050;// umbral de grises si menor no se toma el pixel. region = 50; //valor minimo en pixels de un area para considerarlo región. BF1= new BevelFilter(4,45,0xffffff,.5,0,.5,2,2,1,1,"inner",false); BF2= new BevelFilter(4,45,0,.5,0xffffff,.5,2,2,1,1,"inner",false); mapa = BitmapData.loadBitmap("mapa"); mapa.threshold(mapa, mapa.rectangle, new Point(), ">", uN, 0); mapa1 = new BitmapData(mapa.width, mapa.height) RO = mapa.getColorBoundsRect(0xff000000, 0xff000000); cont=0; mc=[]; mapa2=[]; do{RO = bucle(RO);} while (RO)// para ir disminuyendo la zona de búsqueda. function bucle(RO){ for (var j=0 ; j< RO.height ; j++){ for (var i=0; i< RO.width ; i++){ PT = new Point(RO.x+i,RO.y+j); if(mapa.getPixel32(PT.x,PT.y)==0){ mapa1.draw(mapa); mapa1.floodFill(PT.x, PT.y, CM); mapa.floodFill(PT.x, PT.y, 0x01000000); RO = mapa.getColorBoundsRect(0x01000000, 0x01000000, false); R1 = mapa1.getColorBoundsRect(CM,CM,true); mapa1.threshold(mapa1,R1, new Point(R1.x,R1.y), "!=",CM,0); R1 = mapa1.getColorBoundsRect(CM,CM,true); if (R1.width*R1.height>region){ mc[cont] = this.createEmptyMovieClip("mc"+cont, this.getNextHighestDepth()); mapa2[cont] = new BitmapData(R1.width, R1.height, true,0); mapa2[cont].copyPixels(mapa1,R1,null); mc[cont].attachBitmap(mapa2[cont],0); mc[cont].filters =[BF1]; mc[cont]._x=R1.x; mc[cont]._y=R1.y; mc[cont].num = cont; mc[cont].onRollOver = function(){ this.onMouseMove =function(){ punt = new Point(_xmouse-mc[this.num]._x, _ymouse-mc[this.num]._y); pp= mapa2[this.num].getPixel32(punt.x,punt.y); if( pp){this.filters =[BF2];this.onMouseDown = function(){botonpulsado(this.num)}} else{this.filters =[BF1]; delete this.onMouseDown;} } } cont++; return(RO); } } } } }//fin de función bucle mc[0]._visible = false;// borrando o apagando los no útiles, en este ejemplo se borrar el mar. mapa.dispose();mapa1.dispose(); // eliminar mapas no necesarios de la memoria. function botonpulsado(m){ pais = m; //numero a visualizar de la región en el ejemplo. //acciones para los botones/regiones (aconsejable select/case) y arrays //de nombres, URLs, etc... }
Y este es el resultado:
MAPA "BOTONIZADO":
Nota: El SWF está escalado para poder ponerlo aquí
Al dar click nos manda a una función donde pondremos las acciones para cada botón: Aparecer su nombre, ir a una URL, etc. yo simplemente en el ejemplo he puesto el nº de array del botón.
También es posible que cada botón tenga su color, poner otro tipo de filtros para la acción RollOver-RollOut, etc., con pequeñas variaciones o añadidos en el código.
El script está optimizado para trabajar muy rápido. Además, el resultado tiene un peso bastante menor que la imagen usada originalmente.
En resumen: cualquier dibujo separado por zonas es posible pasarlo a botonera.
En este script utilizo uno "de mi cosecha" para simular correctamente el área activa del MC.(zona no transparente.)
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por FeNtO el 07 de Junio de 2007
Por leo-mix el 08 de Junio de 2007
para variar Teseo!!!
(Excelente)
Por pabletein el 11 de Junio de 2007
esta buscando algo asi!!!!
gracias!!!
Cada día aprendiendo más.
Por HernanRivas el 11 de Junio de 2007
FeNtO :
Por adropoto el 12 de Junio de 2007
Por HernanRivas el 13 de Junio de 2007
adropoto_blog :
HernanRivas :
FeNtO :
He anhelado una desde hace un tiempo
Por Señor Oz el 13 de Junio de 2007
Por jimto el 31 de Agosto de 2007
Por Yamahalf el 11 de Noviembre de 2007
¿Alguien puede ayudarme?
Gracias.
Por medina el 16 de Enero de 2008
Por Dan el 25 de Noviembre de 2008
Por chevas el 16 de Diciembre de 2008
Por RAquel el 20 de Julio de 2011