Ok, so we have designed our menu, now it’s time to make it draggable. Below is a tutorial I wrote a while back, but this is how you make your menu draggable.
For this tutorial you need to have basic knowledge of Flash 5.
Just about every Flash site I’ve seen gives you a chance to grab their menu and move it out of the way or put it wherever you want it.
Ok, open Flash 5, and create a new movie. In the first frame of your new movie we’re going to draw a square box.
**In this example I’m making a Windows-type Dragable window, without the Minimize and Close buttons.
Now go up to the frames and click on the frame that you just drew your box. This will highlight the entire box you just drew. Hit F8. This will open your symbol properties. Where the name is, replace “Symbol 1” with “Drag Box.”
This will help us later on if we have several boxes. Also, make sure that beside Behavior that “Movie Clip” is selected and hit “OK.” This will take you back to Scene 1. By the way, make sure to name your movie clip by going to Window/Panel/Instance or hit Control+I. For now you can name it “dragbox.”
Double click the box so that you can edit your menu. This will take you to where you can edit your DragBox. You will know that you’re there when you see “DragBox” in the upper left corner beside Scene 1.
Now, within the DragBox scene, name your first layer “DragBox” and add a new layer. Name this layer “DragBar.” In your new layer (Dragbar), in the first frame, draw a little box that will be the “drag tab” allowing you to drag your box around. Think of your windows window… You have the box with the drag bar at the top.
In the frames window click the first frame of your new frame (Dragbar). This should select the box you just drew. Hit F8. This will bring up the symbol Properties for your DragBar symbol. Name your symbol. I named mine Drag Bar… and make sure that “Button” is highlighted. Select OK.
Now it’s time to add some actionscripting to tell the button to move the box.
Right click on the button that you just made and go down to Actions. This will pop up the Actions menu for your button.
Here is what we are going to add to the button:
(All of this is done in your Actions menu.)
Under Actions ( Not Basic Actions )
Double click StartDrag – This will now add:
on (release) {
startDrag (“”);
to your actions..
Now click on the (release) { line and uncheck Release at the bottom of your actions menu and select the check box for Press.
Now click on the StartDrag line and where it says “Target” at the bottom of your actions menu type in /dragbox. This tells it that we are talking about the drag box we created in the beginning of this tutorial.
Click the last line of your actions which should be } This will make the ON action available on your Actions menu.
Now double click the ON in the action options window. This will add
on (release) {
}
Now click the line with on (release) {
At the bottom of your actions window check the following Release, Release Outside, and Roll Out.
This tells the movie to STOP dragging when your release your click, Roll outside of the button, or release outside of the button. Now double click “Stop Drag.”
Close your actions window and hit F12 to test your movie. You just made a Dragable Menu!
Having created the outlines for FlashNewz and FLADownloads, John has become a strong voice in the Flash Community. His reviews and tutorials give great insight and knowledge to readers around the world. He has a keen eye for what’s hot and what’s not in the Flash world. He has also developed and continues to run his own flash portal as a side project to keep his mind on the Flash community
Being a key designer for advertising creative, he’s got style when it comes to grabbing readers attention. With a proven track record, there isn’t much this guy can’t handle.
