Cyberexplorador's Blog

Tutorial: Como hacer un mapa interactivo en Flash

diciembre 4, 2009 a las 10:45 am | Publicado en Flash, Programacion | 78 comentarios
Etiquetas: Flash, interactivo, mapa, tutorial

En esta ocasión haré un tutorial donde aprenderemos a hacer un mapa interactivo usando Flash.

En la universidad nos enviaron a hacer un mapa así en Flash, y la verdad nunca antes había hecho algo así. Después de buscar en Google algún tutorial en español, vi que no había suficiente información al respecto. Fue entonces que hice una búsqueda en inglés, puse en Google algo como «how to create an interactive map with flash» o «how to make an interactive map with flash». Así conseguí dos páginas muy interesantes. Una de esas me sirvió para hacer el mapa y lo explicaré aquí. El otro me puede servir algún otro momento. Aunque ambos tutoriales son en inglés, están muy fáciles de entender, y si no lo entiendes puedes usar el traductor de Google.

Las páginas son:

• http://www.republicofcode.com/tutorials/flash/interactive_map/ (las indicaciones de esta página serán usadas en este tutorial)
• http://flashexplained.com/design/making-an-interactive-country-map/

Bueno ahora si pongamos manos a la obra. La herramienta que vamos a necesitar será Flash. En mi caso uso Macromedia Flash 8 (ahora de la Adobe). Con la versión CS3 y CS4 debe ser igual.

En este tutorial haremos un mapa interactivo del Ecuador. Ecuador tiene 24 provincias, en este ejemplo usaremos solo 2. El proceso con cada provincia es similar. En la Universidad hicimos un mapa de las provincias de Ecuador, pero como son 24 sería muy extenso explicarlo aquí.

Creando el mapa

1. Primero debemos conseguirnos un mapa el cual usaremos para el trabajo. Yo usaré este mapa:

2. Dentro del programa Flash nos vamos a Archivo -> Importar -> Importar a biblioteca y seleccionamos la imagen del mapa a usar.

3. Cambiamos las dimensiones del escenario de acuerdo a las dimensiones del mapa. En este caso las dimensiones son 700 x 492 pixeles. Como se muestra en la siguiente figura:

4. Arrastramos la imagen desde la Biblioteca al escenario y mientras está seleccionada la imagen en el panel de propiedades en posición X y posición Y escribimos el cero.

5. Cambiamos el nombre de la capa a «Fondo» (sin comillas, para cambiar el nombre damos doble clic sobre Capa 1) y la bloqueamos:

6. Ahora agregamos otra capa en Insertar -> Línea de tiempo -> Capa y la nombramos Mapa.

7. Escogemos la herramienta Pincel del panel de herramientas o presionamos la tecla B. Escogemos el tamaño del pincel que aparece en segundo lugar y el tipo circular y escogemos un color como se muestra en la siguiente figura:

7. Una vez seleccionada la herramienta pincel procedemos a pintar las provincias de la cual mostraremos algún tipo de información. En este caso solo serán dos provincias. Entonces siguiendo el mapa de fondo dibujamos de nuevo las provincias con el pincel, es decir, vamos a dibujar los botones del mapa interactivo:

En la imagen como pueden ver dibujé con el pincel dos provincias y luego usando la herramienta Cubo de pintura con el color #FFCC00 pinté sobre las provincias que acabé de dibujar.

8. Ahora damos clic en cualquier lugar fuera del escenario para asegurarnos que nada esté seleccionado. Luego seleccionamos con la herramienta Selección cualquiera de las provincias que hemos dibujado. Y mientras está seleccionada presionamos F8 para convertir en símbolo (también ésta opción está en Modificar -> Convertir en símbolo). En las opciones que aparecen le ponemos un nombre cualquiera  y en tipo escogemos la opción Botón.

Luego hacemos lo mismo con la otra provincia pero le ponemos otro nombre, en mi caso le pondré Guayas.

9. Ahora le pondremos un nombre a la instancia del botón. Para ello seleccionamos la provincia dándole un solo clic y en el panel de propiedades le ponemos un nombre, en este caso será pichincha_btn el primer botón y guayas_btn el segundo botón como se muestra en la siguiente imagen:

