> Manuales > Manual de Flash

Aprende a crear un mapa interactivo con Flash te damos los materiales gráficos y te enseñamos a montarlos y a programar el Action Script.

En este artículo empezamos una práctica en Flash que nos puede dar las pistas para el desarrollo de proyectos un poco más complejos, donde la interactividad con el usuario sea fundamental y donde tengamos que recurrir a la programación para solucionar algunas necesidades.

Esta práctica vendrá muy bien a las personas que están aprendiendo con del Manual de Flash publicado en DesarrolloWeb.com. Para la interactividad tendremos que utilizar algo de programación, pero no te preocupes, porque lo vamos a explicar de una manera sencilla, aunque no sepas programar.

Como es un poco larga, la he dividido por partes. A continuación podéis ver un índice.

  1. Armar el Mapa: Es el presente artículo, donde de explicaremos cómo empezar tu película.
  2. Las fichas de cada país: Varios puntos donde veremos cómo crear las fichas que aparecen al pulsar cada país.
  3. Botones para pintar: Donde te explicamos cómo hacer los botones para pintar de colores los países.
  4. Los botones de control: La última parte y más importante, cómo poner todo a funcionar en una película de Flash de un único fotograma.

Cómo es el mapa interactivo

1) – Saber exactamente, que es lo que pretendemos realizar. Para ello, nada mejor que jugar un poquito con un programa terminado: http://www.delphi.todouy.com/ASIA/ASIA.swf

Esta aplicación tiene muy poca programación, pero mucho “trabajo de pico y pala”. Horas y horas con el lenguaje de dibujo, y también en la tarea de información para las tarjetas

Y aquí no se trata de aprender sobre un lenguaje de dibujo sino de códigos en Flash. Por eso recorté el mapa original, dejando solo la península Arábiga con nueve países.

Y para que no pasen horas con el programa de dibujo y tampoco buscando banderas e información, decidí comenzar dando el material básico de imágenes y tarjetas que necesitamos, limitando esta aplicación a los países arábigos.

Les pido que acepten los nombres que elijo, porque así cuando algún código no les funcione, será más fácil encontrar el error.

2) – Crear en la computadora la carpeta arabes . Y guardar allí arabigos_1.fla que bajarán de: http://www.delphi.todouy.com/mapa/arabigos_1.fla

3) – Convertir cada imagen en Clip de película. con el comando Modificar -< Convertir en símbolo
cambia el tipo de imagen a clip, y cambia el nombre.

recorte.gif contorno
gArabiaArabia
gEmiratosEmiratos
gIraqIrak
gIsraelIsrael
gJordaniaJordania
gLibanoLíbano
gSiriaSiria
gOmanOmán
gYemenYemen

En la biblioteca creas una carpeta llamada países para guardar estos clips.

4) – Armar el mapa.
En la línea del tiempo cambiamos el nombre a la Capa por contorno.

Colocamos el contorno en x = 420, y = 100.
Y SIEMPRE, cuando de clip de película se trate no dejes de poner el nombre en el Panel de Propiedades. En el caso del contorno, el nombre no es necesario para los códigos, en cambio, si te olvidas de poner el nombre de el país, el código no funciona.

El contorno va solo en su capa. Creamos dos capas para los otros países porque es la manera de poder seleccionar a cada uno.
Indicación para poner los cuatro países que van en la capa más profunda.
Primero traemos a Arabia a X = 428.8, Y = 128 Jordania X = 444.8, Y= 134 Siria X = 463, Y = 111, Oman X = 517, Y = 236

Cuando están los cuatro países en capa país abajo, le ponemos candado, y liberamos de candado a capa país arriba para colocar los demás países.

Países X Y
Israel 444.4 122.5
Libano 458.9 116
Emiratos 517 233
Iraq 477 124.5
Yemen 440 226

Cuando tenemos el mapa armado, en mi caso lo grabo como arábigos_2.fla para que queden las etapas de este manual separadas.

Podrás continuar montando este mapa interactivo en Flash en el siguiente artículo donde veremos cómo crear las fichas de países.

Susana Ríos Suanes

Docente de Lógica.

Manual