Comunidad de diseño web y desarrollo en internet online

como arrastrar imagenes y posicionarlas encima de otras

Citar            
MensajeEscrito el 12 Nov 2009 04:19 pm
Hola he leido el tutorial de arrastre de objetos y he conseguido arrastrar una imagen y posicionarla encima de otra pero me surge el problema cuando tengo más de una imagen. Imaginemos que tengo tres círculos uno rojo, otro azul y otro verde y tengo tres objetos cada uno de un color y quiero arrastrar los objetos al circulo de su mismo color.
Pelota roja lápiz verde cielo azul


circulo azul círculo rojo circulo verde



Gracias por la ayuda

Por encarni10

24 de clabLevel



 

msie7
Citar            
MensajeEscrito el 12 Nov 2009 04:31 pm
Pega el trozo de código en el cual te quedas atascado a ver si podemos ayudarte.

Así a bote pronto no sabría que decirte...

Por ur!

256 de clabLevel



 

Barcelona

chrome
Citar            
MensajeEscrito el 13 Nov 2009 12:38 am
Hola,

Creo que lo que quieres hacer es algo asi como un jueguito para niños, y si no tienes nada de codigo hecho y esperas que te hechemos la mano desde cero, pues que mal, pero igual te ayudamos.

Este es mi codigo y lo que haces es mover un objeto, en mi ejemplo un globo y cuando esta encima de un cuadro azul, mostrara otro MC que indica que la accion es correcta, si retiras el globo del cuadro azul, entonces el cuadro desaparece.

Código ActionScript :

bien._visible = false;
Globo.onPress = function (){
   Globo.swapDepths (totalDepth + 1);
   startDrag (Globo);
};
Globo.onRelease = function(){
   stopDrag();
   if (this.hitTest(CAzul)) {
      bien._visible = true;
      bien.swapDepths (totalDepth + 1);
   }
   else {
      bien._visible = false;
   };
};



El swapDepths (totalDepth + 1); hara que el objeto seleccionado se mueva al frente de todos los demas objetos.


Espero te sirva al menos de ejemplo.
David Suárez

Por holler

65 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Nov 2009 08:51 am

holler escribió:

Hola,

Creo que lo que quieres hacer es algo asi como un jueguito para niños, y si no tienes nada de codigo hecho y esperas que te hechemos la mano desde cero, pues que mal, pero igual te ayudamos.

Este es mi codigo y lo que haces es mover un objeto, en mi ejemplo un globo y cuando esta encima de un cuadro azul, mostrara otro MC que indica que la accion es correcta, si retiras el globo del cuadro azul, entonces el cuadro desaparece.

Código ActionScript :

bien._visible = false;
Globo.onPress = function (){
   Globo.swapDepths (totalDepth + 1);
   startDrag (Globo);
};
Globo.onRelease = function(){
   stopDrag();
   if (this.hitTest(CAzul)) {
      bien._visible = true;
      bien.swapDepths (totalDepth + 1);
   }
   else {
      bien._visible = false;
   };
};



El swapDepths (totalDepth + 1); hara que el objeto seleccionado se mueva al frente de todos los demas objetos.


Espero te sirva al menos de ejemplo.
David Suárez







El codigo que yo utilice fue este
En el primer flame coloque esto para indicar las coordenadas iniciales del clip1


stop();
clip1inicioX = clip1._x;
clip1inicioY = clip1._y;


yo cree dos clip que asigne un nombre de instancia clip1 que es el que se arrastra y clip 2 al que permanece quieto
dentro del clip1 creo un boton y le asigno el siguiente codigo
on (press) {
startDrag("_root.clip1", true);}
on (release) {
stopDrag(); if (_root.clip1.hitTest(_root.clip2)) {
_root.clip1._x = _root.clip2._x;
_root.clip1._y = _root.clip2._y; }
else { _root.clip1._x = _root.clip1inicioX;
_root.clip1._y = _root.clip1inicioY;
}
}

y me sale estupendo pero y si tengo otros objetos por ejemplo ademas de un clip1 y clip2 tengo un clip3 y clip4 donde el clip3 encajaría dentro del clip4
intente modificar el codigo pero no lo consigo
gracias

Por encarni10

24 de clabLevel



 

msie7
Citar            
MensajeEscrito el 13 Nov 2009 08:51 am

ur! escribió:

Pega el trozo de código en el cual te quedas atascado a ver si podemos ayudarte.

Así a bote pronto no sabría que decirte...



El codigo que yo utilice fue este
En el primer flame coloque esto para indicar las coordenadas iniciales del clip1


stop();
clip1inicioX = clip1._x;
clip1inicioY = clip1._y;


yo cree dos clip que asigne un nombre de instancia clip1 que es el que se arrastra y clip 2 al que permanece quieto
dentro del clip1 creo un boton y le asigno el siguiente codigo
on (press) {
startDrag("_root.clip1", true);}
on (release) {
stopDrag(); if (_root.clip1.hitTest(_root.clip2)) {
_root.clip1._x = _root.clip2._x;
_root.clip1._y = _root.clip2._y; }
else { _root.clip1._x = _root.clip1inicioX;
_root.clip1._y = _root.clip1inicioY;
}
}

y me sale estupendo pero y si tengo otros objetos por ejemplo ademas de un clip1 y clip2 tengo un clip3 y clip4 donde el clip3 encajaría dentro del clip4
intente modificar el codigo pero no lo consigo
gracias

