Foros del Web » Creando para Internet » Flash y Actionscript »

Creación de mapa interactivo !!

Estas en el tema de Creación de mapa interactivo !! en el foro de Flash y Actionscript en Foros del Web. Hola necesito crear un mapa como el que hay aquí....... http://www.prink.es/on-line/Home.html Para el tema de los países....no tengo problema porque me defiendo con la creación ...
  #1 (permalink)  
Antiguo 26/01/2012, 11:23
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Creación de mapa interactivo !!

Hola necesito crear un mapa como el que hay aquí.......
http://www.prink.es/on-line/Home.html
Para el tema de los países....no tengo problema porque me defiendo con la creación de botones interactivos, pero necesitaría saber como crear una lista interactiva como la que hay de manera que ejecutara las siguientes funciones:
1. Que se desplazará arriba o a bajo en base al movimiento del mouse..
2. Que al sobreponer el mouse por encima del nombre también salte la interacción del país..... Supongo que todo esto es código, pero claro no se que código aplicar, si todo debería ir en una sola capa o varias..... etc.

Muchas gracias por vuestro tiempo, ayuda y consejos ;)
  #2 (permalink)  
Antiguo 26/01/2012, 11:41
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: Creación de mapa interactivo !!

Hola Workerman:
Revisa el link porque la página no carga.

Espero poderte ser de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #3 (permalink)  
Antiguo 30/01/2012, 03:34
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Si, el link es correcto !!
http://www.prink.es/on-line/Home.html ;)
  #4 (permalink)  
Antiguo 30/01/2012, 11:36
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: Creación de mapa interactivo !!

No se que versión de AS estás usando, aquí un ejemplo en AS2:
Cada País hazlo en un MC con la animación de crecer en 15 frames y le das Interpolación de movimiento, copias esos frames y lo pegas en la capa siguiente en el frame 16 e inviertes la animación, crea la capa 3 y en los frames 1 y 15 coloca un stop();
Al colocar cada País en el escenario le das un nombre de instancia.
Código para el MC:
Código actionscript:
Ver original
  1. on(rollOver){
  2.  gotoAndPlay(2);
  3. }
  4. on(rollOut){
  5.  gotoAndPlay(16);
  6. }
En la lista a cada texto lo conviertes en botón con el siguiente código:
Código actionscript:
Ver original
  1. on(rollOver){
  2.  nombre_instancia.gotoAndPlay(2);
  3. }
  4. on(rollOut){
  5.  nombre_instancia.gotoAndPlay(16);
  6. }
Espero haberte sido de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #5 (permalink)  
Antiguo 01/02/2012, 07:11
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Gracias Bandit....solo me queda dos cosas:

El tema de poder hacer que cuando el mouse de mueve hacia arriba, la lista baje, y cuando el mouse baja, la lista hacia arriba.....
¿ Deberia poner todos los nombre de la comunidades en una sola capa ?? o cada una en una capa ?

Y como conseguir con el mouse que se pueda desplazar el mapa en todas direcciones ?? Supongo que esto tambien es programación ??
  #6 (permalink)  
Antiguo 01/02/2012, 11:30
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: Creación de mapa interactivo !!

Los botones de cada comunidad debes de ponerlo en un MC en su capa 1 frame 1, formado una columna.
En el escenario coloca el MC con nombre de instancia, por ejemplo: miMenu y le escribes éste código:
Código actionscript:
Ver original
  1. onClipEvent (enterFrame) {
  2.  if (_root._ymouse>=200) {
  3.   if (_root.miMenu._y>=-240) {
  4.    _root.miMenu._y -= 10;
  5.   }
  6.  }
  7.  if (_root._ymouse<=200) {
  8.   if (_root.miMenu._y<=-10) {
  9.    _root.miMenu._y += 10;
  10.   }
  11.  }
  12. }
Los valores de _y tendrás que cambiarlo según la altura del MC y el escenario.
Para el mapa tendrás que hacer un código similar pero apuntando a la posición del stage del height y el width con relación a _xmouse y _ymouse

