Tag: design

I find that Drag and Drop is the most intuitive form of user interaction (at least using a mouse). Actionscript has some of this functionality built in, with the interactive functions startDrag and stopDrag, these can help make our coding pretty easy. If you are transitioning from as2, the code was incredibly simple:

Actionscript2

[cc lang=”actionscript”]
on (press) {
startDrag (this);
}
on (release, releaseOutside) {
stopDrag ();
}
[/cc]
On the movie clip action panel you’d just put that script, which is actually pretty readable even if you don’t know code. The releaseOutside is to keep from the clip missing the release event, because sometimes if a user released the mouse button but was not currently over the clip being dragged for whatever reason, it will not stop dragging.

Actionscript 3

Some things have changed with as3, other than the actual coding structure, the biggest change for me doing drag and drop in the new actionscript was that the mouse events have changed. There is no more a press or release. They were replaced with, MOUSE_DOWN and MOUSE_UP. There is no more releaseOutside either and this one is a little more complicated to find among the new MouseEvent list.
Leaving it out works, but we still have the same problem. Check out the working example below and try dragging the red ball to the green or yellow one and drop it there. Since the green is above the red in the layer sequence, the mouse is over the green and when the MouseEvent.MOUSE_UP fires, it’s not on the red ball but on the green, so we don’t get to the code that drops the red ball. So the red ball code basically has times when the dragging sticks even after we release the mouse button. Not to mention the dragging is very jumpy!
[cc lang=”actionscript”]
ballRed.addEventListener(MouseEvent.MOUSE_DOWN, dragRed);
ballRed.addEventListener(MouseEvent.MOUSE_UP, dropRed);
function dragRed(e:MouseEvent):void{
ballRed.startDrag();
}
function dropRed(e:MouseEvent):void{
ballRed.stopDrag();
}
[/cc]

Using the Mouse Move event will help us to customize our behavior a bit more. Plus I wanted to get a more abstract level to it, so I could apply the event listeners to any display object and use the event properties to target the right clips. We begin the drag with the Mouse Down, and the create some other eventListeners for the stage that will watch the Mouse Move and Up events. So clicking on the green or yellow ball, fires the grabMe function which sets the me variable (which will hold any object) to the current target of the event, which should always be the object that you click. So we are using the same code for both the green and yellow ball. I’m a big fan of code consolidation and reuse, it takes a little more effort, but the code is much more clean and portable even. Then we add the event listeners for the stage on MOUSE_MOVE and MOUSE_UP. So first, mthe dragMe function, just says to update after event. This makes the animation smoother cause it only updates the display after the event completes it’s process. Then the drop me function is attached to the stage, so anywhere you release the mouse, the object will stop dragging, plus we remove the stage event listeners and add back the listener for the original object (me). Note the buttonMode property as well, this will make the cursor turn to a hand when you hover that object.
[cc lang=”actionscript”]
ballYellow.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
ballYellow.buttonMode = true;
ballGreen.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
ballGreen.buttonMode = true;

var me:Object;
function grabMe(e:MouseEvent):void{
me = e.currentTarget;
me.removeEventListener(MouseEvent.MOUSE_DOWN, grabMe);
me.startDrag();
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMe);
stage.addEventListener(MouseEvent.MOUSE_UP, dropMe);
}
function dropMe(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);
me.stopDrag();
me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
}
function dragMe(e:MouseEvent):void {
e.updateAfterEvent();
}
[/cc]
This functionality is much smoother and then when I want to add more code to the dragging or dropping, I have a place to do it already!

Example

[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2009/04/as3dragdrop-ball.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”550″ height=”400″]

[/kml_flashembed]

Source

as3dragdrop-ball.fla