"Dragging" and "Sliding" :Part 1

The first thing you have to understand is that only Movie Clips can be dragged. In the example below, the red ball is a movie clip and the blue one is a graphic symbol. As you may have noticed, only the red ball is able to be dragged around the stage.

Flash 1: Drag the red ball.

You will also notice there is a problem with this movie.

The red ball moves all over the stage as you move the mouse. This is because a "drag" requires two actions: a click to start the dragging and a release to stop the object from being draggable.

Flash 2: "Drag and release".

Coding a basic "drag"

1. Open a new Flash movie.
2. Select the Oval tool and draw a red circle on the stage.
3. Select the circle and press F8 to open the "Convert to Symbol" dialog box.
4. Name the symbol "ball" and set its Behavior to "Movie clip".
5. With the new Movie Clip selected, press the F9 key to open the Actionscript editor.
6. Enter the following code:

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

7. Save the movie and test it by pressing Contol-Enter (PC) or Command-Return (Mac).

Now that you have created a "draggable" object, you really should add the second bit of functionality to it- the ability to stop dragging. Here's how:

8. Select your movie clip on the stage and press the F9 key to open the Actionscript editor.
9. Enter the following lines of code to the script:

on(release) {
this.stopDrag();
}

10. Save and test the movie.

Image 1: The Basic drag script.

Constraining a drag action

The drag movie you just created allows you to drag the object to any location on the screen. What if the object is in a box and the user can't drag it out of the box. In this case, you will have to constrain the drag to preset parameters. In this exercise , we will keep the ball inside a box. The parameters will appear in the brackets right after the startDrag(); action. The parameters you can enter are:

• lockCenter: This is either true of false and locks the center point of the movie clip to the mouse if the parameter is true.

• Left: The left position of the bounding rectangle.

• Top: The Top position of the bounding rectangle.

• Right: The right position of the bounding rectangle.

• Bottom: The bottom position of the bounding rectangle.

If you do use the parameter then the order is: startDrag(lock,left,top,right,bottom)

1. Draw a box on the stage and place the ball inside the box.
2. Click the left edge of the box and note the x coordinate in the Property inspector.
3. Click the top edge of the box and note the "y" coordinate in the Property inspector.
4. Click the right of the box and note the x coordinate in the Property inspector.
5. Click the bottom of the box and note the "y" coordinate in the Property inspector.
6. Click on the ball and press the F9 key to open the Actionscript editor.
7. Add the following code to the startDrag parameters, using your values:

on(press) {
this.startDrag(true,40,46,141,147);
}

on(release) {
this.stopDrag();
}

8. Save and test your movie.

You are most likely able to drag the ball out of the box on the right and bottom edged of the box. This is because the parameters refer to the ball's registration point. To fix this click on the ball to determine its width in the Property inspector .Subtract this value from the right and bottom parameter numbers in the code and things should be working properly.

Flash 3: Constraining movement.

Now that you know how to constrain movement with a defined area, how you constrain movement to a defined direction. For example, instead of moving the ball all over the stage, you only want it to be able to be dragged from side-to-side.

If you look at this not as a drag but in computer terms, what you really want to do is confine the drag to the horizontal axis. This can be done by keeping the movement of the object along the object's "y" axis. To dothis, simply change the code to:

on(press) {
this.startDrag(true,40,this._y,141,this._y);
}

on(release) {
this.stopDrag();
}

Flash 4: You can constrain a drag to the vertical or horizontal axis.