Drag and Drop

Hola amigos. Estoy haciendo un ejercicio con drag and drop. Tengo varios recuadros con casilleros para completar, en algunos recuadros hay 4 casilleros, en otros 3, etc...

Y tengo unos carteles para arrastrar a los casilleros de los recuadros. Como un cartel puede ser soltado en mas de un casillero (porque los recuadros tienen varios casilleros) y hay muhcos recuadros utilizo este codigo:

Código :

on (press) {
   startDrag(this,false)
   this.swapDepths(_parent.getNextHighestDepth());
}
on (release, releaseOutside) {
   stopDrag();
   if (this.hitTest (_parent.va1)) {
      this._x = _parent.va1._x;
      this._y = _parent.va1._y;
   }
   if (this.hitTest (_parent.va2)) {
      this._x = _parent.va2._x;
      this._y = _parent.va2._y;
   }
   if (this.hitTest (_parent.va3)) {
      this._x = _parent.va3._x;
      this._y = _parent.va3._y;
   }
   if (this.hitTest (_parent.va4)) {
      this._x = _parent.va4._x;
      this._y = _parent.va4._y;
   }
}

va1, va2, va3 y va4 son los casilleros del recuadro. Necesito que si el usuario suelta el cartel en cualquier lugar de la pantalla menos dentro de los casilleros, el cartel vuelva a su posicion original.

Que le tendria que agregar al codigo?.
Gracias!.[/code]

Si estás trabajando con varios casilleros, con más razón no debería trabajar con el código situado sobre los movieClips, de esta manera si deseas hacer algún cambio tienes que hacerlo en todos los clips. Programa en el frame y utiliza ciclos para que puedas hacer una sola programación. En cuanto a tu duda, si utilizas la propiedad _droptarget, puedes hacer lo que deseas:

Suponiendo que en la escena estén tus carteles con nombre de instancia "mc1", "mc2", "mc3", etc.. deberías hacer algo parecido a esto:

Código ActionScript :

var cantidad:Number = 5;
var i:Number;

for(i = 1; i <= cantidad; i++){
   
   this["mc" + i].iniX = this["mc" + i]._x;
   this["mc" + i].iniY = this["mc" + i]._y;
   
   //---Arrastrar los clips
   this["mc" + i].onPress = function():Void{
      
      this.swapDepths(this._parent.getNextHighestDepth());
      this.startDrag();
      
   }
   
   //---Soltar los clips
   this["mc" + i].onRelease = function():Void{
      
      stopDrag();
      
      //---Detectar el clip donde se ha soltado
      var drop:MovieClip = MovieClip(eval(this._droptarget));
      
      //---Si no se ha soltado encima de ningún MovieClip
      if(drop == null){
         
         this._x = this.iniX;
         this._y = this.iniY;
         
      //---Si se ha soltado encima de un MovieClip
      }else{
         
         this._x = drop._x;
         this._y = drop._y;
         
      }
      
   }
   
   
}

Hola!. Esta muy bueno tu codigo, funciona muy bien.

Pero tengo unas dudas al respecto.

Yo tengo varios mc (nombres: a1, a2..) que tienen que ir dentro de un recuadro que tiene la misma cantidad de casilleros para soltar.
Y tengo otros mc (nombres: b1, b2..) que tienen que ir dentro de otro recuadro con la misma cantidad de casilleros. Y mas...
O sea que los mc a1, a2.. no pueden soltarse sobre el recuadro con los casilleros para los mc b1, b2..

Y por ultimo, cuando se soltaron todos los mc dentro de los casilleros correctos, se debe ejecutar una accion (mc_correcto._visible=1).

Que tendriamos que cambiar en el codigo que me pasaste?.
Muchas gracias!.

Si tienes dos grupos de figuras que van a hacer las mismas acciones pero por separado, debería tener dos ciclos diferentes. Ahora las dos deberían compartir la acción de onPress pues no tendrían diferencia en la programación, sólo se diferenciarían en la de onRelease. Sigue este principio y crea un ciclo para hacer los onPress de todos y crea un ciclo para cada onRelese de cada grupo.