10. Damos doble clic en cualquiera de los botones (provincias) que tenemos para entrar en la opción del botón. Ahí tenemos cuatro opciones:

• Reposo: Es cuando el botón aparece en la pantalla.
• Sobre: Es cuando el puntero está sobre el botón.
• Presionado: Es cuando se da clic sobre el botón pero sin soltar el clic.
• Zona activa: Es el área del botón.

Lo que debemos hacer es dar clic sobre la opción Sobre y presionar 3 veces F6. De esta forma estamos creando fotogramas clave en la opción Reposo (que ya es fotograma clave por defecto), Sobre, Presionado y Zona Activa. Nos queda de esta manera:

11. Ahora damos clic sobre la opción Sobre y seleccionamos la provincia que creamos y en el panel de propiedades escogemos otro color:

Se debe hacer lo mismo con cada provincia. Lo que estamos haciendo es que la provincia cambie de color cuando el puntero pase por encima de la provincia. Se puede probar la aplicación presionado Ctrl + Enter.

Se puede hacer lo mismo en la opción Presionado (cambiar el color).

Una vez terminados estos pasos bloqueamos la capa.

12. Creamos otra capa y la nombramos Marker. Con esa capa seleccionada importamos al escenario la siguiente imagen:

Aceptamos tal cual aparecen las opciones. Ubicamos esta imagen fuera del escenario como se muestra en la siguiente figura:

13.  Damos clic en cualquier parte fuera del escenario para asegurarnos que nada está seleccionado. Luego seleccionamos la imagen que acabamos de insertar y presionamos F8 para convertirlo en símbolo.

En el cuadro que aparece le ponemos el nombre myMarker y en tipo escogemos Clip de película como se muestra en la siguiente imagen.

14. Damos doble clic en la imagen del marker para entrar al clip de película. Ahí encontramos la imagen del marker y un símbolo de más en el centro de la figura:

Lo que debemos hacer es seleccionar la figura del marker y moverlo hasta que el símbolo del + aparezca en la punta inferior de la figura, como se muestra a continuación:

15. Estando dentro del marker renombramos la Capa1 y la llamamos Marker y añadimos otra capa adicional llamada Cities:

16. Seleccionamos el Fotograma 1 de la capa Cities y presionamos F9 para entrar al panel de Acciones, ahí escribimos el código:

stop();

17.  Ahora seleccionamos el fotograma 1 de la capa Marker y presionamos F5 (estamos solo agregando un fotograma, no un fotograma clave) el número de veces que tengamos botones o en este caso provincias. Para este ejemplo, tengo dos provincias, por lo tanto presionaré F5 dos veces.

18. Damos clic en el fotograma 2 de la capa Cities y presionamos F6 para crear un fotograma clave. Y hacemos el mismo procedimiento en el fotograma 3 de la capa Cities y tenemos algo así:

Antes de avanzar para este ejemplo voy a usar las siguientes imágenes:

19. Damos clic en el fotograma 2 de la capa Cities. Nos vamos a Archivo -> Importar -> Importar a escenario y escogemos la imagen pichincha.jpg que está arriba. En el mensaje que aparece escogemos «No reemplazar elementos ya existentes». Si la imagen no aparece con las dimensiones que es, la seleccionamos y en propiedades ponemos en ancho 150 y  en alto 100. Ubicamos la imagen sobre la imagen marker. Luego con la herramienta Texto (letra T) escribimos la palabra Pichincha y la ponemos bajo la imagen.

Nos debe quedar algo como esto:

Cuando escribimos la palabra Pichincha seleccionamos el texto y en el panel de propiedades debemos asegurarnos que no esté habilitada la opción «Seleccionable»:

20. Ahora seleccionamos el mismo fotograma 2 de la capa Cities y en el panel de propiedades le ponemos el nombre «pichincha» (sin comillas).

21. Ahora repetimos los pasos 19 y 20 en el fotograma 3 de la capa Cities, pero usamos la imagen guayas.jpg el texto será Guayas y el nombre del fotograma 3 es guayas:

No olvidemos guardar el documento. Ahora bloqueamos ambas capas y volvemos al escenario principal dando clic en Escena 1.

