Fresh Fruit for Rotting Vegetables - deceleration made somewhat easy. - Page 3

part three - a fingerless button:

so we've got our assets, now we're going to create the code for the button.

select the button movie clip and bring up the actions panel. we're going to turn this movie clip into the "fingerless button" i alluded to in the title of this section.

this is the code to apply to the button:

onClipEvent(mouseDown) {
	 if (hitTest(_root._xmouse,_root._ymouse)) {
	  _root.ball.xDest = random(500) + 50;
	  _root.ball.yDest = random(100) + 50;
	  _root.ball.rotDest = random(80);
  	_root.ball.ScaleDest = random(180) + 20;
 	}
}

here's what it does:

Since this occurs in the "mouseDown" event, this means the code will only occur when the user clicks the mouse. however, this also means the user could click anywhere on the screen - not just on the button.

So the first line of code in the handler: if (hitTest(_root._xmouse,_root._ymouse)) used the "hitTest" method to check and make sure the mouse coordinates are touch the button object... in essence, making sure the user clicks ON the button.

the next four lines of code:
_root.ball.xDest = random(500) + 50;
_root.ball.yDest = random(100) + 50;
_root.ball.rotDest = random(80);
_root.ball.ScaleDest = random(180) + 20;

are creating random numbers that will be used as variables to give the moving object its target values for scale, position, and rotation. the reason why the xDest (which will be the moving object's horizontal location) value is written as random(500) + 50 even though the screen is only 600px wide is to make sure the object's horizontal position is between 51 and 550. after all. if the object were placed at 0px, or 600px, it would be halfway off the screen. this also goes for the destY value, and the rotDest (although rotDest relates to rotation... the reason we add 20 here is to make sure the object always rotates a certain amount (we'll see more about this later.)

so great, now you have a button. let's code the moving object!

part 4 - moving stuff

select the moving object now, and bring up the actions panel. here's where a little math comes in:

onClipEvent (load) {
 xDest = this._x;
 yDest = this._y;
}

onClipEvent (enterFrame) {
 if (rotDest > 0) {
  this._rotation += (rotDest)*.4;
  rotDest--;
 }
 if (this._xscale != ScaleDest) {
  this._xscale += (ScaleDest-this._xscale)*.1;
 }
 if (this._yscale != ScaleDest) {
  this._yscale += (ScaleDest-this._yscale)*.1;
 }
 if (this._x != xDest) {
  this._x += (xDest-this._x)*.12;
 }
 if (this._y != yDest) {
  this._y += (yDest-this._y)*.12;
 }
}

once again, here's the breakdown

The first chunk of code here is just initializing a couple variables:

onClipEvent (load) {
xDest = this._x;
yDest = this._y;

This simply sets the object's horizontal and vertical target values to equal its current value, thus causing the object to hold still until the button is clicked. you may wonder why the scale and rotation values aren't initialized this way, and the answer is simple. since the object is off-screen to begin with, nobody will be able to see it scale or spin... the problem with leaving xDest and yDest unitialized is that they will both default to 0, effectively placing your object onscreen before the button is clicked.

next up - rotation:
if (rotDest > 0) {
this._rotation += (rotDest)*.4;
rotDest--;
}

This uses the "rotDest" value sent when the user clicks the button to spin to object. here, so long as rotDest is greater than 0, we'll add (rotDest) * .4 to the object's rotation and subtract one from the rotDest value. (the .4 is the number controlling the rate of the spin, feel free to experiment with it.) when rotDest drops below 0, the object will stop rotating, but since rotDest is constantly getting smaller, it will slow down convinvingly.

scaling:
if (this._xscale != ScaleDest) {
this._xscale += (ScaleDest-this._xscale)*.1;
}
if (this._yscale != ScaleDest) {
this._yscale += (ScaleDest-this._yscale)*.1;
}

So, what's going here is that we have a seperate piece of code for the horizontal and vertical scaling. one affects the xscale property, and one the yscale, but they're otherwise identical. if the object's scale value is not equal to the target value sent by the button (ScaleDest), then we will add (ScaleDest - this._xscale)*.1 to it. since we're subtracting the object's current value from the target value, we're getting the distance between the two. multiplying the result by .1 gives us the actual amount the object will scale each frame, a number that will get progressively smaller until it reaches its target size. the higher this number, the quicker the object will scale. get it?

so look at the code for the movement:
if (this._x != xDest) {
this._x += (xDest-this._x)*.12;
}
if (this._y != yDest) {
this._y += (yDest-this._y)*.12;
}

Look familiar? it should. it's almost exactly the same as the rotation code, except that its changing the object's x and y coordinates instead of its size. you should be able to work this out on your own by now.