Por encarni10

24 de clabLevel



 

msie7
Citar            
MensajeEscrito el 14 Nov 2009 06:18 pm

encarni10 escribió:


El codigo que yo utilice fue este
En el primer flame coloque esto para indicar las coordenadas iniciales del clip1

stop();
clip1inicioX = clip1._x;
clip1inicioY = clip1._y;

yo cree dos clip que asigne un nombre de instancia clip1 que es el que se arrastra y clip 2 al que permanece quieto
dentro del clip1 creo un boton y le asigno el siguiente codigo
on (press) {
startDrag("_root.clip1", true);}
on (release) {
stopDrag(); if (_root.clip1.hitTest(_root.clip2)) {
_root.clip1._x = _root.clip2._x;
_root.clip1._y = _root.clip2._y; }
else { _root.clip1._x = _root.clip1inicioX;
_root.clip1._y = _root.clip1inicioY;
}
}

y me sale estupendo pero y si tengo otros objetos por ejemplo ademas de un clip1 y clip2 tengo un clip3 y clip4 donde el clip3 encajaría dentro del clip4
intente modificar el codigo pero no lo consigo
gracias


Okay, veamos como te funciona con dos objetos, pero antes que nada te recomiendo unas cosas:
[*] Cuando programes, anida las cosas, esto es mas o menos asi:
Tu codigo:

Código ActionScript :

on (press) {
startDrag("_root.clip1", true);}
on (release) {   
stopDrag();   if (_root.clip1.hitTest(_root.clip2)) {
      _root.clip1._x = _root.clip2._x;
      _root.clip1._y = _root.clip2._y;   } 
else {      _root.clip1._x = _root.clip1inicioX;      
_root.clip1._y = _root.clip1inicioY;
   }
}


Mi codigo corrigiendo el tuyo:

Código ActionScript :

on (press) {
    startDrag("_root.clip1", true);
};
on (release) {   
    stopDrag();
    if (_root.clip1.hitTest(_root.clip2)) {
      _root.clip1._x = _root.clip2._x;
      _root.clip1._y = _root.clip2._y;
    } 
    else {
        _root.clip1._x = _root.clip1inicioX;      
        _root.clip1._y = _root.clip1inicioY;
   };
};


Para todos los demas que leemos tu codigo, y para ti cuando te acostumbres, te va a ser mas facil localizar los errores.
[*] Y como plus adicional, si aprendes a comentar lo que haces, cuando vuelvas a revisar tu codigo sabras que hace cada cosa y no perderas tiempo descifrando que hiciste en esos If, else u en otras partes del codigo.

Ahora va mi posible solucion a tu problema:

Tenemos cuatro MC, a cada uno lo llamare para esta practica con un nombre diferente y facil de identificar
Objetos que se mueven: MC_Obj1, MC_Obj2
Objetos que detectan la colision: MC_Col1, MC_Col2
Aviso de que han colisionado: bien
Debo aclara que ninguno es boton, todos son movieClips y en total son cinco elementos
Codigo que va en el primer (y unico) frame:

Código ActionScript :

// --- MC_Obj1 colisiona con MC_Col1
// oculta el aviso de colision para que no sea visible al comienzo
bien._visible = false;
// Instruccion para arrastrar MC_Obj1 y traerlo al frente de todos los demas movieClips
MC_Obj1.onPress = function (){ 
   MC_Obj1.swapDepths (totalDepth + 1); 
   startDrag (MC_Obj1); 
}; 
// Instruccion para dejar de arrastrar MC_Obj1, verifica que haya colisionado con MC_Col1, y
// en caso de ser correcto despliega el aviso de colision hasta el frente de todos los demas movieClips
MC_Obj1.onRelease = function(){ 
   stopDrag(); 
   if (this.hitTest(MC_Col1)) { 
      bien._visible = true; 
      bien.swapDepths (totalDepth + 1); 
   } 
   // en caso de no haber colisionado con el objeto correcto el aviso de colision no sera mostrado
   else { 
      bien._visible = false; 
   }; 
}; 

// --- MC_Obj2 colisiona con MC_Col2
// oculta el aviso de colision para que no sea visible al comienzo
bien._visible = false;
// Instruccion para arrastrar MC_Obj2 y traerlo al frente de todos los demas movieClips
MC_Obj2.onPress = function (){ 
   MC_Obj2.swapDepths (totalDepth + 1); 
   startDrag (MC_Obj2); 
}; 
// Instruccion para dejar de arrastrar MC_Obj2, verifica que haya colisionado con MC_Col2, y
// en caso de ser correcto despliega el aviso de colision hasta el frente de todos los demas movieClips
MC_Obj2.onRelease = function(){ 
   stopDrag(); 
   if (this.hitTest(MC_Col2)) { 
      bien._visible = true; 
      bien.swapDepths (totalDepth + 1); 
   } 
   // en caso de no haber colisionado con el objeto correcto el aviso de colision no sera mostrado
   else { 
      bien._visible = false; 
   }; 
}; 



Segun yo, asi deberia quedar, pues asi lo tengo funcionando en mi FLA.

Por holler

65 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 28 Sep 2010 08:31 pm
Listo, aqui te posteo la respuesta con todo y archivo:
http://foros.cristalab.com/tutorial-como-arrastrar-imagenes-y-posicionarlas-cs3-t91457/

Por holler

65 de clabLevel



Genero:Masculino  

firefox

 

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