Introduction
Whew, it's been too long since I last wrote a tutorial so here we go...

Basically, we're going to make a MovieClip prototype that randomly moves an object in all directions. What's special about this prototype is that it doesn't override your onEnterFrame handler, so you can still do whatever you want as the movieclip is randomly moving.

Here is an example of the random movement this tutorial will explain:

[ there you have it - random movement! ]

 
Moving on, I must first say that in order to understand this you must have at least the basic knowledge of Actionscript, and foremost, how to add it (to frames, movieclips, etc). With that aside, I present to you, the code:

// max_dv -> maximum absolute velocity change // maxV -> maximum absolute velocity // freq -> frequency of velocity change // behavior -> "bounce" or "mod"; action taken when instance hits boundaries; default action: bounce // fps -> sets animation's FPS; generally set to movie's FPS, but can be overridden MovieClip.prototype.moveRandom = function(max_dv, maxV, freq, behavior, fps) { this.chgSpd = max_dv; this.maxV = maxV; this.freq = freq; this.vx = this.chgSpd*(Math.random()*2-1); this.vy = this.chgSpd*(Math.random()*2-1); if (behavior == "bounce" || behavior != "mod") { this.$mR = function() { this._x += this.vx; this._y += this.vy; // the lines that give life... this.vx = (!(random(this.freq))) ? (this.vx+this.chgSpd*(Math.random()*2-1))%this.maxV : this.vx; this.vy = (!(random(this.freq))) ? (this.vy+this.chgSpd*(Math.random()*2-1))%this.maxV : this.vy; if (this._x>Stage.width || this._x<0) { this.vx = -this.vx; } if (this._y>Stage.height || this._y<0) { this.vy = -this.vy; } updateAfterEvent(); }; } else { this.$mR = function() { this._x += this.vx; this._y += this.vy; // the lines that give life... this.vx = (!(random(this.freq))) ? (this.vx+this.chgSpd*(Math.random()*2-1))%this.maxV : this.vx; this.vy = (!(random(this.freq))) ? (this.vy+this.chgSpd*(Math.random()*2-1))%this.maxV : this.vy; if (this._x>Stage.width) { this._x %= Stage.width; } if (this._x<0) { this._x = Stage.width-this._x; } if (this._y>Stage.height) { this._y %= Stage.height; } if (this._y<0) { this._y = Stage.height-this._y; } updateAfterEvent(); }; } this.__INTERVAL = setInterval(this, "$mR", 1000/fps); };

[ copy and paste the above code into a frame ]

Copy and paste the above code into a frame of your animation. The code does not do much...for now! Also, don't let the length of the code fool you, it's actually shorter than it looks; I repeat a chunk of code, which I'll explain later on.

The first line to look at is:

MovieClip.prototype.moveRandom = function(max_dv, maxV, freq, behavior, fps)

If you have some sort of understanding for prototypes, good. If not, you'll know now. Prototypes are functions defined for a specific object which all copies or instances of the object can use. The object in question is MovieClip. We are defining a prototype function "moveRandom" for all MovieClips.

This means that any kind of MovieClip can call this function, but nothing else. Not Buttons, Sounds, Objects, Arrays, nothing, only MovieClips. Here we are merely defining the prototype, we aren't actually calling it. After "prototype" we have the function name, and afterwards, your general function declaration along with the parameters (max_dv, maxV, etc).

  this.chgSpd = max_dv;
  this.maxV = maxV;
  this.freq = freq;

These three lines simply move the parameters you gave it into the object so it can be used later on.

  this.vx = this.chgSpd*(Math.random()*2-1);
  this.vy = this.chgSpd*(Math.random()*2-1);
 

Here we define the initial random speed. If this looks confusing, let me explain:
Hopefully you will already know that the Math.random() function returns a random value from 0 to (but excluding) 1. In this little math line, we multiply that random value by 2 and subtract 1 from it. This gives us a random value from -1 to 1 (say our random value was 0.9999...times 2 gives us 2, minus 1 equals 1; say our random number was 0, minus 1 is -1, see?).

Now from this random range we multiply it by the chgSpd variable which is the maximum allowable change of speed. If chgSpd was 5, we'd get a value from -5 to 5. We assign a random value to both the horizontal and vertical speeds.

if (behavior == "bounce" || behavior != "mod") {

This little IF test sees the kind of behavior you want on the randomly moving objects once they encounter the wall. "bounce" will make it bounce off the wall and "mod" will make it appear on the other side of the screen when it goes off. This IF statement says "if behavior is 'bounce' continue to the following, OR if behavior is not 'mod', then continue as well". I have it like this because if the user doesn't give a behavior, then it will default to "mod" which I don't want it to do; so in simple terms "IF behavior is 'bounce' or anything else but 'mod', continue".

this.$mR = function() {

Here we define a function within the prototype. Don't let the '$' fool you, it is just as valid a character for functions as other letters. This just reminds me and you that it's a private function and you don't want to use it anywhere else but in here.

  this._x += this.vx;
  this._y += this.vy;

Here we simply move the object according to the velocity it has on each direction. Nothing too complicated, I hope.

this.vx = (!(random(this.freq))) ? (this.vx+this.chgSpd*(Math.random()*2-1))%this.maxV : this.vx;

this.vy = (!(random(this.freq))) ? (this.vy+this.chgSpd*(Math.random()*2-1))%this.maxV : this.vy;

 
Here's where the real magic lies. Here is where we assign the random velocities. I use the question mark, or tertiary operator here. It is the same as an IF statement, only the majority of the time it is used for assigning values based on a condition. Here's a quick tutorial (within a tutorial) on tertiary operators:

Value to be assigned = condition ? Assign this value if true : Otherwise assign this value;

Notice the colon (:) there, separating the conditional values. There are many other things you can do with tertiary operators, but for this tutorial, I'm only going to show you one of its uses.

Our condition for this conditional assignment is:

(!random(this.freq))

The random function, unlike it's younger (newer) brother, Math.random(), returns a value from 0 to whatever you give it as a parameter (here we have this.freq), but excluding that value. This condition will return true when a random calls a value that is 0. The NOT operator (!) makes this return true when it's 0 since 0 is false, NOTing it will make it true. This will return false for any other value. The higher the value of this.freq, the lower the chances of 0 popping up. This decides how often you want to change the speed of your object.

No, we aren't quite finished yet. There is more explaining to do, and you may also be interested in knowing how to implement this nifty piece of code. Onwards to the next page!

Next Page