Home » Wiki Tutorials » Flash , Graphic & Design »

How to Create a drag-and-drop movie clip

text size: T | T Related software / service: Adobe Flash Professional CS4

Problem

Drag-and-drop is the action clicking and dragging an object to another position or onto another object. It's very populer to use drag-and-drop in flash. The following steps will tell you how to create a drag-and-drop movie clip.

Solution

Run Adobe Flash Professional CS4 and create a new fla file.
Create a yellow round. Right click the circle, choose "Convert to Symbol".
Input the symbol's name and choose Movie Clip, and be sure we set the registration point in the center.
Then enter the instance name in the "Properties" panel.
GotoInsert -> Timeline -> Layer to insert a new layer. Then create a grey rectangle in this layer. Convert it to a movie clip like we dealt with the yelow circle.
Click Window in the menu bar and select "Actions" to open the Actions panel. Enter the following code:
onMouseMove = function(){
updateAfterEvent();
}
yellowcircleonPress = function(){
startDrag(this,true,100,75,450,325)
}
yelowcircle.onRelease = function(){
this.stopDrag();
}
yelowcircle.onReleaseOutside = function(){
this.stopDrag();
}

("100,75,450,325" above is the position of the grey rectangle.)
Goto Insert -> Timeline -> Layer to insert a new layer. Then create a green circle in this layer. Convert it to a movie clip like we dealt with the yelow circle.
Goto Insert -> Timeline -> Layer to insert a new layer. Then create a flash Dynamic Text in this layer. Named it "result".
Click Window in the menu bar and select "Actions" to open the Actions panel. Enter the following code:
function checkTarget(drag) {
if (drag.hitTest(greencircle)) {
result.text="Bingo!";
}
else {
resulet.text="Missed";
}
}
Go to File->Export->Export Movie to export the clip to a swf file.