Tutorial FLASH - Tutorial para hacer un arrastre más fluido de objetos en Flash. startDrag mejorado.

Versión Flash: MX y superiores   |   Compatible con ActionScript 1.0 y 2.0   |   Nivel: Medio   |   Hits: 72267

Para arrastrar objetos en Flash disponemos del método startDrag. Esta sentencia, que apenas ha variado desde las primeras versiones de Flash, depende de la velocidad de fotogramas que hayamos definido en la película. Por tanto, si hacemos nuestra película a 12 fps el movimiento de arrastre será menos fluido que si fijamos 36 fps.

En este tutorial vamos a arrastrar un clip libremente sin depender de la velocidad de reproducción de los fotogramas. Para ello, vamos a definir un método startArrastre, que va se va a apoyar en el controlador de evento onMouseMove.

COMO HACERLO.
Realmente vamos a definir dos métodos, el mencionado startArrastre y stopArrastre, que van a reemplazar a startDrag y stopDrag respectivamente. Además, los métodos se van a crear como prototipos de clase por lo que van a estar disponibles para cualquier instancia de movieclip de la película.

Ponemos las siguientes acciones en el fotograma:

MovieClip.prototype.startArrastre = function(centrar) {
delete this.onMouseMove;
// el parámetro centrar tiene el mismo
// comportamiento que en el startDrag clásico
if (centrar) {
var desfaseX:Number = 0;
var desfaseY:Number = 0;
} else {
var desfaseX:Number = _xmouse-this._x;
var desfaseY:Number = _ymouse-this._y;
}
// mientras tenga pulsado y detecte movimiento
// se actualiza la posición del clip
this.onMouseMove = function() {
this._x = _xmouse-desfaseX;
this._y = _ymouse-desfaseY;
updateAfterEvent();
};
};
MovieClip.prototype.stopArrastre = function() {
delete this.onMouseMove;
};

Si analizais el código vereis que el arrastre se produce dentro de this.onMouseMove y gracias a la función updateAfterEvent, se actualiza cuando el puntero se mueve, no cuando se pasa de fotograma.

Ahora creamos dos botones iguales. En el botón del clip de la izquierda ponemos el código de arrastre de toda la vida:

on (press) {
this.startDrag(true);
}
on (release, releaseOutside) {
stopDrag();
}

En el botón del clip de la derecha ponemos el código empleando los nuevos métodos:

on (press) {
this.startArrastre(true);
}
on (release, releaseOutside) {
this.stopArrastre();
}

Ejecutad la película. Haced la prueba y arrastrar los dos clips ¿cuál va más fluido?

Con esto aumentamos la suavidad del movimiento, pero si sobrecargamos nuestra película en exceso también apreciaremos saltos en el arraste.

Podéis descargaros este mismo ejemplo y ver cómo funciona: ejemplo_drag.fla