Estando en el escenario seleccionamos la figura marker y en el panel de propiedades el ponemos el nombre marker_mc:

22. Creamos una nueva capa llamada Actions (no olvidemos que ya estamos en el escenario principal, es decir, fuera de la imagen marker). Damos clic en el fotograma 1 de la capa Actions y presionamos F9. Ahí vamos a ingresar el siguiente código que saqué de una de las páginas web que puse  anteriormente:

stop();
import mx.transitions.Tween;
import mx.transitions.easing.*;

var cities:Array = [«pichincha», «guayas»]

function mover (targetX, targetY){
currentX = marker_mc._x;
currentY = marker_mc._y;
var xTween:Tween = new Tween(marker_mc, «_x»,
Strong.easeOut, currentX, targetX, .5, true);
var yTween:Tween = new Tween(marker_mc, «_y»,
Back.easeOut, currentY, targetY, 1.5, true);
}

for (var i = 0; i<cities.length; i++){
var my_btn = this[cities[i]+»_btn»];
my_btn.myCity = cities[i];
my_btn.onRollOver = function() {
mover( this._x, this._y);
marker_mc.gotoAndStop(this.myCity);
}

my_btn.onRollOut = function() {
mover( 0, 0);
marker_mc.gotoAndStop(this.myCity);
}
}

Dentro de la variable var cities:Array = [«pichincha», «guayas»] debemos agregar los nombre de cada botón que hemos creado (cada provincia que dibujamos con el pincel es un botón). El nombre pichincha ES EL MISMO NOMBRE QUE TIENE EL FOTOGRAMA 1 DE LA CAPA CITIES DE MARKER QUE HICIMOS ANTERIORMENTE. Debe ser el mismo nombre. Además recordemos que pusimos al botón el nombre pichincha_btn, pichincha antes del btn debe ser igual al nombre del array también.

Con este código estamos dando el efecto para que el marker se aparezca sobre la provincia cuando el puntero esté encima, y cuando quitemos el puntero el marker regresa a la posición X=0 y Y=0.

Guardamos el documento y presi0namos Ctrl + Enter. Ahora cuando pongamos el puntero sobre una provincia nos debe aparecer la imagen:

Agregando contenido al mapa

Ahora vamos a la segunda parte de este tutorial. Vamos a hacer que al dar clic en la provincia aparezca un menú, y según donde demos clic nos muestre cierta información.

Vamos a bloquear las capas Fondo, Mapa, Marker y Actions dando clic en el candado en la capa correspondiente.

23. Estando en la Escena 1 vamos a crear una nueva capa llamada «stop» (sin comillas). Nos ubicamos en el fotograma 1 y presionamos F6 dos veces (porque tenemos solo dos botones o provincias).

24. Damos clic en el fotograma 1 de la capa stop y presionamos F9 y escribimos el código:

stop();

Y repetimos el mismo paso en los fotogramas 2 y 3 de la capa stop. Uva vez finalizado bloqueamos la capa stop. Recordemos que podemos agregar código ActionScript a una capa aunque esté bloqueada. No olvidemos desbloquear una capa si necesitamos modificar algo en ella.

25. Creamos una nueva capa llamada «Contenido» (sin comillas). Damos clic en el fotograma 1 de la capa Contenido y presionamos F6 dos veces (porque tenemos dos provincias).

26. Seleccionamos el fotograma 1 de la capa Contenido y le ponemos el nombre de instancia «Inicio» (sin comillas), repetimos el procedimiento con el fotograma 2 pero le llamamos «cont_pichincha» y al fotograma 3 le llamamos «cont_guayas» (ambos sin comillas).

Tenemos algo así:

27. Damos clic en el fotograma 2 de la capa Contenido (es decir, en el fotograma llamado cont_pichincha). Escogemos la herramienta Rectángulo escogemos un color de fondo blanco y sin línea de borde. y dibujamos un rectángulo que cubra todo el escenario (no importa que se salga de los límites).

28. Una vez dibujado tenemos un escenario blanco, ahora seleccionamos el rectángulo que acabamos de dibujar y vamos al panel de Mezclador de colores (si no aparece vamos al menú Ventana -> Mezclador de colores) damos clic en el botón color de relleno  y en la opción Alfa escogemos 92%:

