Convertir un Bitmap en botonera con Actionscript

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.

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