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

El resultado final será el siguiente:

This movie requires Flash Player 9

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:

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:

Mapa político de Ecuador (clic en la imagen para ampliar)

Mapa político del Ecuador (clic en la imagen para ampliar)

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:

Clic en la imagen para ampliar

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.

Clic en la imagen para ampliar

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:

Clic en la imagen para ampliar

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:

Clic en la imagen para ampliar

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:

Clic en la imagen para ampliar

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:

Clic en la imagen para ampliar

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:

Clic en la imagen para ampliar

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();

Clic en la imagen para ampliar

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:

Thumbnail de la provincia de Pichincha

Thumbnail de la provincia del Guayas

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”:

Clic en la imagen para ampliar

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

Clic en la imagen para ampliar

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:

Clic en la imagen para ampliar

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:

Clic en la imagen para ampliar

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í:

Clic en la imagen para ampliar

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%:

Clic en la imagen para ampliar

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í:

Clic en la imagen para ampliar.

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

Clic en la imagen para ampliar

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

Clic en la imagen para ampliar

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í:

Clic en la imagen para ampliar

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:

Clic en la imagen para ampliar

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

Clic en la imagen para ampliar

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

Clic en la imagen para ampliar

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

Clic en la imagen para ampliar

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

Clic en la imagen para ampliar

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

Clic en la imagen para ampliar

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.

Clic en la imagen para ampliar

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

