Simple Flash Drag and Drop
16 November, 2008
Drag and drop in Flash is quite simple, in both ActionScript 2 and ActionScript 3. We will look at how to make very simple drag and drop interactions in both languages.
ActionScript 2
Flash has built in commands for drag and drop, and we will use these. Essentially, everything revolves around two commands: object.startDrag(); and object.stopDrag();. These, obviously, start the drag and stop the drag. We just need to figure out how and when to call these.
What we want to do is start the drag when the user clicks down on the object and stop the drag when they release it. So we will be using the listeners onMouseDown for when the user presses down on the object and onRelease for when they release it.
And there we pretty much have it - object.startDrag(); with the onMouseDown event, and object.stopDrag(); with the onRelease event.
So with a basic Flash file and a simple object on the stage (which we have given an instance name of block_mc) we only need a few lines of code to get it working. The code is below:
block_mc.onMouseDown = function() {
this.startDrag();
}
block_mc.onRelease = function() {
this.stopDrag();
}
Above we can reference block_mc through the keyword this so it is not necessary to enter the instance name explicitly, although it would work just the same if the instance name was used instead. These simple lines of code give us the interactivity below:
You can download the source files needed to create this interaction below:
This article serves only as an introduction to drag and drop in Flash, and once you have the above functionality working there are things to think about. For example, above we have increased the frame rate to 30fps to make the movement smoother than the default 12fps. Also, there are issues when the button is released outside of the stage and if the block is dragged outside of the stage. These issues can be fixed with some more logic applied in areas but we are only dealing with the basics at this stage.
ActionScript 3
Flash has built in commands for drag and drop, and we will use these. Essentially, everything revolves around two commands: object.startDrag(); and object.stopDrag();. These, obviously, start the drag and stop the drag. We just need to figure out how and when to call these.
What we want to do is start the drag when the user clicks down on the object and stop the drag when they release it. So we will be using the listeners MouseEvent.MOUSE_DOWN for when the user presses down on the object and MouseEvent.MOUSE_UP for when they release it.
And there we pretty much have it - object.startDrag(); with the MouseEvent.MOUSE_DOWN event, and object.stopDrag(); with the MouseEvent.MOUSE_UP event.
So with a basic Flash file and a simple object on the stage (which we have given an instance name of block_mc) we only need a few lines of code to get it working. The code is below:
block_mc.addEventListener(MouseEvent.MOUSE_DOWN, start_drag);
function start_drag(evt:MouseEvent):void {
block_mc.startDrag();
}
block_mc.addEventListener(MouseEvent.MOUSE_UP, stop_drag);
function stop_drag(evt:MouseEvent):void {
block_mc.stopDrag();
}
What we do here is attach the listeners to the block_mc, and assign functions to call when that event is fired. So we listen for the MouseEvent.MOUSE_DOWN event and then call start_drag when it happens. And we listen for the MouseEvent.MOUSE_UP event and then call stop_drag when it happens.
These simple lines of code give us the interactivity below:
You can download the source files needed to create this interaction below:
This article serves only as an introduction to drag and drop in Flash, and once you have the above functionality working there are things to think about. For example, above we have increased the frame rate to 30fps to make the movement smoother than the default 12fps. Also, there are issues when the button is released outside of the stage and if the block is dragged outside of the stage. These issues can be fixed with some more logic applied in areas but we are only dealing with the basics at this stage.
ferrari_chris
Add your comment on this article below:
Sorry, there's an error with your form entries. We really appreciate your comment, so please try again.
Form submitting now...