DRAGGING A MOVIE CLIP INSTANCE WITHIN A BOUNDARY

Being able to drag the ball movie clip instance around the screen is critical to our project's interactivity. This is because the ball's position on screen will determine the volume and panning of the "bounce" sound. However, if we were to allow users to freely drag the basketball movie clip instance on screen, our scene would not be realistic because that would mean dragging and bouncing the ball on walls, the backboard, and so forth. Thus, we need to restrict dragging to the area denoted by the court.

There are several ways of scripting so that an object can only be dragged within a certain area. In this exercise, you'll learn how to accomplish this by tracking the mouse's movement and only allowing dragging to occur when the mouse is within a certain area on screen.

1. Open basketball2.fla in the Lesson16/Assets folder.

   If you wish, you can continue using the file you were working with at the end of the previous exercise.

   Before you continue, it's important to think through the problem at hand that is, how to drag the ball movie clip instance in sync with the mouse movement, and how to constrain that dragging to a specific area on screen.

   The first thing we need to do is establish the draggable area, or boundary, of our screen. In Flash you define a boundary by determining four coordinates: top, bottom, left, and right. Our script will use these coordinates to restrict movement within that area. For this exercise, the coordinates that represent the four sides of our boundary will be as follows:

   Top boundary = 220

   Bottom boundary = 360

   Left boundary = 60

   Right boundary = 490

   

   As shown by the arrows, all coordinates are based on the distance of that side from the top and left sides of the stage.

   TIP

   An easy and visual method of determining boundary coordinates is to draw a simple box on the stage. Resize it and position it in the area that will serve as the boundary in the scene. Select the box and then open the Info panel. Using the information in the X, Y, W, and H boxes, you can determine the four coordinates of your boundary. Y is the top boundary; X is the left boundary; Y + H is the bottom boundary; and X + W is the right boundary. Once you've determined the four coordinates of your boundary, delete the box. There are other, more dynamic ways of setting a border, but this is the most straightforward.

   Since we only want our ball to move when the mouse is within our boundary, in scripting terms this means we need to check for a condition before the ball can be dragged. Logically, this might be translated into a statement that reads as follows:

   If the mouse's position is within the coordinates of our boundary, drag the basketball movie clip instance. Otherwise, stop dragging.

   We'll need to instruct our script to check for this condition on a regular basis since the mouse is in constant motion. Using the mouseMove event handler, we can check for this condition each time the mouse is moved. This will allow our script to act instantly to allow or prevent the basketball movie clip instance from being dragged.

   We now have all the information necessary to proceed.

2. Select the basketball movie clip instance, then open the Actions panel. After the line of script creating the bounce Sound object (which we created in the previous exercise), add the following lines of script:

    leftBoundary = 60;  rightBoundary = 490;  topBoundary = 220;  bottomBoundary = 360; 

   

   These are variables that contain the X and Y coordinates of our boundary. Since we've placed these lines within the existing load event handler, these variables won't be created until the basketball movie clip instance appears in the scene a logical choice since they aren't needed until the ball movie clip instance appears in the scene.

   Next, we'll add an if statement that constantly checks the position of the mouse and allows the ball to be dragged only if the mouse is within the boundary we just defined.

3. After the seventh line in the script the one with the curly bracket (} ) add the following:

    onClipEvent (mouseMove) {    if (_root._xmouse > leftBoundary && _root._xmouse < rightBoundary &&  _root._ymouse > topBoundary && _root._ymouse < bottomBoundary) {      startDrag (this, true);    } else {      stopDrag ();    }  } 

   

   Using a mouseMove event handler, our if statement is analyzed each time the mouse is moved.

   With this if statement, we're checking to determine that four conditions are true . If they are, dragging will commence; if not, dragging will cease. We're checking the current horizontal and vertical positions of the mouse (_root.xmouse and _root.ymouse, respectively) to see how they compare to the boundaries we defined earlier.

   Let's look at a couple of possible scenarios to understand the logic behind this if statement. Suppose that during playback of the movie, the mouse is moved to a point where its horizontal position (_root.xmouse ) is 347 and its vertical position (_root.ymouse ) is 285. By plugging in these values as well as the values that define our boundaries, the if statement would look like this:

    if (347 > 60 and 347 < 490 and 285 > 220 and 285 < 390) 

   In this circumstance, the if statement would evaluate to true because all the conditions are true 347 is greater than 60, 347 is less than 490, 285 is greater than 220, and 285 is less than 390. In this scenario, dragging is allowed.

   Let's look at one more scenario. Suppose that during playback of the movie, the mouse is moved to a horizontal position of 42 and a vertical position of 370. By plugging in these values, the if statement would look like this:

    if (42 > 60 and 42 < 490 and 370 > 220 and 370 < 390) 

   In this circumstance, the if statement would evaluate to false because not all the conditions are true that is, 42 is not greater than 60 (the first condition in the statement).

   When this if statement evaluates to true, the startDrag() action is triggered. This action has two parameters, separated by a comma:

    startDrag (target to drag, lock to center) 

   Because this script resides on the basketball movie clip instance and we want to drag this same movie clip instance when the if statement evaluates to true , the target to drag is defined as this . The lock to center is set to true so that when dragging occurs, the center of the basketball movie clip instance is locked to the exact vertical and horizontal position of the mouse.

   TIP

   The startDrag () action is not the only way to drag a movie clip instance. In our script, we could replace this action with:

   this._x = _root._xmouse;

   this._y = _root._ymouse;

   These two lines would cause the X and Y coordinates of the ball movie clip instance to mimic the X and Y coordinates of the mouse, essentially causing it to appear to be dragged. The advantage of this method is that it allows you to drag multiple movie clip instances simultaneously. In contrast, the startDrag () action allows only a single movie clip instance to be dragged at a time. In our case, this is sufficient because the basketball is the only thing that needs to be draggable.

   When the if statement evaluates to false , the stopDrag() action is triggered, causing the ball to stop being dragged. Since this if statement is evaluated with each movement of the mouse, the dragging process may be stopped and started frequently, depending on the current position of the mouse.

4. Choose Control > Test Movie to see how the movie operates.

   In the testing environment, move your mouse around the court. When the mouse is moved within the boundary we defined, dragging will occur, causing the ball to appear as if it's bouncing around the court. Move the mouse outside this boundary, and dragging will stop.

5. Close the testing environment to return to the authoring environment. Save the current file as basketball3.fla.

   You may want to keep this file open because we'll continue to build on it as this lesson progresses.