comicGeek

This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org.

View all articles by comicGeek

Give your drop target movie clip and the draggable movieclips with distinctive instance names. Here I used d1, d2 and d3 for the draggable disks and area51 for the drop target.

Double click on the first disk movie clip and select the button. Open the actions panel and place the following action:

on (press) {
        startDrag(this);
}
on (release) {
        stopDrag();
        if (eval(this._droptarget) == _root.area51) {
                this._visible = 0;
                this._x = 50;
                this._y = 20;
                _root.d2._visible = 1;
                _root.d3._visible = 1;
                _root.contents.sec.endY = 0;
        } else {
                this._x = 50;
                this._y = 20;
        }
}

You use the same code in dragging a movie clip. We just add a few code after the onRelease event. We check if the movie clip we dragged (this) is dropped on the specified movie clip (area51 in the root timeline) using the property _droptarget. the usual syntax to do this is:

if (eval(this._droptarget) == _root.area51) {
        this._visible = 0;
        this._x = 50;
        this._y = 20;
        _root.d2._visible = 1;
        _root.d3._visible = 1;
        _root.contents.sec.endY = 0;

You can still use this slash notation technique but I prefer to use dot notation so I will not be confused. When using the dot notation we use the eval function and omit the quotation marks.

The next thing is placing in the actions that will be performed if the _droptarget condition is true. I want the movie clip to become invisible and go back to its original position. I also want to make the other disks become visible when this movie clip is dropped in the target. This is what I used to create the illusion that the movie clip is still loaded. It is also here where you add the script that controls the main contents. In the exmple I used a movie clip that moves in easing towards a new position defined by the variable endY.

_root.contents.sec.endY = 0;

The main content, which is a masked movie clip, has the following script:

onClipEvent (load) {
        div = 5;
}
onClipEvent (enterFrame) {
        _y += (endY-_y)/div;
}

You can use any command: load movies, open a new window or anything that you want to happen when the dragged object is dropped over the drop target.

If the movie clip is dropped in the wrong place or not over the drop target, I want it to go back to its original position, hence:

} else {
        this._x = 50;
        this._y = 20;
}
}

Open the other disk movie clips and add the same actions but change the x and y positions that they will be returned after the conditions are meet since they will have different x and y positions on the stage. Also change these:

//for d1
_root.d2._visible = 1;
_root.d3._visible = 1;

//for d2
_root.d1._visible = 1;
_root.d3._visible = 1;

//for d3
_root.d1._visible = 1;
_root.d2._visible = 1;

You can add additional disks but they must be modified duplicates because they contain different actions.