administrador@utherverse.es

Email: soporte@uthervese.es

Iniciar Sesion

Registrar
Recordarme
Forgot username  Forgot password
Top Usuarios

Estadisticas

  • Total Usuarios 3662
  • Total Grupos 1
  • Total Debates 0
  • Total Álbums de Grupo 2397
  • Total Fotos 1252
  • Total Vídeos 233
  • Total Boletines 0
  • Total Actividades 2543
  • Total Entradas de Muro 525
  • Total Eventos 0
  • Total Hombres 243
  • Total Mujeres 249
  • Total Sin especificar 3170

Articulos en la web

Publicado: Miércoles, 05 Enero 2011 22:52
Escrito por Alastor (administrador)

Como crear mapas interactivos

Método Flash

La creación de mapas para los zabys o los VWW son laboriosos se pueden realizar de dos formas una es en flash la otra en html nosotros en este manual explicaremos el método con flash ya que el de html ya lo hicimos con anterioridad, cuando decimos sencillo no queremos decir que no sean eficaces, los son pero se implementan de formas diferentes.

-primero explicare un concepto básico sobre coordenadas y dimensiones para que podáis entender como se realiza el proceso.

Así pues, un mapa de imagen esta compuesto de dos partes:

  • La imagen propiamente dicha que estará situada como de costumbre dentro de la etiqueta <body> de nuestro documento HTML.
  • Un código, situado en el interior de la etiqueta <map>, que delimitara por medio de líneas geométricas imaginarias cada una de las áreas de los enlaces presentados en la imagen. Imagen que ilustra el manejo de coordenadas en imágenes

Las líneas geométricas que delimitan los enlaces, es decir, las áreas de los enlaces, han de ser definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho (X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (x) y anchura (y) nos encontramos. De este modo, la esquina superior izquierda corresponde a la posición 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseamos saber qué coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de diseño grafico como Photoshop o Paint Shop Pro.

 

L

a mejor forma de explicar el funcionamiento de este tipo de mapas es a partir de un ejemplo práctico. Supongamos que tenemos una imagen con un mapa como esta:

Dentro de ella queremos introducir un enlace a cada uno de los elementos que la componen. Para ello, definiremos nuestros enlaces como zonas cuadradas del tamaño apropiado que serán distribuidas a lo largo y ancho de la imagen.

Para hacer esto utlizaremos el Corel Draw, ya se que la mayoria de vosotros lo usa para la greacion de bonitas postales pero hoy crearemos un flash que luego podremos usar dentro del juego para que se muevan los kekos de un lado a otro de nuestros mundos virtuales.

Una vez creada la imagen crearemos los recuadros, poligonos, circulos o en definitiva el objeto uqe necesitemos para pulsar sobre el.

Yo he creado un rectangulo y una elipse en los laterales y las he marcado en rojo para  que podais verlas, no tienen ninguna propiedad solo son lo que veis un rectangulo y una elipse.

ahora pulsaremos en el rectangulo he iremos a sus propiedades.

Lo que nos interesa de ellas son las partes marcadas en amarillo donde seleccionaremos primero el formato url, la url de nuestro local o zona dentro del mundo 3d, y el nombre en este caso oficina, el resto lo podéis dejar como esta ya que no tendra demasiada ultilidad hecho esto con los dos objetos nos quedara algo como esto.

Una vez tengamos el dibujo como nostros qeuremos con sus enlaces y terminado procederemos a editar cada propiedad de los enlace y quitar la opcion de rayas para que dejen de verse y la opcion de contorno y relleno en ninguna, yo lo are solo con el rectangulo para que veais el efecto.

Una vez tengamos este trabajo realizado con todos los enlaces y objetos podemos guardarlo con la opción. ARCHIVO-->PUBLICAR EN WEB-->FLASH INCRUSTADO HTML

eso nos crea un archivo .swf que subiremos a un servidor y enlazaremos como cualquier otro flash dentro del editor.

Categoría: