Making Dragable Movies / Menues

Prepare the Flash Workspace for a Draggable Interface

Before you start drawing shapes or writing code, set up a clean working environment. Launch Adobe Flash (or Adobe Animate if you’re on a newer version) and choose File > New. Pick a document type that matches the resolution you plan to use for your project, then click OK. In the workspace that opens, locate the Stage, Properties, and Library panels. If any panel is missing, open it from Window > Panels or use the keyboard shortcuts provided in the help menu.

In the timeline, ensure you’re on the first frame of Scene 1. A blank frame is all you need to start with. Turn on the Snap to Grid feature in View > Snap to Grid to keep your shapes aligned, and enable the Show Guides option if you’d like to create custom reference lines.

Give your new file a descriptive name - something like “DraggableMenu.swf” or “MenuDemo” is a good start. Save the file immediately with File > Save or Ctrl+S. You’ll want to keep a reference to this file throughout the tutorial so that you don’t lose any progress.

Now that the base file is ready, it’s time to create the container that will hold the menu. Select the Shape Tool from the toolbar, choose a solid fill color that stands out against the stage background, and drag a square onto the stage. Position it roughly where you’d like the menu to appear, typically the center or left side of the screen. This square will become the visual frame of your draggable window.

Once the shape is on the stage, double‑click the square to highlight it. Press F8 or right‑click and select Properties. In the Symbol Properties dialog, rename the symbol from the default “Symbol 1” to something clear like DragBox. This naming convention helps keep track of components, especially if you add more than one draggable window later. Make sure that the Type dropdown says Movie Clip and click OK to convert the shape into a movie clip.

With the box now a movie clip, give it an instance name for later reference. Click Window > Panels > Instance or press Ctrl+I, and type dragbox into the input field. This instance name will appear in the Instance Name column of the Properties panel. The instance name is what you’ll target in your ActionScript when you want the object to move.

At this stage, you should see the square labeled DragBox in the Library. Double‑click the DragBox entry to open its own timeline. The top-left corner will display the name of the symbol and the current scene, e.g., “DragBox - Scene 1.” This nested timeline is where you’ll build the draggable bar and any additional content inside the window.

Within the DragBox timeline, create two new layers: one named DragBox for the main body of the window and another named DragBar for the header area that users will click to drag. Keep the DragBar layer above the main body layer so that it remains on top of the window contents.

On the first frame of the DragBar layer, use the Shape Tool to draw a smaller rectangle - this will act as the grab area for dragging. Style it with a darker shade or a contrasting color to signal interactivity. Make sure the rectangle covers the entire top portion of the window so users can click anywhere in that area to initiate a drag.

After drawing the grab rectangle, repeat the Symbol Properties step: press F8, rename the symbol to DragBar, and set its type to Button instead of Movie Clip. Buttons provide built‑in event handling for mouse actions, which is exactly what you need for dragging. Confirm the changes by clicking OK. The DragBar now lives inside the DragBox timeline and is ready for interaction.

Create the Visual Components of the Drag Window

With the basic structure in place, refine the visual appearance of your draggable menu. Return to the main timeline and open the DragBox movie clip by double‑clicking its symbol in the Library. Inside its nested timeline, you’ll find two layers: DragBox (the window body) and DragBar (the draggable header). Both layers currently contain the shapes you drew earlier.

Start by adding a background color or gradient to the DragBox layer. Use the Gradient Tool to give the window a subtle visual depth. Choose a light color palette that matches the overall design of your application. Apply a thin border around the shape by selecting the rectangle, opening the Stroke panel, and choosing a width of 1–2 pixels with a contrasting color. This will make the window feel more like a traditional desktop window.

Next, style the DragBar to look like a title bar. Add a text field on top of the grab rectangle by selecting the Text Tool from the toolbar, then click inside the header area. Type a title such as “Menu” or “Options.” Adjust the font, size, and color to make it readable. Center the text horizontally and vertically within the header rectangle by using the alignment tools or by manually nudging the text field.

To create a clean separation between the header and the content area, add a thin horizontal line beneath the DragBar layer. Place this line on a new layer called Divider so that it stays below the header but above the main content. Use a color that slightly contrasts with the window body for visibility.

Now that the visual foundation is solid, add any additional elements you want inside the menu. These might include icons, buttons, or text fields. Create new layers for each interactive component - for example, Icon1, Button1, Button2. Keep your layers organized by naming them descriptively. If you plan to reuse any of these elements outside the menu, consider converting them to symbols in the Library for reusability.

After arranging all the elements, test the layout by scrubbing through the timeline. Make sure everything is properly aligned and that the header rectangle stays at the top of the window. Pay attention to the stacking order: elements on higher layers should appear above those on lower layers. If anything appears out of order, adjust the layer order or the Depth property in the Properties panel.

When satisfied with the visual composition, close the DragBox timeline and return to the main stage. Your project now contains a ready‑to‑drag window with a header, title, and optional content. The next step is to make that header interactive so users can move the entire window around the screen.

Implement the Dragging Behavior with Actionscript

Open the main timeline again and locate the frame that contains your DragBox movie clip. Click on that frame to select it, then press F9 or right‑click and choose Actions to open the ActionScript panel. This is where the code that will make the window draggable will live.

Because the DragBar is a button, it has event listeners for mouse actions. In the ActionScript panel, you’ll create an event handler for the mouseDown event to start dragging and another for mouseUp to stop dragging. Use the following script as a template, replacing any references with your actual instance names:

Explain each part of the script: the onPress function triggers when the user clicks the header; startDrag() begins moving the dragbox instance. The onRelease and onReleaseOutside functions make sure the drag ends when the mouse button is released, whether it’s inside or outside the stage. The isDragging flag prevents accidental drags if the user taps the header but moves the mouse very quickly.

Once the code is entered, close the ActionScript panel and press Ctrl+Enter to test the movie. Click and hold the header area; the entire window should follow the cursor as you move it around. Release the mouse button to drop the window in place. If the window doesn’t move, double‑check that the instance names match exactly and that you’ve assigned the event handlers to the correct button.

To improve usability, consider adding a small visual cue that the header is draggable. For example, change the cursor to a hand icon when the mouse hovers over the header. Add the following code inside the onRollOver and onRollOut events of the header button:

This subtle change lets users know that the header is interactive. You can also limit the draggable area by adding constraints. Use the startDrag(true, left, top, right, bottom) method to restrict movement within specified bounds. Replace the simple startDrag() call with something like:

With these enhancements, your draggable menu is polished and ready for integration into a larger project. You now have a reusable component that can be dropped into any Flash scene and will behave like a native desktop window. Feel free to duplicate the DragBox symbol and create multiple instances; each will operate independently because they have their own event handlers and instance names.