29. Dentro del rectángulo escribimos el texto Pichincha o cualquier otra cosa que queramos mostrar. Recordemos que estamos en el fotograma 2 de la capa Contenido.

Luego repetimos el procedimiento para el fotograma 3 de la capa Contenido, es decir, cont_guayas.

A partir de aquí explicaré los ejemplos solo para la provincia de Pichincha. Se debe hacer lo mismo para cada provincia o botón que tenga nuestro mapa interactivo.

Una vez tengamos el texto que queramos mostrar en cada capa de cada provincia bloqueamos la capa. En mi caso me quedó así:

30. Ahora creamos otra capa que se llamará «Volver» (sin comillas). Y damos clic en el fotograma 2 de la capa Volver y presionamos F6 una sola vez. En esta capa lo que vamos a hacer es que aparezca la palabra Volver, para regresar a la pantalla principal. Obviamente este texto debe aparecer únicamente desde el fotograma 2, ya que el 1 es a donde queremos volver. Así que si tenemos en la capa contenido 24 fotogramas de las 24 provincias del Ecuador, basta con poner el fotograma clave en el fotograma 2 de la capa Volver y no en cada fotograma. Para entender mejor haz la prueba con este ejercicio. Tenemos el fotograma cont_pichincha y cont_guayas, con solo poner el fotograma clave en el fotograma 2 de la capa volver aparecerá el texto en todos los fotogramas de la capa Contenido desde el fotograma 2 en adelante.

31. Damos clic en el fotograma 2 de la capa Volver y escogemos la herramienta de texto y escribimos la palabra Volver en cualquier parte del rectángulo que dibujamos anteriormente.

32. Seleccionamos el texto que acabamos de escribir y presionamos F8 para convertirlo en símbolo. Le ponemos el nombre volver_btn y en tipo escogemos Botón:

33. Damos doble clic al texto volver para entrar en las opciones de botón. Damos clic en la opción Sobre y presionamos F6 tres veces.

34. Damos clic en Sobre, seleccionamos el texto y lo cambiamos de color.

35. Damos clic en Zona activa y escogemos la herramienta Rectángulo, escogemos cualquier color de fondo y dibujamos un rectángulo que cubra la palabra Volver (así el usuario podrá dar clic sobre el rectángulo que dibujamos y no necesariamente sobre la palabra Volver, además tomemos en cuenta que el rectángulo será invisible, por eso no importa el color que escojamos).

Volvemos a Escena 1 y bloqueamos la capa Volver.

36. Creamos otra capa llamada Menu_botones.  Vamos al fotograma 1 de la capa Menu_botones y presionamos F6 una vez.

37. Damos clic en el fotograma 2 de la capa Menu_botones y escogemos la herramienta Rectángulo y dibujamos un rectángulo de 160 x 35 pixeles con cualquier color y lo ubicamos a la izquierda del escenario. Mientras esté seleccionado el rectángulo nos vamos al panel Mezclador de colores y en tipo escogemos Lineal. El color de la izquierda le ponemos #FFCC00 y el de la derecha le ponemos #000000 (blanco).

38. Seleccionamos el rectángulo y presionamos F8. Le ponemos el nombre menu_btn y el tipo Botón.

39. Damos doble clic el rectángulo para ingresar a las propiedades del botón. Damos clic en Sobre y presionamos F6 tres veces.

40. Damos clic de nuevo en Sobre seleccionamos el rectángulo y vamos al menú Modificar -> Transformar -> Voltear Horizontalmente. Luego regresamos a Escena 1.

41. En la Biblioteca (Ventana -> Biblioteca) nos aparece el símbolo que acabamos de crear, lo seleccionamos y lo arrastramos al escenario. Así tenemos dos botones. Escogemos la herramienta de Texto y escribimos sobre cada rectángulo cualquier texto. En mi caso voy a poner «Menú 1» y «Menú 2».  Este texto también tiene que tener deshabilitada la opción Seleccionable. Tenemos algo así:

