Comunidad de diseño web y desarrollo en internet online

Anclar un objeto a otro (o hacer un área de imagen linkable)

Citar            
MensajeEscrito el 14 Abr 2010 06:25 am
Bien, vamos a ponernos en situación.

Tenemos un marco. Dentro de ese marco podemos desplazar una imagen que es más grande que este recuadro. Es un mapa en realidad. Así que arrastramos la imagen para allá y para acá con el ratón para verla toda (drag and drop).

Pero ahora quiero que en esa imagen haya zonas que sean links, y que claro, al arrastrar la imagen éstas zonas se arrastren con la propia imagen. Es esto posible?

Por miang

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Abr 2010 06:34 am
Sí. La solución pasa por saber qué es target y qué es currentTarget.
Imaginemos que tenemos un MC "mapa" y, dentro un MC "punto". en un frame escribimos

Código ActionScript :

mapa.addEventListener(MouseEvent.DOWN,arrastrarMapa)
mapa.punto.addEventListener(MouseEvent.DOWN,mostrarDato)

Cada vez que pulsemos en el punto, el evento MouseEvent.DOWN se "propaga" y se ejecutan mostrarDato y arrastrarMapa. Debemos, pues en la función arrastrarMapa hacer algo SÓLO si e.currentTarget es "mapa".

Código ActionScript :

function arrastrarMapa(e:MouseEvent){
   if (e.currentTarget==mapa){
        mapa.startDrag()
   }
}

Sí.
currentTarget es "a quien le hemos añadido el listener"
target es "a quien le ocurre el evento" (en este caso, si "pinchamos" en "punto", el MouseDown le ocurre tanto al punto como al mapa.

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Abr 2010 07:49 am
Muchas gracias por la respuesta, pero creo que no he sabido explicarme. Lo pondré de otra manera y con datos más concretos.

Nos encontramos en la misma situación que antes. Un marco, y un mapa inmenso que desplazamos con drag and drop. Muy bien, en este mapa hay botones, pero qué ocurre? los botones no se mueven con el mapa. Se quedan ahi estáticamente. Éste es fundamentalmente el problema.

Cuando comenté lo de las zonas con links (que por cierto gracias y me apunto el código) lo dije porque estoy utilizando el componente flashTooltip, de modo que al pasar el puntero sobre las grandes ciudades, aparece un blogo emergente con información de dicha ciudad. Pensé que poniendo las letras con Phoposhop en el tapiz del mapa y haciendo zonas linkables/que permitan Actions podría ponerles los globos emergentes cuando alguien pasase el puntero por el nombre.

Pero claro, a su vez el mapa permite hacer drag and drop.

Lo que en un principio había concebido es asignar los globos a botones, pero para eso necesitaría que éstos botones estuviesen de alguna forma "pegados" al tapiz del mapa para que se desplazasen con éste.

Por miang

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Abr 2010 08:19 am
Es que deberías tener los "botones" DENTRO del mapa. No sé si los creas en tiempo de ejecución o de diseño. Si es en tiempo de diseño, ya sabes, editas el Símbolo del mapa y metes ahí los puntos. si es en tiempo de ejecución (mediante AS) haz el addChild al mapa

Código ActionScript :

mapa.addChild(punto)

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Abr 2010 08:20 am
Voy a probar lo que me comentas, lo de addchild.

Por miang

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Abr 2010 08:39 am
no, no ha funcionado...

Lo de AddChild lo he estado mirando y ahora mismo me parece muy interesante, es algo nuevo en AS3 y que nunca le había prestado mucha atención.

Por miang

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Abr 2010 11:05 am
Bien, pues lo he conseguido.

Esto era la verdad bastante sencillo. Tan sencillo como crear un Movie Clip y meter el mapa y los botones dentro, y luego aplicar el drag and drop a todo el Movie Clip.

El código en cuestión ha sido el siguiente.

He creado el container (Movie Clip) donde he metido el mapa. Editando el Movie Clip (que tiene sus capas y timeline independientes) he colocado todos los botones donde yo consideraba oportuno. Después ese Movie Clip lo he incrustado en el escenario, colocándolo apropiadamente. A ese Movie Clip le he aplicado el siguiente código AS3:

Código ActionScript :

//Coordenadas X e Y de la parte sup izq del rectangulo
var my_x:int=stage.stageWidth-MAP_BUTTONS.width;
var my_y:int=stage.stageHeight-MAP_BUTTONS.height;

//La altura y anchura del rectangulo
var myWidth:int=0-my_x;
var myHeight:int=0-my_y;

//Crea una nueva instancia con la clase del rectangulo usando las coordenadas de arriba.
var boundArea:Rectangle=new Rectangle(my_x, my_y, myWidth ,myHeight);

//Agrega los listeners del raton
MAP_BUTTONS.addEventListener(MouseEvent.MOUSE_DOWN,drag);
MAP_BUTTONS.addEventListener(MouseEvent.MOUSE_UP,drop);

//Esta funcion mueve el mapa pero lo limita a los bordes del recuadro
function drag(event:MouseEvent):void {
  MAP_BUTTONS.startDrag(false,boundArea);
}

//Esta funcion libera el mapa - lo suelta
function drop(event:MouseEvent):void {
  MAP_BUTTONS.stopDrag();
}

Por miang

3 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.