Elastic Movement

You can create an object that will have a " gravitational pull" toward a fixed point when moved away from its point of origin. You'll be able to drag the object to any position and let it go, and then observe the object return to its origin in an elastic fashion. It will bounce back to the fixed point as if there were a rubber band attached between the ball and the fixed point.

In the next exercise, the variable list that you'll be tracking to do this is very similar to the list of variables you tracked in the throwing example, with a couple exceptions. Instead of tracking the new and old positions of X and Y, you'll track the following:

• baseX. Holds the X position of the fixed point to which the ball will return elastically.

• baseY. Holds the Y position of the fixed point.

• _x. A movie clip property that returns the current X position of the ball.

• _y. A movie clip property that returns the current Y position of the ball.

Now take a look at how you use this new information to create elastic behavior.

Exercise 19.4 Creating Elastic Behavior

The first part of this exercisesetting up the draggable buttonis exactly what you did in the previous exercise. Those actions already are added for you here.

1. Open elastic.fla in the Chapter_19/Assets folder on the CD.

   If you test your movie now, you'll be able to drag and drop the ball on the Stage. Take a moment to think about what you want to accomplish next. You want your ball to behave as if it were attached to an elastic band that is, in turn , attached to a fixed point. If you pull the ball away from the fixed point and let it go, you would expect the ball to not only attempt to return to the fixed point, but also to overshoot it and bounce back and forth until it ultimately comes to a stop.

2. The first thing you want to do when your movie clip loads is initialize your variables. On the main timeline, select the Ball movie clip and enter the following code in the Actions list:

    onClipEvent(load) {     dragging = false;      friction = .75;      ratio = .3;      speedX = 0;      speedY = 0;      baseX = this._x;      baseY = this._y;  } 

   Now that you have set up the variables, you need to set the calculations that will use the variables to control the position of the Ball movie clip on the stage.

3. The position of the movie clip on the Stage needs to be updated continuously, so you will once again use the onClipEvent(enterFrame) handler. You want Flash to take over only when the ball has been released on the Stage (when dragging evaluates to false), so start by setting your conditional statement. Enter the following actions:

    onClipEvent(enterFrame) {     if (!dragging) {     }  } 

   Tip

   When you test for !dragging, you're checking whether the value of dragging is currently false. If it is, the conditional is true and you can continue processing the expressions in the if statement.

4. You need to track the speed of the object in both the X and Y directions. Start by setting the calculation for speedX:

   • First, you take the last value of speedX and decrease it by multiplying it by the amount of friction (speedXfriction).

   • Next, you determine how far the ball has actually moved, which is the distance that the ball is from its original position. Add the reduced speed to the distance from the original position (baseX this._x). You'll add that to the number calculated previously.

   • Finally, you multiply the number by the ratio to slow the motion down.

5. Add the complete calculation between the curly braces of the if statement:

    speedX = (speedX * friction) + (baseX  this._x) * ratio; 

6. Set up the same equation for speedY. Add the equation for speedY beneath the equation for speedX:

    speedY = (speedY * friction) + (baseY  this._y) * ratio; 

   Now all you have to do is use your new speed values to set the X and Y positions of the ball.

7. Add the following code after the equation for speedY:

    this._x += speedX;  this._y += speedY; 

   So the new position is equal to the last position of the ball plus the current speed. (See Figure 19.6.) Your code now should look like this:

    onClipEvent(load) {     dragging = false;      friction = .75;      ratio = .3;      speedX = 0;      speedY = 0;      baseX = this._x;      baseY = this._y;  }  onClipEvent(enterFrame) {     if (dragging == false) {         speedX = (speedX * friction) + (baseX - this._x) * ratio;          speedY = (speedY * friction) + (baseY - this._y) * ratio;          this._x += speedX;          this._y += speedY;      }  } 

   Figure 19.6. To add elasticity to the ball, you have to track its current position relative to its beginning position. The speed of the ball's return to its original point is based on how far away you moved it.

   

8. Save and test your movie. Drag your movie clip across the stage and let it go. It should spring back and forth elastically. You can play around with the values of friction and ratio to get the effect you want.

Next, you add in some additional complexity by determining when your object collides with something.