Throwing Objects Around the Stage

Throwing an object around the Stage is a little more complex than just moving the object with key or button presses. If you throw a baseball, it has a certain speed when it leaves your hand. However, as soon as it leaves your hand, it begins to slow down. Why? Friction. The baseball is in contact with the air around it, and as it moves through the air, the air impedes its forward motion. The baseball is affected also by gravity, but worry just about friction for the moment.

In this section, you create an object that you can "throw" around the stage with your mouse. You'll click and hold the object, move it to another location on the stage, and then let it go. This causes the object to continue in that direction. After you let go, you'll let friction take over.

Note

Until you program floor, ceiling, or wall boundaries, it will be possible to "lose" the throwable object by flinging it past the boundaries of the Stage. If you want to, you can set up a button to snap it back to the screen. All you need to do is stop the ball's motion and give it new X and Y coordinates. To do so, just place a button on the Stage and assign the following actions to it:

 on (release) {     ball.speedX = 0;      ball.speedY = 0;      ball._x = 100;      ball._y = 100;  }

Much of this will be familiar to you from the previous exercise. This time, you'll create a draggable button and embed it in a movie clip. You'll use the onClipEvent method to control the movie clip.

The variables that you need to track when you're throwing objects are a little different from the ones you used in the previous exercise. Not only will you be initializing and keeping track of speed in both the X and Y directions, you'll also be initializing and tracking the following:

dragging. You need to know whether the movie clip is currently being dragged. This is set to true when the object is being dragged, and it is set to false when the object has been released.
friction. This decimal is the percentage of the speed that is used after friction is taken away. For example, if friction takes away .25 percent of the speed, this variable would be 1 0.25, or 0.75 (75 percent). You'll add friction as a constant when you initialize your variables. This variable does not change.
ratio. This one is a little funky. This decimal number is just a percentage applied against an object's speed. You need only use a portion of the object's actual speed in your movie because the actual speed would cause the object to quickly fly off the screen. It's up to you to decide how much you want the action on the screen to slow down. In the early testing stages, you might want the number to be as much as .5, which removes half the object's speed. Later, as you're fine-tuning, you can nudge that number closer to 1 to speed things up.
oldX, oldY. Where the object was when you started dragging it.
newX, newY: Where the object is now.

You'll be adding Actions in two places: the button inside the movie clip and the movie clip itself.

Exercise 19.3 Creating a Throwable Movie Clip

First, you need to make your movie clip draggable. Adding an invisible button to the movie clip is a quick and easy way to do this. Alternately, you can just embed the graphic in the movie clip in a button, but I like invisible buttons .

Open throw.fla in the Chapter_19/Assets folder on the CD.
Double-click the Ball movie clip on the Stage to open it in Symbol-Editing mode.
Add a new layer to the top of the stack and name it Button.
With the Button layer selected, drag a copy of the ballButton from the Library onto the Stage and center it.

The next thing you'll do is make the ball draggable.
With the Ball button selected, launch the Actions panel. When you press the button, you want the button to drag. When you release the button, you want it to drop. You also need to keep track of whether the button is currently being dragged. Add the following code to the Actions list for the button:
```
 on(press) {     dragging = true;      this.startDrag();  }  on(release, releaseOutside) {     dragging = false;      this.stopDrag();  } 
```
Tip

Whenever you are having code triggered by the release of a button, make sure that the code also will be triggered if you let go of the mouse when you've dragged the cursor off the button. It's very easy to drag your cursor fast enough that your button can't keep up.

The startDrag(target) action is used to make the movie clip draggable. In this case, you are specifying the target of the drag operation with "this." Alternately, you could use startDrag(""). If there is nothing between the quotes, Flash assumes it's supposed to drag the object to which the action is attached.

When you start adding ActionScript to the movie clip, the movie clip will need to know whether it is currently being dragged. You'll capture that information in the dragging variable. When the button is pressed, dragging is set to true, and you can start dragging the ball.

When you release the button, dragging is set to false and you stop the Drag action using the stopDrag() action.
Test your movie to make sure the ball is draggable.
Return to the main timeline and select the Ball movie clip on the Stage. Launch the Actions panel.
When the movie loads for the first time, you need to initialize the variables you'll be using. Add the following onClipEvent(load) to the Actions list:
```
 onClipEvent(load){     dragging = false;      friction = .75;      ratio = .5;      newX = this._x;      oldX = this._x;      newY = this._y;      oldY = this._y;      speedX = 0;      speedY = 0;  } 
```
Now it's time to set up the actions for throwing the ball. You need to gather information about the ball's position as it is being dragged. If the ball is no longer being dragged, it's been thrown. This information needs to be collected continuously, so you'll use the onClipEvent (enterFrame) handler.
Position your cursor after the last curly brace in your code and add this code:
```
 onClipEvent(enterFrame){     if (dragging){         oldX = newX;          oldY = newY;          newX = this._x;          newY = this._y;      }  } 
```
Tip

Notice that you didn't have to say if (dragging == true). Because dragging can be only true or false, you can just evaluate the variable itself for its value. In this case, if dragging evaluates to true, the rest of the actions will be performed.

The if statement activates only when the ball is moving. When you click and drag, the dragging variable gets set to true, which in turn activates the code nested here. While the ball is being dragged, you record the original position of the ball in the oldX and oldY variables. You also record the new position, which is the place where the ball has moved to in the newX and newY variables. You need to constantly update these variables when the object is moving so that you have an accurate record of the ball's distance traveled and speed. The greater the distance between the old position and the new position, the greater the speed.

Next you need to account for what is happening to the ball when it's no longer being dragged. You'll add an else to the if statement to handle this.
The speed in the X and Y directions will be the current speed times the value of the friction variable. The X and Y positions are the current positions plus the speed in the appropriate direction (see Figure 19.5).

Figure 19.5. To throw the ball, you need to keep track not only of where it is now, but also where it just was. You use the variables newX, newY, oldX, and oldY to hold these values.

Between the curly brace that closes the if statement and the final curly brace, add the following code:

 else{     speedX *= friction;      speedY *= friction;      this._x += speedX;      this._y += speedY;  }

Your code should currently look like this:

 onClipEvent(load){     dragging = false;      friction = .75;      ratio = .5;      newX = this._x;      oldX = this._x;      newY = this._y;      oldY = this._y;      speedX = 0;      speedY = 0;  }  onClipEvent(enterFrame){     if (dragging){         oldX = newX;          oldY = newY;          newX = this._x;          newY = this._y;      }else{         speedX *= friction;          speedY *= friction;          this._x += speedX;          this._y += speedY;      }  }

If you test your movie now, you still won't be able to throw the ball. You need to add a few more actions to the button release.

Double-click the Ball movie clip to open it in Symbol-Editing mode. Select the ballButton and add the following code between the asterisks :

 on(press) {     dragging = true;      this.startDrag();  }  on(release, releaseOutside) {     dragging = false;      this.stopDrag();  //************************************      speedX = (newX - oldX)*ratio;      speedY = (newY - oldY)*ratio;  //************************************  }

Get to know and love the equations for speed; you'll be seeing them a lot.

Save and test your movie. You should be able to grab the ball with your mouse and throw it across the Stage. And yes, you'll probably end up flinging it off the Stage.

How do you get the ball back after it's off the Stage? You could create a button to reset the X and Y positions of the ball. Alternately, you could define walls that your ball can't move past. Before you do that, however, take a look at another way to modify the throwing example that always pulls your ball back to a stable resting point.

Figure 19.5. To throw the ball, you need to keep track not only of where it is now, but also where it just was. You use the variables newX, newY, oldX, and oldY to hold these values.