41. Ahora que ya tenemos el menú damos clic en el fotograma 3 de la capa Menu_botones y presionamos F6 para que el menú se copie en esa capa.

Antes de asignar los eventos a los botones vamos a agregar un poco de código ActionScript.

42. Vamos a la capa Contenido y hacemos clic en el fotograma 2 (en nuestro caso el fotograma que se llama cont_pichincha) y presionamos la tecla F9 y agregamos el siguiente código:

marker_mc._visible=false
pichincha_btn.enabled=false
guayas_btn.enabled=false

De esta forma estamos haciendo invisible al marker y estamos inhabilitando las provincias (botones).

43. Repetimos el paso anterior en el fotograma 3 de la capa Contenido (cont_guayas).

44. Damos clic en el fotograma 2 de la capa Volver y seleccionamos el texto Volver que escribimos antes (primero debemos asegurarnos que la capa esté desbloqueada). Una vez SELECCIONADA la palabra Volver vamos al menú Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta:

En el cuadro de diálogo donde dice «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos Inicio (es el nombre del fotograma 1 de la capa Contenido) . Y damos clic en Aceptar.

45. Estando seleccionado el texto Volver presionamos F9 y vemos que Flash ha escrito automáticamente el siguiente código ActionScript:

on (release) {

//Movieclip GotoAndStop Behavior
this.gotoAndStop(«Inicio»);
//End Behavior

}

Después de donde dice //End Behavior agregamos el siguiente código:

//activar mapa
marker_mc._visible=true
pichincha_btn.enabled=true
guayas_btn.enabled=true

Con esto hacemos visible el marker y habilitamos los botones del mapa.

46. Ahora vamos a dar comportamientos a las provincias. Para eso desbloqueamos la capa Mapa y seleccionamos la provincia Pichincha (es la que está en la parte superior, al medio) y nos vamos al menú Ventana -> Comportamientos y seguimos los mismos pasos que antes: damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos cont_pichincha y damos clic en Aceptar.

47. Repetimos el paso anterior para la provincia del Guayas, ahí el nombre del fotograma a especificar es cont_guayas.

Guardamos el proyecto y presionamos Ctrl + Enter para probar nuestra película. Ahora al dar clic sobre una provincia se aparece el contenido de cada una de ellas.

Ahora vamos a crear las pantallas que se mostrarán al hacer clic sobre Menú 1 y Menú 2-

48. Creamos una capa capa y la nombramos «Menu 1» (sin comillas). Hacemos clic en el fotograma 2 de la capa Menu 1 y presionamos F6 y nombramos a este fotograma como «menu1_pichincha» (sin comillas).

49. Estando en ese fotograma escogemos la herramienta texto y escribimos cualquier cosa en el espacio que tenemos. En mi caso me quedó así:

En las propiedades el texto debemos asegurarnos que en tipo de línea esté multilínea:

50. Escogemos el texto que escribimos con la herramienta de selección y le ponemos el nombre de instancia «txt_pichinchainfo»:

51. Escogemos el fotograma 2 de la capa Menu 1 (el que se llama menu1_pichincha) y presionamos F9 allí escribimos el siguiente código:

txt_pichinchainfo._visible=false

Con esto estamos haciendo invisible el cuadro de texto que creamos antes.

52. Damos clic en el fotograma 3 de la capa Menu 1 y presionamos F6 para copiar el contenido del anterior fotograma. Llamamos a este fotograma «menu1_guayas» (sin comillas). Escogemos el texto que aparece y le cambiamos. Seleccionamos el texto y le ponemos como nombre de instancia «txt_guayasinfo» (sin comillas). Seleccionamos el fotograma 3 de la capa Menú 1 y presionamos F9 y agregamos el código:

txt_guayasinfo._visible=false

Hasta ahora tenemos el contenido del Menú 1. Vamos a hacer el contenido del Menú 2.

53. Creamos otra capa y le llamamos «Menu 2» (sin comillas). Luego bloqueamos y hacemos invisible la capa Menu 1, para eso hacemos clic en la imagen del candado y del ojo a lado de la capa:

54. Damos clic en el fotograma 2 de la capa Menu 2 y presionamos F6 y nombramos al fotograma como «menu2_pichincha» (sin comillas).

