Building A Draggable Menu
The next step is assemble or build each of the menus and submenus into separate clips. We’ll start with the main menu, or the menu bar. I’ve made a Symbol called clip.menu, which will ultimately hold all of the separate elements that make up the menu. At this point, it consists of an Instance of static.text.block, set to a Tint Color of #006666 at 100%. On top of the bar is an Instance of static.menu, an Instance of clip.arrow, and another Instance of static.block, scaled to just short of the height of the menu bar and to a width of one (1) pixel.

If you’d like follow along, open m0001.fla and edit the Symbol clip.menu.

Now we need to make this menu clip draggable. To so, the user must press and hold the mouse button over the menu bar. With the mouse button pressed, the user can drag the menu around. When the user releases the mouse button, the menu is dropped or placed at the new location. For interactivity with the mouse we need to use a button. Let’s drop an Instance of button.empty over the elements assembled in clip.menu thus far. It will cover the entire height of the menu bar, but will stop in width just short of the arrow. Why? Because we’ll need to place a different button over the arrow to control the expansion and collapse of the menu items.

Select the Instance of the button on the Stage, not the Timeline. Open the Actions Panel and make sure its called Object Actions (which indicates that you applying script to an Instance rather than a key frame.) We’ll start with making the menu draggable when the user presses and holds the mouse button. Input the following script:

on (press) {
this.startDrag();
}

Let’s examine this code (we’ll ignore the curly braces, just keep in mind that the curly braces contain code that is executed with particular events, such as the on (press) event):

on (press)
This is the mouse event that triggers the code. If you are not familiar with ActionScript and ActionScript syntax the rest of this article might not make sense to you. I recommend you read through my Flash 5 course at TrainingTools.com, particularly the ActionScript (Interactivity with ActionScript) and Timelines and ActionScript (Controlling Timelines with ActionScript) sections (chapters 16 & 17.)

this.startDrag();
This statement assigns the startDrag method (a method of the Movie Clip Object) to this particular Timeline or Instance, the Timeline of clip.menu. The Timeline is referred to as this, meaning this particular Timeline as opposed to other Instances that may be in the movie. The startDrag method does have some arguments that can constrain the area where the user can drag the Instance, but at this point, we’ll leave the arguments empty.

If you’re following along, test the movie or run m0002.swf. Drag the menu around. You’ll notice that the menu is draggable, but once pressed, you cannot drop it! We need to add the script to stop the menu from dragging when the user releases the mouse button.

Return to the Flash movie and select the button Instance (in the button.drag Layer of clip.menu.) Below the on (press) Event we need to add the following script:

on (release, releaseOutside) {
stopDrag();
}

Our Event Handler is release and releaseOutside, meaning that when the user releases the mouse button, either over top or outside of the button’s hit area the following action will be executed. The action being executed is stopDrag(). Again, this a a method of the Movie Clip Object that will stop the Instance currently being dragged.

Note: Only one Instance at a time can be dragged.

If you’re following along, test the movie or run m0003.swf. Now you can drag and drop the menu around the screen, just as you can drag Panels around in the Flash Environment.
We’re done making the menu draggable for the time being. Later we’ll add some constraint parameters to limit the movement of the menu.