First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
Author: jay w. friedman

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!

<%BR%>

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.

» Level Intermediate

Added: 2002-06-24
Rating: 9 Votes: 87
(10 being the highest)
» Author
just some kid from florida who loves interactivity. i teach director labs and work with flash in my spare time, when i'm not rocking out in some foreign land. air guitar champion of the world.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.