Create a smooth startDrag() in Flash
Let's face it, startDrag() has been around since wow....flash 4 I think? Perhaps Flash 3, not sure exactly. Sure it serves its purpose still, but one thing that has always bugged me about it ever since updateAfterEvent() became available, is the fact that startDrag is dependant of the frame rate.
I put together a simple MovieClip prototype that would work the same way as startDrag except using updateAfterEvent. It is pretty basic so you could probably add a lot to it, but it does perform the simple task of draggable Objects without being dependant upon the frame rate!
-
MovieClip.prototype.startSmoothDrag = function (lockCenter:Boolean) {
-
if (lockCenter == undefined) var lockCenter:Boolean = false;
-
var thisXMouse:Number = this._xmouse;
-
var thisYMouse:Number = this._ymouse;
-
var setPosition:Function = function (target:Object)
-
{
-
target._x = target._parent._xmouse - ((lockCenter) ? 0 : thisXMouse);
-
target._y = target._parent._ymouse - ((lockCenter) ? 0 : thisYMouse);
-
};
-
setPosition(this);
-
this.onMouseMove = function () {
-
setPosition(this);
-
updateAfterEvent();
-
};
-
};
-
-
MovieClip.prototype.stopSmoothDrag = function () {
-
this.onMouseMove = null;
-
};
-
-
myDraggableMC.onPress = function () {
-
this.startSmoothDrag(true);
-
};
-
-
myDraggableMC.onRelease = myDraggableMC.onReleaseOutside = function () {
-
this.stopSmoothDrag();
-
};
I have also put together a simple demo of this in use, to give you an idea of how it can be effective. Notice below that the fps (frames per second) is set to 1, which is slow if you didn't already know :). Notice how the smooth Dragable obejct is really smooth, while the regular startDrag() method is dependant on that horrifying 1 fps!
Like I said, it is pretty simple but feel free to add to it what you want!
Andrew said,
December 7, 2007 @ 7:28 pm
Nice, but I’d really appreciate you adding the ability to constrain the draggable item as others have mentioned. This is a great function but without that addition it’s not so useful.
Chris said,
November 6, 2007 @ 5:20 am
Is this for AS1? I keep getting an error with the updateAfterEvent() code. Does anyone know how to achieve the same effect but using CS3?
tomi said,
September 12, 2007 @ 9:30 pm
How can I add boundries? the fuction only takes the boolean lock center
Wouter said,
July 4, 2007 @ 8:36 am
Hey Steven,
Thanks for publishing this code, it works great, I finally have a smooth drag&drop!
Greets
Jordan said,
March 8, 2007 @ 1:50 pm
so whats the trick for boundries? i have it kinda working, but it seems buggy.
Steven Hargrove said,
March 8, 2007 @ 10:16 am
I blogged about it way back, here it is: http://www.stevenhargrove.com/ig-syntax-hiliter/ — great plugin
Shane said,
March 7, 2007 @ 9:14 am
Great post!
What do you use for displaying your code within a blog entry? I have been looking for something similar.
Thanks.
john docking said,
February 19, 2007 @ 5:53 am
I have just stumbled accross this code from a search engine request. Thanks for the code is fulfills the criteria perfectly.
Thanks again.
P.S. I’ll Be Back!
contrid said,
December 24, 2006 @ 7:34 am
Hi there,
This is great. Extremely useful.
Thanks for the code.
derek said,
November 6, 2006 @ 4:37 pm
Hey,
Just wanted to say, simple as you said, but super useful. One thing I added that others may find useful is the left, top, right, bottom bounds so that it works in the same way as startDrag() but much smoother.