Espero haberte sido de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #7 (permalink)  
Antiguo 01/02/2012, 12:51
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Mañana lo pongo en práctica y te comento

Gracias Bandit
  #8 (permalink)  
Antiguo 02/02/2012, 12:58
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

como se invierte una animación....jajajajaja ?
  #9 (permalink)  
Antiguo 02/02/2012, 13:12
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: Creación de mapa interactivo !!

Si no sabes utilizar bien el Flash, creo que lo más conveniente antes de hacer algo que no entiendas, vayas a la Ayuda del Programa, allí tienes tutores y muestras que te enseñan su funcionamiento, además tienes todos los códigos explicados y con ejemplos, simplemente presiona la tecla F1.

Espero haberte sido de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #10 (permalink)  
Antiguo 02/02/2012, 13:26
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Con animación clásica si se mediante la la linea de tiempo>invertir fotograma, pero la interpolación nueva, la que es de color azul, no me permite el cambio !!
  #11 (permalink)  
Antiguo 02/02/2012, 16:28
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: Creación de mapa interactivo !!

Vuelvo a repetirte, no conoces el funcionamiento del Flash, para ello te di una recomendación en mi post anterior, si no estudias nunca aprenderás.
Ese tipo de animaciones si se puede invertir, simplemente hacer clic derecho sobre los frames seleccionado y activar: Ruta de movimiento/Invertir ruta.

Espero haberte sido de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #12 (permalink)  
Antiguo 03/02/2012, 03:38
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Gracias !!
  #13 (permalink)  
Antiguo 03/02/2012, 06:58
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

De momento la primera parte va genial....... lo explicaste muy bien !! Imposible cometer errores ;)
  #14 (permalink)  
Antiguo 03/02/2012, 07:29
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Hola Bandit, me ha salido un contratiempo...que no se como resolverlo, cada provincia, al crecer el tamaño y hacerse roja con transparencia como el ejemplo que te mostré, sucede que otras provincia se quedan sobre puestas, de manera que hay una provincia que siempre queda por encima de otra, y aunque modifique el orden se las capas siempre hay algunas que quedan sobrepuestas por encima de otras..no se si me explico ?? En tu web, he visto un tuto de unas fotos de mujeres en las que cuando aumentan la mas grande queda por delante de las mas pequeña, necesito hacer algo como eso, pero no se que funcion es ni como aplicarla ??
  #15 (permalink)  
Antiguo 03/02/2012, 10:22
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: Creación de mapa interactivo !!

Para empezar las provincias no deben de estar en capas diferentes, si no en una sola capa y frame.
Para cambiar la profundidad utiliza éste código: swapDepths(); la información de como usarlo lo tienes en la Ayuda del Flash.

Espero haberte sido de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #16 (permalink)  
Antiguo 06/02/2012, 06:25
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Ok, me esta funcionando todo a la perfección ...jajajajaj que raro !!
  #17 (permalink)  
Antiguo 06/02/2012, 10:08
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Hola Bandit, he estado probando el script que me distes para ejecutar la lista y he estado probando todos los valores de y alternandolos de muchas maneras pero cuando la lista debería ir hacia arriba no va ?? Se que el ultimo parámetro regula la velocidad y el resto las dimensiones de las lista pero no funciona

onClipEvent (enterFrame) {
if (_root._ymouse>=200) {
if (_root.LISTA._y>=-140) {
_root.LISTA._y -=5;
}
}
if (_root._ymouse<=200) {
if (_root.LISTA._y<=-600) {
_root.LISTA._y +=5;
}
}
}
  #18 (permalink)  
Antiguo 06/02/2012, 10:46
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: Creación de mapa interactivo !!

