Cristalab

Estás en: Cristalab > Tutoriales > Tutorial de arrastre y pegado entre Movie Clips

Tutorial de arrastre y pegado entre Movie Clips

Por: Freddie
24 de Febrero del 2005
Flash Novatos
46144 de clabLevel
Otros artículos de Freddie
71,614 visitas
Tutorial originalmente creado por dasso de Nomaster

El siguiente tutorial sirve para poder arrastrar movieclips (de ahora en adelante clips), y poder encajarlos en otros siempre y cuando pasemos por encima de ellos

Este código sirve para juegos, por ejemplo para vestir a un muñeco de nieve o ponerle distintas piezas a un coche, o en definitiva para lo que se nos ocurra.

Así que vayamos a la parte divertida, el código :)

Este ejemplo consistirá en dos clips, uno que será el que se va a arrastrar, y otro que será el que esté quieto en el escenario y que servirá de referencia cuando el primero pase por encima de el.
Por lo que a cada uno le pondremos un nombre de instancia, al primero le ponemos clip1 y al segundo clip2

Hay que resaltar que el clip2 debe estar debajo del clip1, por lo que ponemos cada uno en un layer, estando el clip2 debajo del clip1.

En nuestra película principal ponemos en el frame 1: 

stop();
clip1inicioX = clip1._x;
clip1inicioY = clip1._y;
En donde:

clip1inicioX y clip1inicioY son las coordenadas iniciales del clip1.
Estas nos servirán más adelante por eso las declaramos ahora.

El stop() se pone porque toda la acción transcurrirá en un solo frame.

Para hacer el drag 'n' drop de un movie clip se pone un botón dentro de un clip y con éste conseguimos arrastrar el clip

Ahora vamos al botón que hemos creado dentro del clip1, y en este le ponemos las siguientes acciones:

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;
	}
}
Aquí vemos que estamos arrastrando el clip1, pero la parte que realmente importa en cuando lo soltamos.
Una vez que lo hemos soltado con stopDrag(), hacemos dos comprobaciones:

Primera comprobación:

if (_root.clip1.hitTest(_root.clip2)) {
	_root.clip1._x = _root.clip2._x;
	_root.clip1._y = _root.clip2._y;
}
Esto quiere decir que comprobamos si el clip1 ha hecho colisión con el clip2.
Si es así entonces lo que hacemos es ponerle al clip1 las coordenadas del clip2, por lo que parece que el primero se "pega" al segundo cuando lo soltamos.

Por último la segunda comprobación:

 else {
	_root.clip1._x = _root.clip1inicioX;
	_root.clip1._y = _root.clip1inicioY;
}
Aquí es el caso en que los 2 clips no hacen colisión, por lo que luego de soltarlo, el clip1 vuelve su posición inicial, es por eso que al principio declarabamos la posición inicial de éste.

Información adicional

Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Tutoriales relacionados