Draggable Menu

One of the best ways to add some interactivity to allowing your user to drag elements of your site. In this tutorial we will create a draggable menu with constrain region.

 

Let's start

We'll begin with a simple menu that I have created. It's made of several rounded rectangles colored with dark gradients, and textfields. So nothing too fancy but good enough for this tuturial.

Go ahead and download start .fla.

 

Step 1

Click on the menu symbol and give it an instance name whole_menu.

Step 2

Open the Actions Panel and type in the following actions

whole_menu.onPress = function() {
startDrag(this);
};
whole_menu.onRelease =function () {
stopDrag();
};

This piece of code tells Flash to start dragging the menu when the user presses the left mouse button, and stop when the left mouse button is released.

In this way we made it possible for the user to drag the menu around the stage.

 

Step 3

Although it is cool as it is, it'd be even cooler if we could specify how far the user can drag the menu. How about horizontal movement?

 

whole_menu.onPress = function() {
startDrag(this, false, 0, this._y, 800-this._width, this._y);
};
whole_menu.onRelease =function () {
stopDrag();
};

To contrain the movement to horizontal movement only, we'll use the special parameters in startDrag function. Let's have a look at each of them:

 

false - by default this is set to false so we aren't adding anything new here. When this parameter is set to true objects will be picked up from it's center (as opposed to the place where the mouse was pressed).

0 is  the value of l (left) parameter and defines how far to the left the menu can be dragged.

this._y is the value of t (top) parameter. It tells Flash about the maximum y-coordinate.

800-this_width is the value of r (right). We allow the user to drag the menu 800-this._width pixels to the right which equals 258 pixels. Using a variable here is better because we might change the width of the menu one day.

this._y - this is the bottom parameter. Placing the same value as the t parameter makes sure than no vertical movement is allowed.

Step 4

It's time for testing! Press Control + Enter.

I hope it works fine. Thanks

AttachmentSize
Start and Finish Flas!29.99 KB
Average: 3.5 (55 votes)