Throwing

What do we mean by throwing when it comes to a Flash movie? It means you click on an object to start dragging it, move it in a particular direction, and when you release it, it keeps moving in the direction you were dragging it.

For the velocity, you need to determine what velocity the object has while it is being dragged, and then set the objects velocity to that value when it is dropped. In other words, if you were dragging a movie clip 10 pixels per frame to the left, then when you release it, its velocity should be vx = -10 .

Setting the new velocity should be no problem for you; just assign new values to vx and vy , as shown in Figure 7-2. But determining what those values are might be a little tricky. Actually, calculating dragging velocity turns out to be almost exactly the opposite of applying velocity in your motion code. In applying velocity, you add velocity to the objects old position to come up with the objects new position. So, the formula would be old + velocity = new . To determine the velocity of an object while its being dragged, you simply rearrange the equation to get velocity = new ˆ old .

Figure 7-2: The ball has been dragged to a new position. The velocity is the distance from its last position to this new position.

As you are dragging the movie clip, its going to have a new position on each frame. If you take that and subtract the position it was in on the previous frame, youll know how far it moved in one frame. Thats your pixels-per-frame velocity!

Lets take an example, simplifying it to a single axis. A movie clip is being dragged. On a particular frame, you note that its x position is 150. On the next frame, you see that its x position is 170. Thus, in one frame, it was dragged 20 pixels on the x axis, and its x velocity at that point is +20. If you were to release it just then, you would expect it to continue moving at an x velocity of 20. So, of course, you would set vx = 20 .

The major thing this requires is a couple of variables to hold the old x and y position values. You can call those oldX and oldY , and declare them as timeline variables. Now, as soon as you start dragging, you want to note the balls position and store it in oldX and oldY . This can be done in the mouseDown handler, as follows :

 oldX = ball._x; oldY = ball._y; 

Then, in your enterFrame handler, you just subtract the current x position from oldX , and current y from oldY . This gives you the current velocity, so you can store these values directly in vx and vy :

 vx = ball._x  oldX; vy = ball._y  oldY; 

Do this in an else block after the if(!dragging) block. So, the ball is either moving on its own or its being dragged. Thats your if and else . It will become clearer when you see it in code very shortly.

Once you determine the velocity, youre finished with the old values, and you can now use those variables to store the position of the ball on the current frame:

 oldX = ball._x; oldY = ball._y; 

Now, when you release the ball, you dont need to do anything at all. The velocity has been kept track of all through the drag, and the latest velocity is already stored in vx and vy . As soon as you reenable the motion code, the ball will move at whatever velocity it was just being dragged with. The result: You threw the ball!

Here is the final throwing code ( ch07_06.fla ):

 init(); function init() {       dragging = false;  friction = 0.98;  bounce = -0.7;       gravity = 0.5;       top = 0;       left = 0;       bottom = Stage.height;       right = Stage.width;       ball = attachMovie("ball", "ball", 0);       ball._x = Stage.width / 2;       ball._y = Stage.height / 2;       vx = Math.random() * 10 - 5;       vy = Math.random() * 10 - 5; } ball.onPress = function() {  oldX = ball._x;   oldY = ball._y;  dragging = true;       ball.startDrag(); }; ball.onRelease = function() {       dragging = false;       ball.stopDrag(); }; ball.onReleaseOutside = function() {       dragging = false;       ball.stopDrag(); }; function onEnterFrame(Void):Void {       if (!dragging)       {             vy += gravity;             vx *= friction;             vy *= friction;             ball._x += vx;             ball._y += vy;             if (ball._x + ball._width / 2 > right)             {                   ball._x = right - ball._width / 2;                   vx *= bounce;             }             else if (ball._x - ball._width / 2 < left)             {                   ball._x = left + ball._width / 2;                   vx *= bounce;             }             if (ball._y + ball._height / 2 > bottom)             {                   ball._y = bottom - ball._height / 2;                   vy *= bounce;             }             else if (ball._y - ball._height / 2 < top)             {                   ball._y = top + ball._height / 2;                   vy *= bounce;             }       }  else   {   vx = ball._x - oldX;   vy = ball._y - oldY;   oldX = ball._x;   oldY = ball._y;   }  } 

Now thats pretty darned interactive, and a good representation of real-world physics re-created in Flash. It really feels like youre throwing something around. You can even play catch with yourself. In this example, I also added in a bit of friction to simulate some atmosphere. Play around with all the variables for gravity, bounce, and so on. This is a great sample file to get a feel for how all of these things work, because you can experiment in real time and see how all the parameters affect the motion.

As a note, you could easily switch around the if and else statements, and do something like this:

 if(dragging) {       // dragging code } else {       // motion code } 

You just need to change the if(!dragging) to if(dragging) . Use whichever approach makes more sense to you.