Lo que pasa es que no haz entendido la lógica del movimiento
Para empezar no uses mayúsculas para los nombres de instancia.
Está parte de código: if (_root.LISTA._y>=-140) { indica hasta donde debe de subir fuera del escenario en la parte superior hasta que se vea el último botón y if (_root.LISTA._y<=-600) { hasta donde debe de bajar para que se vea el primer botón, por lo tanto el valor negativo de 600 está mal.

Espero haberte sido de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #19 (permalink)  
Antiguo 06/02/2012, 11:38
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Hola Bandit de nuevo..jajajaja
Puede ser que el script que me diste para la lista de provincias, quede anulado al introducir los botones de las provincias dentro del MC que controla el movimiento.
Porque si cojo el boton " Asturias " con el codigo
on(rollOver){
asturias.gotoAndPlay(2);
}
on(rollOut){
asturias.gotoAndPlay(16);
}
Y lo introduzco en cualquier capa va, pero cuando lo pongo dentro del MC con el script del movimiento no funciona. Me gustaria colgar el .fla o el .swf para que se pudiera visualizar es posible ?
  #20 (permalink)  
Antiguo 06/02/2012, 12:07
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: Creación de mapa interactivo !!

Lo que pasa es que con ese código en tus botones estás apuntando a la Línea de tiempo del MC y allí no está el mapa, si no, en el escenario principal, por lo tanto debes de apuntar al _root
El código debes de escribirlo así:
Código actionscript:
Ver original
  1. on(rollOver){
  2.  _root.asturias.gotoAndPlay(2);
  3. }
Espero haberte sido de ayuda.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #21 (permalink)  
Antiguo 23/02/2012, 11:35
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Hola Bandit !!

Nuevo problema :(

Tras seguir tu consejo de investigar mediante la ayuda de Flash, para la profundidad
de los MC ( swapdeth ), encontré esto en la ayuda de Flash.

myMC1_mc.onRelease = function() {
this.swapDepths(myMC2_mc);
};
myMC2_mc.onRelease = function() {
this.swapDepths(myMC1_mc);
};


El problema esta que tengo muchos MC con las provincias, exactamente 50. Seguí investigando y encontré este código, que se introduce en los MC de las provincias.

on (rollOver, rollOut) {
_root.x +=1; //Incrementamos el valor de la variable en 1
this.swapDepths(_root.x); //Le asignamos como nivel de apilamiento
//el valor de la variable
}


Luego por otro lado, en el fotograma de la linea de tiempo que contiene todas los MC de las provincias, iva este código.

var x=0


Esto, lo raro, es que aveces va, como que aveces no va...pero en fin dentro que medianamente me da los resultados esta el problema...... de que en los botones de los nombres de las provincias, meto este mismo código, no lo aplica !!



Código para los botones de nombre, he probado esta dos variante però no van bien y los MC se sobremontan !!

Opcion 1

on(rollOver){
almeria.gotoAndPlay(2);
}
on(rollOut){
almeria.gotoAndPlay(16);
}

on (rollOver, rollOut) {
_root.x +=1; //Incrementamos el valor de la variable en 1
this.swapDepths(_root.x); //Le asignamos como nivel de apilamiento
//el valor de la variable
}


Opcion 2

on(rollOver){
root_almeria.gotoAndPlay(2);
}
on(rollOut){
root_almeria.gotoAndPlay(16);
}

on (rollOver, rollOut) {
_root.x +=1; //Incrementamos el valor de la variable en 1
this.swapDepths(_root.x); //Le asignamos como nivel de apilamiento
//el valor de la variable
}



No se como hacer para que cuando el mouse se pone encima del nombre arranque la animación respetando el Swapdeth ??
  #22 (permalink)  
Antiguo 27/02/2012, 05:09
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Que podría hacer para lo que me ha sucedido anteriormente ? Gracias
  #23 (permalink)  
Antiguo 29/02/2012, 07:25
 
Fecha de Ingreso: febrero-2010
Mensajes: 75
Antigüedad: 14 años, 1 mes
Puntos: 4
Respuesta: Creación de mapa interactivo !!

Alguien podría echarme un cable estoy atascado, gracias !!

Etiquetas: creación, html, interactivo, mapa, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:36.