Mapa Interactivo Animado

Desarrollar un mapa interactivo en formato responsive utilizando Adobe Animate o Tumult Hype, que permita la visualización de información contextual sobre un mapa estático. La interacción será a través de clics y hovers sobre iconos específicos del mapa.
Requerimientos

1. Diseño Base

• Imagen de fondo: El mapa en alta resolución será proporcionado en formato Figma y servirá como base estática.
• Responsive Design: El mapa debe adaptarse correctamente a dispositivos móviles, tablets y computadoras de escritorio.
• Integración Web: El producto final se integrará en una web de WordPress mediante un embed en formato iframe.

2. Funcionalidades Interactivas

• Iconos en el Mapa: Colocación de iconos en puntos clave del mapa. Cada icono representará una ubicación o área de interés.
• Interacciones:
• Hover o Click en el Icono: Al pasar el mouse sobre el icono o hacer clic en él, ocurrirá una animación que resalta el área correspondiente del mapa.
• Animación de Línea: Se mostrará una línea que conecta el icono con el área resaltada del mapa.
• Información Adicional: Junto con la animación, se desplegará un cuadro de información con texto y una imagen que describe el área resaltada.

3. Animaciones

Se contemplan dos tipos de animación para la línea de conexión, que deberán ser presupuestados por separado:

• Opción 1: Animación Simple en Fade
La línea de conexión aparecerá en el mapa mediante un efecto de fade-in sencillo.
• Opción 2: Animación con Crecimiento
La línea crecerá de forma progresiva desde el icono hasta el área del mapa, creando una animación más dinámica.

4. Versiones del Mapa

Cada tipo de animación (fade y crecimiento) deberá ser presupuestado en dos versiones de funcionalidad:

• Versión Completa: Incluye la animación y la interactividad para los 7 puntos del mapa.
• Versión Demo: Solo 3 puntos del mapa estarán activos con la animación e interactividad, para su uso como demo.