55. Escogemos la herramienta de texto y escribimos cualquier texto. Seleccionamos el texto con la herramienta de Selección (V) y le ponemos el nombre de instancia «txt_pichinchainfo2» (sin comillas).

56. Damos clic en el fotograma 2 de la capa Menu 2 y presionamos F9 y agregamos el siguiente código:

txt_pichinchainfo2._visible=false

57. Damos clic en el fotograma 3 de la capa Menu 2 y presionamos F6. Llamamos a este fotograma «menu2_guayas» (sin comillas). Cambiamos el contenido del texto, lo seleccionamos y lo llamamos «txt_guayasinfo2» (sin comillas). Damos clic en el fotograma 3 de la capa Menu 2 y presionamos F9, ahi escribimos el siguiente código:

txt_guayasinfo2._visible=false

Ya para finalizar vamos a llamarles a estos contenidos con los botones que creamos anteriormente. Ahora bloqueamos y hacemos invisible la capa Menu 2.

58. Vamos a la capa Menu_botones (nos aseguramos de que esté desbloqueada) y damos clic en el fotograma 2 y seleccionamos el primer botón (el que tiene el texto Menú 1, pero nos aseguramos que esté seleccionado el botón, no el texto pues son dos elementos distintos). Luego vamos a Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos «menu1_pichincha» (sin comillas) y damos clic en Aceptar.

59. Ahora seleccionamos nuevamente el botón del menú 1 y presionamos F9. Ahí aparece el siguiente código:

on (release) {

//Movieclip GotoAndStop Behavior
this.gotoAndStop(«menu1_pichincha»);
//End Behavior

}

Después de //End Behavior agregamos el siguiente código:

txt_pichinchainfo._visible=true
txt_pichinchainfo2._visible=false

Con esto hacemos visible el contenido de txt_pichinchainfo y hacemos invisible el contenido de txt_pichinchainfo2.

60. Ahora seleccionamos el botón que dice Menú 2 y seguimos los pasos anteriores: vamos a Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos «menu2_pichincha» (sin comillas) y damos clic en Aceptar.

61. Seleccionamos el botón del Menú 2 y presionamos F9 y existe el siguiente código:

on (release) {

//Movieclip GotoAndStop Behavior
this.gotoAndStop(«menu2_pichincha»);
//End Behavior

}

Después de //End Behavior escribimos el siguiente código:

txt_pichinchainfo._visible=false
txt_pichinchainfo2._visible=true

Presionamos Ctrl + Enter para probar la película. Por el momento debe funcionar la provincia de Pichincha con su respectivo menú.

Ahora le vamos a dar funciones al menú de la provincia del Guayas.

62. Damos clic en el fotograma 3 de la capa Menu_botones. Damos clic fuera del escenario para asegurarnos que nada esté seleccionado. Luego seleccionamos el botón que dice Menú 1 y seguimos los pasos anteriores: vamos a Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos «menu1_guayas» (sin comillas) y damos clic en Aceptar.

63. Seleccionamos el botón de Menú 1 y presionamos F9 y aparece el código:

on (release) {

//Movieclip GotoAndStop Behavior
this.gotoAndStop(«menu1_guayas»);
//End Behavior

}

Después de //End Behavior agregamos el código:

txt_guayasinfo._visible=true
txt_guayasinfo2._visible=false

64. Repetimos los pasos 62 y 63 pero el nombre del comportamiento será: menu2_guayas. Al presionar F9 al código existente le agregamos:

txt_guayasinfo._visible=false
txt_guayasinfo2._visible=true

Guardamos el proyecto y presionamos Ctrl + Enter para probar la película.

Y eso es todo para este tutorial. Como pueden ver hacer un mapa interactivo es de mucho trabajo, aquí expliqué solo con 2 provincias, en la universidad tocó hacer con las 24 provincias y cada una tenía un menú con tres opciones.

Espero que les guste este tutorial. No olviden dejar sus comentarios, preguntas o sugerencias.

Pueden descargar el programa completo en el siguiente enlace: http://mygnet.net/it/descargas/codigos/mapa_interactivo_hecho_en_flash.3125.zip