Para lo segundo que deseas hacer puedes hacer una comparativa entre el nombre del mc que se ha soltado y el mc que te devuelve el droptarget. Primeramente creas un arreglo donde cada uno de sus valores corresponderán a si se ha situado los movieClips correctamente (todos los valores del arreglo estarían por defecto en "false"). Cuando sueltes un MovieClip en un área si los dos comparten el mismo número, es decir si mc2 se ha soltado sobre va2 pones el valor de la posición 1 del arreglo en "true", si el mc5 se ha situado sobre va3 pones el valor 4 del mismo arreglo en "false". Así podrías chequear cuando todos estén situados correctamente (cuando todos los valores del arreglo creado sean "true").

Hola de vuelta!. Cuando suelto los clips se posicionan en el centro del clip donde se soltaron, el tema es que en la escena hay otros clips que forman parte del decorado del ejercicio. Y si solto un clip sobre ellos se quedan encima.

Como puedo hacer para que se suelten sobre clips con determinados nombres?. Por ejemplo: va1, va2...

Puedes hacer un chequeo para ver si el nombre del clip donde has soltado a tu MovieClip contiene la cadena "va", si no la tiene que el clip regrese a su sitio al igual que si lo sueltas en el escenario:

Código ActionScript :

//---Soltar los clips 
this["mc"+i].onRelease = function():Void  {

   stopDrag();

   //---Detectar el clip donde se ha soltado 
   var drop:MovieClip = MovieClip(eval(this._droptarget));
   var dropName:String = drop._name;
   
   //---Si no se ha soltado encima de ningún MovieClip o su nombre no contiene "va"
   if (drop == null || dropName.indexOf("va") < 0) {

      this._x = this.iniX;
      this._y = this.iniY;

   //---Si se ha soltado encima de un MovieClip con nombre que contenga "va"
   } else {   
      
      this._x = drop._x;
      this._y = drop._y;      

   }

};

Buenisimo quedo.
Ahora solo me falta una cosa. Que aparezca un cartel de OK (mc_ok) una vez que se arrastren todos los mc. Me explicaste algo anteriormente sobre esto, pero no comprendi. Podrias explicarmelo mas detalladamente o darme un ejemplo?.
Gracias.

La idea es crear un arreglo con la misma cantidad de elementos que tus fichas y donde cada elemento esté en false, cada vez que sueltes una ficha si la ficha se ha soltado en un lugar correcto (el else de la condición) entonces sitúas el valor correspondiente del arreglo en true, si lo sueltas mal (la primera condición) entonces pones el valor correspondiente en false.

Una forma que puedes saber que index del arreglo debe variar cada ficha lo puedes saber por su nombre, la ficha mc1 varía el index 0 del arreglo, la ficha mc2 varía el index 1 del arreglo y así consecutivamente. "dropName" es el nombre de cada ficha con el método slice de la clase String puedes extraer el número solamente del nombre.

Cada vez que pongas una ficha (después de toda la comprobación y de variar el arreglo) haces una comprobación para saber si todo el arreglo está en true, una forma fácil es que utilices este proto de la clase Array, cuando el método indexOf con el valor false te devuelva -1 esto significará que todo el arreglo está en true y que todas tus fichas están situadas de forma correcta.

Muchas gracias por todoooooooooooooo!

Hola necesito ayuda tengo un problema similar pero estoy haciendo una galería de fotos y esta debe de arrastrar la foto y visualizarse grande luego arrastrarla y regresar al tamaño original aquí te dejo el codigo

var puceseInitX:Number = pu._x;
var puceseInitY:Number = pu._y;
var afroInitX:Number = afr._x;
var afroInitY:Number = afr._y;
var amInitX:Number = ama._x;
var amInitY:Number = ama._y;
var roInitX:Number = rosa._x;
var roInitY:Number = rosa._y;
var gabyInitX:Number = gab._x;
var gabyInitY:Number = gab._y;
var dagInitX:Number = da._x;
var dagyInitY:Number = da._y;
var vozInitX:Number = vo._x;
var vozInitY:Number = vo._y;
var teaInitX:Number = te._x;
var teaInitY:Number = te._y;


var pucese_color:Color = new Color(s_p);
pucese_color.setRGB(0xffffff);
var afro_color:Color = new Color(s_af);
afro_color.setRGB(0xffffff);
var am_color:Color = new Color(s_a);
am_color.setRGB(0xffffff);
var ro_color:Color = new Color(s_r);
ro_color.setRGB(0xffffff);
var gaby_color:Color = new Color(s_g);
gaby_color.setRGB(0xffffff);
var dag_color:Color = new Color(s_d);
dag_color.setRGB(0xffffff);
var voz_color:Color = new Color(s_v);
voz_color.setRGB(0xffffff);
var tea_color:Color = new Color(s_t);
tea_color.setRGB(0xffffff);

