Tutorial details: Draggable and drop-able disks for a menu system
Written by: comicGeek [email:keldesigns@philwebinc.com] | www.KELdesigns.vze.com
Time: 30 mins. to 1 hour
Difficulty Level: Intermediate
Requirements: Flash 5
Topics Covered: _droptarget movie clip property for non-conventional menu system
Assumed knowledge: movie clip properties, event handlers, expressions and equations, variables, instance names, dragging movie clips, invisible buttons, symbols and instances

 

Click to download source file.

Tired of conventional menu systems of buttons and the like? Yeah? Why not try a menu system like the one I made above? It's really very easy when you disect the code. I have included a Barney's type of content movement to show what simple actionscript can do when you make your imagination and creativity work.

Let's start!

First, prepare all the necessary elements that you need in your movie: the object to be dragged, the target movie clip, the borders, the texts...etc. It is always good to visualize the final output of a project so that you can create the necessary elements before hand so that later you will be focused on arranging them in your movie. More like hiring the actors or casting for a role in a movie!

Make a drawing of a diskette or cd, select your drawing and convert it to a Graphic Symbol. Make an invisible button that is of the same size as the diskette or cd that you made. Place that invisible button on top of an instance of that diskkete or cd.Select both, then convert it to a movie clip by pressing F8.

Make 2 duplicates of this movie clip. Why do we need duplicates? We need duplicates since each button inside the movieclip will contain different actions.

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:

[as]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;
}
}
[/as]

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:

[as]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;
[/as]

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.

[as]_root.contents.sec.endY = 0;
[/as]

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

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

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:

[as]} else {
this._x = 50;
this._y = 20;
}
}
[/as]

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:

[as]//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;
[/as]

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