Tutorial - FLA Deconstruction Part 2

Setting Up the Window and Drag Bar

Begin by launching Flash 5 and creating a brand‑new movie file. In the very first frame of this movie you will lay the foundation for the draggable menu: a simple square that will act as the window frame. Use the rectangle tool to draw a box that is wide enough to hold any content you plan to include, such as menu items or icons. Once the box is in place, press F8 to bring up the Symbol Properties dialog. Replace the default “Symbol 1” name with something descriptive, for example “DragBox.” In the Behavior dropdown confirm that “Movie Clip” is selected, then click OK to return to the main timeline. You have now converted the drawn shape into a reusable movie clip symbol.

Next, give the movie clip an instance name so you can reference it in code. Select the box on the stage, then open the Properties panel by going to Window > Properties or pressing Control+I. In the Instance Name field type “dragbox.” Naming your instances consistently makes later scripting easier and reduces confusion when you have multiple objects on stage.

Double‑click the DragBox symbol on the timeline to enter its own editing environment. Notice the label “DragBox” appears in the top left corner next to Scene 1. Inside the DragBox scene, organize your layers for clarity: create a new layer named “DragBox” and place all visual elements that belong to the main window on this layer. Then add another layer called “DragBar” where you will create the top bar that users will grab to move the window.

In the first frame of the DragBar layer, draw a narrow rectangle that will serve as the drag handle. Think of it like the title bar of a standard desktop window: the entire rectangle is the area that will respond to mouse events. When you finish drawing the bar, press F8 again to open its Symbol Properties. This time give the symbol a name such as “DragBar” and set its behavior to “Button.” This change enables Flash to treat the bar as a clickable object that can trigger actions when the user interacts with it.

Once the symbols are defined, you can begin to assemble the menu structure. Place the DragBar symbol inside the DragBox timeline by dragging it onto the stage at the desired location, usually at the very top of the box. Make sure the DragBar layer sits above the DragBox layer so that the bar is always visible and interactive. Adjust the size and position of the DragBar rectangle until it looks balanced within the DragBox frame. When finished, click away from the objects so that the stage clears, and your visual foundation is complete. At this point you have a static window that can be moved in future steps. All that remains is to give the bar the power to drag the entire box across the stage.

Implementing Drag Behavior with Actionscript

With the visual elements in place, the next step is to write the Actionscript that turns the DragBar into a live control. Right‑click the DragBar symbol on the stage and choose Actions to open the Action Script panel. You will be working inside the symbol itself, so the code you write will be attached to the DragBar. In the Actions panel, find the “Not Basic Actions” drop‑down and select “On Release.” This event fires when the user releases the mouse button while still over the bar. Click the “Start Drag” action from the list to add it to the script. It will appear as a placeholder that looks like this: on (release) { startDrag (""); }

Now modify the startDrag call so that it moves the DragBox symbol rather than the button itself. Click on the empty string in the startDrag line, delete it, and type /dragbox (the instance name you assigned earlier). This tells Flash to start dragging the DragBox movie clip whenever the bar is pressed. The script now looks like: on (release) { startDrag("/dragbox"); }. Next you need to stop the drag action when the user releases the mouse anywhere, not just over the bar. In the Action panel, click the last line of the script, which is the closing curly brace “}”. This makes the ON block available for further edits. Double‑click the “ON” keyword to bring up the event options window.

Within the event options, check the boxes for “Release,” “Release Outside,” and “Roll Out.” These events cover all scenarios where the user might let go of the mouse: directly over the bar, outside the bar but still on the stage, or when the mouse rolls out of the bar's area. After selecting these options, click the “Stop Drag” action from the list and place it inside the same block. The final script should read:

on (release) { startDrag("/dragbox"); }

on (releaseOutside) { stopDrag(); }

on (rollOut) { stopDrag(); }

This simple combination of startDrag and stopDrag provides a smooth dragging experience. Once the script is added, close the Actions panel and press F12 to run the movie in the Flash player. Click and hold the DragBar rectangle, move the mouse across the stage, and release to see the window follow your pointer. The window will stay in place after you let go, ready to be dragged again at any time.