s_p.gotoAndStop("on");
s_af.gotoAndStop("on");
s_a.gotoAndStop("on");
s_r.gotoAndStop("on");
s_g.gotoAndStop("on");
s_d.gotoAndStop("on");
s_v.gotoAndStop("on");
s_t.gotoAndStop("on");


fle._visible = false;
function mostrarfle() {
Mouse.hide();
fle._visible = true;
fle.onMouseMove = function() {
fle._x = _xmouse;
fle._y = _ymouse;
updateAfterEvent();
};
}
function ocultarfle() {
fle._visible = false;
Mouse.show();
delete fle.onMouseMove;
}

pu.onRollOver = mostrarfle;
pu.onRollOut = ocultarfle;
afr.onRollOver = mostrarfle;
afr.onRollOut = ocultarfle;
ama.onRollOver = mostrarfle;
ama.onRollOut = ocultarfle;
rosa.onRollOver = mostrarfle;
rosa.onRollOut = ocultarfle;
gab.onRollOver = mostrarfle;
gab.onRollOut = ocultarfle;
da.onRollOver = mostrarfle;
da.onRollOut = ocultarfle;
vo.onRollOver = mostrarfle;
vo.onRollOut = ocultarfle;
te.onRollOver = mostrarfle;
te.onRollOut = ocultarfle;

pu.onPress = function() {
pu.startDrag();
};
pu.onRelease = function() {
pu.stopDrag();
if (pu.hitTest(s_p)) {
pu._x = s_p._x;
pu._y = s_p._y;
pu.gotoAndStop("on");
}
};



afr.onPress = function() {
afr.startDrag();
};
afr.onRelease = function() {
afr.stopDrag();
if (afr.hitTest(s_af)) {
afr._x =s_af._x;
afr._y = s_af._y;
afr.gotoAndStop("on");
}
};

ama.onPress = function() {
ama.startDrag();
};
ama.onRelease = function() {
ama.stopDrag();
if (ama.hitTest(s_a)) {
ama._x = s_a._x;
ama._y = s_a._y;
ama.gotoAndStop("on");
}
};


rosa.onPress = function() {
rosa.startDrag();
};
rosa.onRelease = function() {
rosa.stopDrag();
if (rosa.hitTest(s_r)) {
rosa._x = s_r._x;
rosa._y = s_r._y;
rosa.gotoAndStop("on");
}
};


gab.onPress = function() {
gab.startDrag();
};
gab.onRelease = function() {
gab.stopDrag();
if (gab.hitTest(s_g)) {
gab._x = s_g._x;
gab._y = s_g._y;
gab.gotoAndStop("on");
}
};

da.onPress = function() {
da.startDrag();
};
da.onRelease = function() {
da.stopDrag();
if (da.hitTest(s_d)) {
da._x = s_d._x;
da._y = s_d._y;
da.gotoAndStop("on");
}
};


vo.onPress = function() {
vo.startDrag();
};
vo.onRelease = function() {
vo.stopDrag();
if (vo.hitTest(s_v)) {
vo._x = s_v._x;
vo._y = s_v._y;
vo.gotoAndStop("on");
}
};

te.onPress = function() {
te.startDrag();
};
te.onRelease = function() {
te.stopDrag();
if (te.hitTest(s_t)) {
te._x = s_t._x;
te._y = s_t._y;
te.gotoAndStop("on");
}
};


retorno.onRelease= function(){
pu._x = puceseIntX;
pu._y = puceseIntY;
afr._x = afroIntX;
afr._y = afroIntY;
ama._x = amIntX;
ama._y = amIntY;
rosa._x = roIntX;
rosa._y = roIntY;
gab._x = gabyIntX;
gab._y = gabyIntY;
da._x = dagIntX;
da._y = dagIntY;
vo._x = vozIntX;
vo._y = vozIntY;
te._x = teaIntX;
te._y = teaIntY;
pu.gotoAndStop("off");
afr.gotoAndStop("off");
ama.gotoAndStop("off");
rosa.gotoAndStop("off");
gab.gotoAndStop("off");
da.gotoAndStop("off");
vo.gotoAndStop("off");
te.gotoAndStop("off");
};
sólo arrastra se visualiza grande pero no regresa al tamaño original