Comunidad de diseño web y desarrollo en internet online

Cuestión con Drag and drop y AS3

Citar            
MensajeEscrito el 15 Feb 2011 04:33 pm
Hola amigos. Tengo una cuestión con un archivo que tiene AS3.

Bajé un fla que hace lo que en principio necesité: armar un rompecabezas, utilizando código AS3. Me funciono muy bien pero ahora tengo la necesidad de que las piezas del rompecabezas dos de ellas se "peguen" a la misma instancia. En el original cada pieza se "pega" a la instancia que le corresponde y si la arrastro y suelto en una instancia que no le corresponde, se regresa a su lugar.
Este es el original:



Aquí el código que hace que todo funcione:

Código ActionScript :

var startX:Number;
var startY:Number;
var counter:Number = 0;

square_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
square_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
triangle_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
triangle_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
flower_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
flower_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
pentagon_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
pentagon_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

function pickUp(event:MouseEvent):void {
   event.target.startDrag(true);
   reply_txt.text = "";
   event.target.parent.addChild(event.target);
   startX = event.target.x;
   startY = event.target.y;
}
function dropIt(event:MouseEvent):void {
   event.target.stopDrag();
   var myTargetName:String = "target" + event.target.name;
   var myTarget:DisplayObject = getChildByName(myTargetName);
   if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
      reply_txt.text = "Good Job!";
      event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
      event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
      event.target.buttonMode = false;
      event.target.x = myTarget.x;
      event.target.y = myTarget.y;
      counter++;
   } else {
      reply_txt.text = "Try Again!";
      event.target.x = startX;
      event.target.y = startY;
   }
   if(counter == 4){
        reply_txt.text = "Congrats, you're finished!";
    }
}

square_mc.buttonMode = true;
flower_mc.buttonMode = true;
triangle_mc.buttonMode = true;
pentagon_mc.buttonMode = true;


Lo bajé de esta página:
http://monkeyflash.com/tutorials/flash-drag-and-drop/

He modificado el comportamiento y más o menos lo entiendo pero al no saber AS3 no soy capaz de modificar la estructura.

Si alguien puede orientarme, decirme más o menos por donde debo atacar el problema, se los agradecería muchísimo.

Que tengan un buen día.
Saludos.

Por pharpbx

15 de clabLevel



Genero:Masculino  

msie7
Citar            
MensajeEscrito el 15 Feb 2011 05:26 pm
Los MCs que tienes se llaman(*):
Las figuras
square_mc, triangle_mc, flower_mc y pentagon_mc
Los "huecos"
targetsquare_mc, targettriangle_mc, targetflower_mc y targetpentagon_mc

Todo el "quiz" se basa en la función dropit

Código ActionScript :

function dropIt(event:MouseEvent):void { 
   event.target.stopDrag(); 
   var myTargetName:String = "target" + event.target.name; 
   var myTarget:DisplayObject = getChildByName(myTargetName); 
   if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){ 
                 ,,,,,
   }

event.target es a quién le ha ocurrido el evento. Vamos, el MC que estábamos dragueando
Por eso, lo primero que hacemos es dejar de draguear

Código ActionScript :

   event.target.stopDrag(); 

Como su "nombre" es event.target.name;
buscamos el "nombre" de su "target", en dos líneas

Código ActionScript :

var myTargetName:String = "target" + event.target.name; //será, p.e. el string "targettargettriangle_mc"
var myTarget:DisplayObject = getChildByName(myTargetName); //buscamos un MC con ese nombre

puff, ya casi
event.target.dropTarget.parent es dónde se ha soltado el MC, así que comparamos el "target" con dónde se ha soltado

Código ActionScript :

event.target.dropTarget.parent == myTarget




(*)Al decir "se llaman" me refiero a su propiedad "name". En Flash 10 creo que coincide con el nombre de instancia, en Flash 9, se tiene que dar propiedad manualmente a la propiedad name

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Feb 2011 07:43 pm
Eliseo, gracias por tu oportuna respuesta.

Me ha quedado más claro como funciona sin embargo después de analizarlo, y darle vueltas al asunto, no fui capaz de hacer la modificación de forma adecuada.

Encontré una solución, que no es para nada la mejor pero dado que estaba bajo un poco de presión con este tema, me resolvió el problema.


Arrastra el triángulo y el pentágono hacia el hueco del triángulo.

Lo que he hecho es "forzar" al event.target.dropTarget.parent
para que siempre sea un target específico:

Código ActionScript :

event.target.dropTarget.parent == targettriangle_mc


Al hacer lo anterior no importa qué figura arrastre hacia el hueco del triángulo, cumpliran con la condición

Código ActionScript :

if (event.target.dropTarget!=null&&event.target.dropTarget.parent==targettriangle_mc)


Y ya dentro de este if hago que se comporten como yo quiera.

Este es el código final:

Código ActionScript :

var startX:Number;
var startY:Number;
var counter:Number=0;

square_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
square_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
triangle_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
triangle_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
flower_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
flower_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
pentagon_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
pentagon_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

function pickUp(event:MouseEvent):void {
   event.target.startDrag(true);
   reply_txt.text="";
   event.target.parent.addChild(event.target);
   startX=event.target.x;
   startY=event.target.y;
}
function dropIt(event:MouseEvent):void {
   event.target.stopDrag();
   var myTargetName:String="target"+event.target.name;
   var myTarget:DisplayObject=getChildByName(myTargetName);
   if (event.target.dropTarget!=null&&event.target.dropTarget.parent==targettriangle_mc) {
      event.target.buttonMode=false;
      if (event.target==flower_mc||event.target==square_mc) {
         event.target.x=startX;
         event.target.y=startY;
         reply_txt.text="Incorrecto!";
      } else if (event.target == triangle_mc) {
         event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
         event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
         triangle_mc.x=418;
         triangle_mc.y=200;
      } else if (event.target == pentagon_mc) {
         event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
         event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
         pentagon_mc.x=256;
         pentagon_mc.y=200;
      }
      counter++;
   } else {
      reply_txt.text="Try Again!";
      event.target.x=startX;
      event.target.y=startY;
   }
   if (counter==4) {
      //reply_txt.text="Congrats, you're finished!";
   }
}

square_mc.buttonMode=true;
flower_mc.buttonMode=true;
triangle_mc.buttonMode=true;
pentagon_mc.buttonMode=true;


Saludos y nuevamente gracias por la ayuda!!

Por pharpbx

15 de clabLevel



Genero:Masculino  

msie7
Citar            
MensajeEscrito el 16 Feb 2011 07:48 pm
Tu problema inicial ha sido copiar código. Yo personalmente no apoyo el esquema de "ctrl-c + ctrl-v" y luego pedir ayuda.

Si alguien quiere dártela, genial.

Pero recuerden a los que le brinden ayuda, así le están haciendo el trabajo, ya que alguien que copia, poco le interesa aprender.

Saludos, Hernán . -

Por Hernán

BOFH

6148 de clabLevel

19 tutoriales
23 articulos

Genero:Masculino   REC Desarrollador de GAIA

Marketing & IT

chrome
Citar            
MensajeEscrito el 16 Feb 2011 07:48 pm
Lo siento, adjunté el html y no el swf, lo adjunto nuevamente:



Saludos.

Por pharpbx

15 de clabLevel



Genero:Masculino  

msie7
Citar            
MensajeEscrito el 17 Feb 2011 07:28 am

event.target.dropTarget.parent es dónde se ha soltado el MC, así que comparamos el "target" con dónde se ha soltado

Código ActionScript :

event.target.dropTarget.parent == myTarget 


Bastaba con saber que, donde se suelte, su nombre tiene que empezar por "target"

Código ActionScript :

event.target.dropTarget.parent.name.substr(0,5) == "target"

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Mar 2011 03:53 pm
Muchas gracias a los dos me sirvió para solucionar un tema... gracias

Por soytatin

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 26 Jul 2012 04:28 pm
Es posible clonar el evento? es decir si drageo el circulo que al dragearlo se cree automaticamente otro circulo en la misma posicion del que ha sido drageado? pero que tenga exactamente las mismas propiedades del circulo, solo que en otra instancia? asi como un clon

Por pezweb

13 de clabLevel



 

Flash Developer

chrome
Citar            
MensajeEscrito el 01 Ago 2012 11:37 am
Hola
Esta discusión es de hace tiempo y no sé si los que la iniciaron leerán esto. En todo caso mi entrada es para agradecer a los intervinientes todas las explicaciones que me han ayudado muchísimo a entender en qué varía AS3 con respecto a AS2.
En todo caso, y tenía un planteado otro problema y es que quería que cada uno de los objetos actuara de una forma distinta cuando llegara a su destino.
Aporto el código con las explicaciones que escribí para mi, por si le sirve a de ayuda a alguien.

Código ActionScript :


/*Estas son las variables que establecen la posición inicial de los objetos
y que empiece a contar desde 0*/
var startX:Number;
var startY:Number;
var contador:Number=0;

/*Aqui se le dice a cada uno de los objetos que cuando se pinchen o se suelten con el ratón tendrán que hacer algo 
(Arrastar y soltar son los nombres de las funciones que he puesto yo para recordarme qué van a tener que hacer esos MC)*/
cuadrado_mc.addEventListener(MouseEvent.MOUSE_DOWN, Arrastrar);
cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP, Soltar1);
triangulo_mc.addEventListener(MouseEvent.MOUSE_DOWN, Arrastrar);
triangulo_mc.addEventListener(MouseEvent.MOUSE_UP, Soltar2);
pentagono_mc.addEventListener(MouseEvent.MOUSE_DOWN, Arrastrar);
pentagono_mc.addEventListener(MouseEvent.MOUSE_UP, Soltar3);
flor_mc.addEventListener(MouseEvent.MOUSE_DOWN, Arrastrar);
flor_mc.addEventListener(MouseEvent.MOUSE_UP, Soltar4);
/*Esta es la función de arrastrar con el ratón (es común para todos los objetos) le decimos que no se escriba nada y que, lo cojamos por donde lo cojamos, se desplace al centro del ratón*/
function Arrastrar(event:MouseEvent):void {
   event.target.startDrag(true);
   respuesta_txt.text="";
   event.target.parent.addChild(event.target);
   startX=event.target.x;
   startY=event.target.y;
}
/*Esta es la función que define lo que va a suceder cuando se suelte el MC del cuadrado*/
function Soltar1(event:MouseEvent):void {
   event.target.stopDrag();
   if (event.target.dropTarget!=null&&event.target.dropTarget.parent==cuadrado_mc2) {
      respuesta_txt.text="¡Bien Hecho!";
      /*Aquí decimos que la pieza ya no se pueda arrastar ni soltar 
      y que deje de actuar como si fuera un botón cuando se acierta*/
      event.target.removeEventListener(MouseEvent.MOUSE_DOWN, Arrastrar);
      event.target.removeEventListener(MouseEvent.MOUSE_UP, Soltar1);
      event.target.buttonMode=false;
      /*Aquí le decimos que se sitúe exactamente en el centro del objeto destino*/
      event.target.x=cuadrado_mc2.x;
      event.target.y=cuadrado_mc2.y;
      /*Aquí decimos que el contador añada 1 a la cuenta*/
      contador++;
      /*Esto es lo que mandamos que se haga en el caso de que se suelte el objeto 
      lejos de su destino...: que regrese a su lugar de inicio*/
   } else {
      respuesta_txt.text="Inténtalo otra vez!";
      event.target.x=startX;
      event.target.y=startY;
   }
   /*Cuando detecta que ya ha terminado porque el contador llega hasta 4, informa de ello*/
   if (contador==4) {
      respuesta_txt.text="¡felicidades, has terminado!";
   }
}

/*Esta es la función que define lo que va a suceder cuando se suelte el MC triángulo, 
aquí le decimos que se coloque en un una posición concreta, pero también le podríamos pedir que hiciera cualquier cosa*/
function Soltar2(event:MouseEvent):void {
   event.target.stopDrag();
   
   if (event.target.dropTarget!=null&&event.target.dropTarget.parent==triangulo_mc2) {
      respuesta_txt.text="¡Bien Hecho!";
      event.target.removeEventListener(MouseEvent.MOUSE_DOWN, Arrastrar);
      event.target.removeEventListener(MouseEvent.MOUSE_UP, Soltar2);
      event.target.buttonMode=false;
      event.target.x=triangulo_mc2.x;
      event.target.y=triangulo_mc2.y;
      contador++;
   } else {
      respuesta_txt.text="Inténtalo otra vez!";
      event.target.x=startX;
      event.target.y=startY;
   }
   if (contador==4) {
      respuesta_txt.text="¡felicidades, has terminado!";
   }
}
/*Esta es la función que define lo que va a suceder cuando se suelte el MC del pentagono*/
function Soltar3(event:MouseEvent):void {
   event.target.stopDrag();
   
   if (event.target.dropTarget!=null&&event.target.dropTarget.parent==pentagono_mc2) {
      respuesta_txt.text="¡Bien Hecho!";
      event.target.removeEventListener(MouseEvent.MOUSE_DOWN, Arrastrar);
      event.target.removeEventListener(MouseEvent.MOUSE_UP, Soltar3);
      event.target.buttonMode=false;
      event.target.x=pentagono_mc2.x;
      event.target.y=pentagono_mc2.y;
      contador++;
   } else {
      respuesta_txt.text="Inténtalo otra vez!";
      event.target.x=startX;
      event.target.y=startY;
   }
   if (contador==4) {
      respuesta_txt.text="¡felicidades, has terminado!";
   }
}

/*Esta es la función que define lo que va a suceder cuando se suelte el MC de la flor*/
function Soltar4(event:MouseEvent):void {
   event.target.stopDrag();
   
   if (event.target.dropTarget!=null&&event.target.dropTarget.parent==flor_mc2) {
      respuesta_txt.text="¡Bien Hecho!";
      event.target.removeEventListener(MouseEvent.MOUSE_DOWN, Arrastrar);
      event.target.removeEventListener(MouseEvent.MOUSE_UP, Soltar4);
      event.target.buttonMode=false;
      event.target.x=flor_mc2.x;
      event.target.y=flor_mc2.y;
      contador++;
   } else {
      respuesta_txt.text="Inténtalo otra vez!";
      event.target.x=startX;
      event.target.y=startY;
   }
   if (contador==4) {
      respuesta_txt.text="¡felicidades, has terminado!";
   }
}
/*Como son MC lo que arrastramos y queremos que se vea el dedo como si tratan de botones
les decimos que actuen como si lo fueran*/
cuadrado_mc.buttonMode=true;
flor_mc.buttonMode=true;
triangulo_mc.buttonMode=true;
pentagono_mc.buttonMode=true;

Por cincopatas

3 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 04 Dic 2012 11:00 pm
Hola cincopatas!

Oye tengo una pregunta, si yo quisiera crear una sola función ya que digamos tengo un solo cuadrado, pero tengo varios cuadrados (cuadrado_mc2) en donde se podría colocar el cuadrado original, como puedo reemplazar "cuadrado_mc2"? Sería con un target? O como sería? Gracias

Por gutigutijd

10 de clabLevel



Genero:Masculino  

Diseñador, animador, estudiante

chrome
Citar            
MensajeEscrito el 23 Jul 2014 12:07 pm
Disculpen Camaradas De Casualidad No Tendrán El archivo Flash Descargable Ya Que No Esta La Página, Gracias Me Ayudarían Muchisimo

Por hammeren24

0 de clabLevel



 

chrome

 

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