83 comentarios para “Tutorial: Como hacer un mapa interactivo en Flash”

  • jesus dice:

    oye amigo, me marca error de salida en el primer paso,
    no me aparece la fotos en mini, solo cambian de color

  • P4tik0s dice:

    Es la primera vez que entro a tu trabajo, no lo he desarrollado aún, pero intuyo que debe tener buenos resultados. Una labor sacrificada y no entiendo como tiene sólo 2 comentarios…Así es la vida. Sigue adelante y presentanos otros trabajos.
    Con un saludo cordial

  • FLOR A dice:

    Hola!!!

    La info que pusiste me sirvio mucho… :) Paso a paso esta excelente a pesar de q soy principiante fue muy sencillo conseguir hacer el efecto :)

  • Sara dice:

    Muy buen tutorial, te agradezco la ayuda infinitamente, te sacaste un diez!!!!!!!

  • Arnoux dice:

    Hola, excelente tu aporte,mil gracias, estuve horas buscando informacion hasta que di con este tutorial.tengo una interrogante la figura que se usa en marker ¿de donde la sacaste o se puede utilizar cualquiera?

  • diego dice:

    hola amigo me aparece un error de sintaxis ya le puse los mismos nombres a las capas, a los botones y a las instancias tal como tu lo pusiste… pero el marker no aparace en las zonas que deberia, se queda en el margen de mi mapa reproduciendo continuamnte las fotos, ya cheque que este bien el stop pero esta como tu lo publicaste no se cual sea el error no se si me puedas ayudar saludos

  • celeidy dice:

    me da estos errores sera que me puedes ayudar es urgente

    **Error** Escena=Escena 1, capa=actions, fotograma=1:Línea 10: ActionScript no permite este tipo de comillas. Cámbielas por comillas dobles estándar (rectas).
    var xTween:Tween = new Tween(marker_mc, “_x”,

    **Error** Escena=Escena 1, capa=actions, fotograma=1:Línea 11: Se espera ‘)’ o ‘,’
    Strong.easeOut, currentX, targetX, .5, true);

    **Error** Escena=Escena 1, capa=actions, fotograma=1:Línea 12: ActionScript no permite este tipo de comillas. Cámbielas por comillas dobles estándar (rectas).
    var yTween:Tween = new Tween(marker_mc, “_y”,

    **Error** Escena=Escena 1, capa=actions, fotograma=1:Línea 13: Se espera ‘)’ o ‘,’
    Back.easeOut, currentY, targetY, 1.5, true);

    Total de errores de ActionScript: 4 Errores comunicados: 4

  • celeidy dice:

    me parece muy bueno el material pero me daban esos errores y ya los quite pero no me hace nada que puedo hacer.. si puedes escribirme a mi correo.. lo agradecere…excelente material

  • Paco Frutos dice:

    Hola,
    Lo primero, darte las gracias por el aporte. Me ha sido muy dificil encontrar un tutorial de esta calidad.
    He tenido el mismo problema que celeidy…y simplemente era que al copiar la sentencia:

    var xTween:Tween = new Tween(marker_mc, “_x”,
    Strong.easeOut, currentX, targetX, .5, true);

    …las comillas que rodean a la x (“_x”) son caracteres que no sirven en actioScript. Volviendo a escribir esas comillas, el problema se ha solucionado. Espero que sirva para los siguientes.

    Saludos y sigue así

  • nena dice:

    hola me gustraia saber como realizar un mpa virtual de red me podrias decir????????????

  • Skurg dice:

    Oigan tengo el mismo error de Paco Frutos..
    var xTween:Tween = new Tween(marker_mc, “_x”,
    Strong.easeOut, currentX, targetX, .5, true);

    denme una solucion plz

  • Mauricio dice:

    Saludos, exelente tuturial, felicitaciones… por favor tengo un problema con la imagen del Marker, ya le inserté el sìmbolo y al darle doble clic no me aparece la cruz para situarla en la punta de la flecha, ¿Què hago?

  • Rebach7 dice:

    Me marca el siguiente error:

    Número incorrecto de parámetros; gotoAndStop necesita entre 2 y 3.

    Alguien sabe por que?

  • Rebach7 dice:

    Ya lo solucioné gracias, tenía unos problemillas con los nombres, ja…

  • Rebach7 dice:

    No funcionan el archivo que dejaste para descargar.

  • ely dice:

    hola muchisimas gracias por tu aporta, pe pasarte excelente material,
    bueno yo tengo un problemita con el marker, se ejecuta el mapa sin errores pero la imagen que va en el marker no le sigue a la manito osea al vínculo y se ve muy feo no se donde estoy mal ya he repetido varias veces pero sigue igual, el marker se posesiona diagonal al lado izquierdo no se pone encima…

    • cyberexplorador dice:

      Verifica bien el paso 14.
      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. Eso es muy importante, puede ser que por eso te de el error.

  • kurupc dice:

    CAPOOOOOOO!!!!!!!!!!!!!! muchas gracias por el exelente tutorial. Seguí compartiendo tus experiencias que nos enriquece a todos.
    Un saludo desde Corrientes, Argentina.

  • Loise dice:

    PRIERO QUE TODO GRACIAS AMIGO,MUY BUEN MATERIAL ME HAS SALVADO… GRACIAS!! Oye chico tengo un problema en la primera parte ya hice todo le puse marker_mc y todo pero cuando le doy control-enter y le paso el raton en los botones solo cambian de color pero el marker no aparece me podria ayudar pis…. gracias de antemano y un enorme saludo desde mx

    • cyberexplorador dice:

      Debe haber algún error en la programación ActionScript. Verifica que estás usando ActionScript 2.0, no la versión 3.0. Seguramente ahi estás cometiendo algún error. De todos modos te puedes bajar el programa completo y verificar en qué has fallado.
      Saludos

  • Serch dice:

    Pues no he leido todos los comentarios, pero de verdad que he estado buscndo un tutorial asi, no he probado hasta donde funciona, pero de verdad que el esfuerzo que hiciste se te agradece. Sigue asi, ya que todos aprendemos de todos!!!

    Espero no dar molestias con algun paso que realice mal… GRACIAS POR EL TUTORIAL!!!

    Saludos!!!

  • maría dice:

    acabo de dar con este tutorial y aunque aún no me he puesto con él tiene muy buena pinta!!
    sólo una cosa, he intentado descargarme el archivo que facilitas y no lo he conseguido, al principio se me ha descargado dañado y en un segundo intento ya no he podido (me indica que se ha cambiado de ubicación…)
    podrías ayudarme??

    muchas gracias!!!

  • saga_virus dice:

    excelente tutorial !!
    Te lo agradesco gracias a el tutorial pude realizar un mapa completo de mi pais Mexico !!!

    en serio gracias esta excelente el tutorial !!!

  • nEjO dice:

    una consulta y si quiero que tenga link? y otra es: ¿como hago para que la imagen miniatura que sale al darl clikc en la privincia sea una “pagina nueva” dentro de el flash y tenga opcion a regresar?

  • Patricia dice:

    Hola, gracias por el tutorial, muy buen aporte.
    una pregunta, tengo un problema, cuando doy click o paso el puntero del mouse sobre cada provincia o ciudad, me aparece el cuadro del marker, pero le cuesta subir, a veces lo hace y la mayor parte del tiempo, se queda en la parte de abajo, no va de una provincia a otro, sino que se devuelve a un punto en la parte de abajo, q puede ser?
    por fa ayudame, necesito terminar hoy.
    gracias

    • cyberexplorador dice:

      Verifica que estés usando action script 2.0. Además los códigos de action script que copias de este tutorial suelen dar problemas con las comillas, debes borrarlas y escribirlas de nuevo.

  • Patricia dice:

    Gracias, ya lo solucione, tenia que borrar la sentencia de

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

    pero ahora tengo otro problema:

    Hice la segunda parte, para agregar contenido, pero cuando le doy ctrl+enter, se carga el segundo frame, es decir la primera provincia, le doy al boton volver y se regresa al mapa principal, lo que quiero decir es que no se carga el primer frame del mapa.

    Cual puede ser el error??

    Gracias

  • Federico dice:

    Hola Muchas gracias, realmente me sirvio para introducirme en Flash, este tutorial esta muy bien.

    Saludos

  • Freddy dice:

    Excelente tutorial, muy buen aporte.
    No se si me podrias ayudar a conectar con una base de datos, mas o menos que en la parte de telefonia pueda tomar informacion de una base de datos (access).
    El tutorial es de los mejores. Gracias.

  • Ana dice:

    Hola, muchisimas gracias por este tutorial!!! La verdad fue una GRAN ayuda, y mucho mejor que cualquier otro que use…
    Tengo una pregunta. Yo tengo que hacer un mapa interactivo de la Provincia de Bs As (135 municipios) y me resulta más facil hacer un municipio a la vez. Es decir, hacer todos los pasos para un municipio y recien cuando lo termine entero, arrancar con el siguiente. El problema es que cuando termino un municipio me queda en el escenario el contenido de ese municipio, tapando el mapa detrás. Como puedo hacer para volver al mapa y arrancar todos los pasos de cero?
    Desde ya muchisimas gracias!

  • María Julieta dice:

    Hola!! Muchas gracias por esta oublicación,es muy útil. A mi me salio todo vien y cuando hago la prueba puedo ir al contenido de mis provincias, pero al volver a la pagina de inicio ya no puedo hacer mas nada. que paso me falta hacfer?

  • Ruben dice:

    Muchas gracias por esto, esta super,

  • Jhon Mayorga dice:

    Gracias justo lo que andaba buscando

  • Jaime dice:

    Excelente material, pero tengo un problema, el momento que cojo el pincel para marcar la provincia no lo hace por encima sino por debajo del mapa, que puedo hacer, además todas las imágenes podemos utilizar con flash?

  • Azulita dice:

    maravilla domo arigatisimo

  • Sara dice:

    Hola, tenia tiempo busacando lugar como este, me gusto mucho, es claro y objetivo y me ha ayudado mucho porque no sabia como hacer un mapa de este tipo, estoy aprendiendo flash asi que muchas gracias …

  • paola dice:

    holaaa me intereso mucho tu tutorial pero al colocarlo en practica me presenta una serie de errores y todo lo he hecho totalmente igual en la primera parte de la realizacion cuando voy a probar si me salen las fotos … sino es mucha molestia me gustaria mucho colocarme en contacto con usted (mi correo es:yinap29@gmail.com ) para que me pueda dar algunos consejos … ya descargue su resultado final pero de igual forma me salen los errores, le agradeceria en el alma su pronta respuesta.. es casi de vida o muerte que yo realice esta actividad .. muchas gracias

  • Ramón Espino dice:

    Barbaro amigo te sacaste un 10 con tu tutorial, solo un detalle yo estoy haciendo un mapa de la republica mexicana y en mi caso son 5 estados los que no me muestran imagen ni el marker se posiciona donde deberia de ir. No se si sea el formato de las imagenes que es jpeg y jpg. Agradeceria me dijeses que puedo hacer, he seguido el tutorial paso por paso y me sigue saliendo ese error :-s

    De antemano gracias:
    Atte: Ramón Espino

  • sKuF dice:

    Muy buena info. Gracias por compartirla. Ya la voy a poner en práctica ni bien llegue a mi casa.
    Ya volveré a comentar como fue todo.

  • Alejandro E dice:

    Excelente tutorial, nunca habia tocado Flash y me salió excelente el ejemplo. Muchas gracias. Saludos desde Costa Rica.

  • Excelente tuturial. Saludo desde Cali – Colombia.

  • Excelente tutorial. Saludo desde Cali – Colombia.

  • Maria dice:

    Hola,
    Tambien darte las gracias por este magnifico aporte. Me ha sido muy util, pero desearia preguntarte si podria hacer interactuarlo con una base de datos y php, donde tendria q añadir el codigo, por q intente hacerlo dentro del marker pero no me aparece nada, pero si lo pongo fuera aparece el texto en la escena principal y una esquina, podrias ayudarme o darme algun consejo, te lo voy a agradecer.

  • Yuuko dice:

    Hola muy buen tutorial excelente lo estoy siguiendo y me parece muy completo, aun que etto… la primera parte me funciono super bien pero mi problema aparecio en la segunda parte del tutorial ya q mi boton de volver nofunciona y solo aparece lo del cuadro blanco donde restan los botones de menu… ya descargue elarchivo final q facilitas pero mi problema sigue igual no se si me puedas ayudar aun q el mio es un mapa de la republuca mexicana..

    de antemano muchisimas gracias…n_n

  • Chris Tejeda dice:

    Hola! Excelente el tuto pero me salen varios errores, ya solucioné la parte de las comillas pero me sale esto:

    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 13 1120: Acceso a una propiedad currentY no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 13 1120: Acceso a una propiedad Back no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 12 1180: Llamada a un método Tween posiblemente no definido.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 11 1120: Acceso a una propiedad currentX no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 11 1120: Acceso a una propiedad Strong no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 10 1180: Llamada a un método Tween posiblemente no definido.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 9 1120: Acceso a una propiedad currentY no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 8 1120: Acceso a una propiedad currentX no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 12 1046: No se encontró el tipo o no es una constante en tiempo de compilación: Tween.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 10 1046: No se encontró el tipo o no es una constante en tiempo de compilación: Tween.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 3 1172: No se encontró la definición mx.transitions.easing.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 2 1172: No se encontró la definición mx.transitions:Tween.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 3 1172: No se encontró la definición mx.transitions.easing.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 2 1172: No se encontró la definición mx.transitions:Tween.

    mi correo es christiantejeda@gmail.com

    no sé que esté pasando

  • Principiante :p dice:

    Muy bueno!!! era lo que estaba buscando! Muchas gracias por tan grandisimo aporte que me ha sacado de muchas dudas :) me funciona correctamente!

  • Deena Batzli dice:

    Buenas reflexiones :) te añadí a mis favoritos

  • alexis dice:

    hola buenos dias he estado buscando algo como esto y me parece excelente
    quisiera saber si en ve vez de mostrar una imagen puedo mostrar una informacion que traiga de una base de datos. gracias

  • Marissa dice:

    Hola, está perdecto tu tutorial, ya hice la 1ra parte, pero no logro que se mueva el marcador, qué estoy haciendo mal?? el codigo no me manda errores (corregí las comillas), los nombres de los fotogramas del marcador están el en array y los botones se llaman igual… gracias!!

    • cyberexplorador dice:

      El mapa está hecho en ActionScript 2.0 tal vez tú le estás programando en ActionScript 2.0, podría ser ese el error. De todos modos lo puedes descargar a ver donde cometiste el error.

  • gilo dice:

    Felicidades¡¡¡¡
    Es un excelente trabajo.

  • jan dice:

    gracias crack

  • cande dice:

    MUY BUENO!!!!!!!! Gracias miles!
    Lo hice y me ha funcionado de 10! la verdad que lo has explicado de maravilla….

  • jose dice:

    En el paso 11 al hacer click en la provincia, esta se llena de puntos y no me deja hacer doble click ¿tienen alguna soucion? por favor

  • jose dice:

    Muy buen aporte, gracias pero tengo estos fallos alguen me los podria solucionar por favor???
    **Error** Scene=Scene 1, layer=Actions, frame=1:Line 10: Unexpected ‘var’ encountered
    var xTween:Tween = new Tween(marker_mc, “_x”,

    **Error** Scene=Scene 1, layer=Actions, frame=1:Line 11: Syntax error.
    Strong.easeOut, currentX, targetX, .5, true);

    **Error** Scene=Scene 1, layer=Actions, frame=1:Line 14: Unexpected ‘}’ encountered
    }

  • Carolina dice:

    Increíble tu capacidad para hacer sencilla y didáctica una operación tan compleja. Muy agradecida, y los mejores augurios para este 2012. Saludos desde Baires!

  • Ana dice:

    Hola!!! Que buen aporte !!!
    Antes de molestarlo con esta consulta realice dos veces la primer parte del tutorial (hasta el paso 22) y leí los comentarios y respuestas..
    Cuando pruebo la pelicula (ctrl -enter) cambian de color las provincias pero no aparece el maker.. ya solucione el problema de las comillas y verifique estar usando ActionScript 2.0..
    No se que más puedo hacer!!!
    Desde ya muchas gracias por tu colaboración….
    Atentamente
    Ana.-

  • Carlos dice:

    es posible pasar esto a as3?

  • Man dice:

    Gracias, me viene guay, te hago unos clicks!!!

  • Xavier dice:

    Hola amigo, como hiciste para agregarle la barra de desplazamiento a los menú, me seria de gran ayuda, espero tu mas pronta respuesta!

  • Julia M. dice:

    Hola!
    Gracias por compartir tu experiencia, excelente trabajo… me ayudo mucho.

  • reyner dice:

    exelente tuto… gracias y esperamos que tengas algunos ejemplos mas

  • Jean Carla Rojas dice:

    no ´puedo agragar nombre a los cuadors de texto, para poder realizar lo de los menus

  • Hernan Avelar dice:

    Hola que tal? como hago que el contenido de los botones no salgo abajo del fondo blanco?

  • giovani dice:

    Muchas gracias a segui los pasos uno a uno y lo que me falta es como hago funcionar los botones no me funcionan talvez porque en el primer boton quiero mostrar una imagen como lo llamo con el boton gracias por tu ayuda

  • ANGEL MORA dice:

    Buen día.
    Tengo un mapa de México (con su división en 32 partes) y quiero hacer los primeros pasos para que cuando pase el cursor sobre cada entidad federativa los ilumine cambiandolos de color pero la cuestión es que ni siquiera puedo seleccionar cada parte ya que cuando elijo la herramienta de selección y hago lo propio me selecciona todo el mapa de méxico y no solo pa parte que elijo.
    ¿a que de deberá?
    Cabe mencionar que todo el mapa es de un solo color no se si tendrá que ver eso.
    Ayer hice un pequeño ensayo elijiendo dos entidades no contiguas y de esta manera si pude hacerlo pero yo quiero hacerlo con las 32 partes aunque sean contiguas (hoy ya no me sale nada).

  • Isamar Cabrera dice:

    !Hola! Tu tutorial me ayudo muchisímo, solo que tengo un pequeño error. El marker, ya se mueve y aparece con todo y nombre pero cuando pongo el puntero encima del boton de europa (estoy haciendo un mapamundi para una pagina web) el marker me sale por otro lado, y como apenas estoy aprendiendo flash aun no se muy bien el codigo :/

  • Pedro dice:

    Hola¡

    me salen los siguientes errores:

    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 2 1172: No se encontró la definición mx.transitions:Tween.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 3 1172: No se encontró la definición mx.transitions.easing.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 2 1172: No se encontró la definición mx.transitions:Tween.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 3 1172: No se encontró la definición mx.transitions.easing.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 10 1046: No se encontró el tipo o no es una constante en tiempo de compilación: Tween.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 12 1046: No se encontró el tipo o no es una constante en tiempo de compilación: Tween.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 8 1120: Acceso a una propiedad currentX no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 9 1120: Acceso a una propiedad currentY no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 10 1180: Llamada a un método Tween posiblemente no definido.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 11 1120: Acceso a una propiedad Strong no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 11 1120: Acceso a una propiedad currentX no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 12 1180: Llamada a un método Tween posiblemente no definido.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 13 1120: Acceso a una propiedad Back no definida.
    Escena 1, Capa ‘Actions’, Fotograma 1, Línea 13 1120: Acceso a una propiedad currentY no definida.

    Estoy trabajando con action scrip 3.0 de la versión Cs5 ¿Puede ser ese el problema?. Gracias.

  • EL Rubio dice:

    Hola,

    Tengo un mapa de españa y necesito lo mismo que hace este tutorial, pero en flash CS5, funciona todo menos el código este

    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);
    }
    }

    El error que sale es:
    ReferenceError: Error #1056: Cannot create property myCity on flash.display.SimpleButton.
    at MapaInteractivo_fla::MainTimeline/frame1()

    Me podéis ayudar.

    Muchas Gracias.

Deja un comentario

Polls

¿Qué lenguaje de programación utilizas más?

View Results

Loading ... Loading ...
Síguenos en Twitter
Cyberexplorador en Twitter
Comparte este blog
Bookmark and Share
Publicidad
Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: