Making Functions More Modular
       by Felix Reidl  |  21 November 2005

I am currently developing small flash games for the internet. This involves quite a huge amount of looking up programming techniques, for I don't want to invent everything from scratch such as, for example, a vector class, collision testing, and so forth!

Before I delve into this, here is an example of my (and your) finished product:

[ click on the animation and press the left and right arrows ]

But through all this research I could not spot a good, single tutorial on how to set up the animation of your characters. Those that I did find seemed inefficient such as the following:

function update()
{
 
if (action == "run")
{
if (direction == "right")
this._x++;
else
this._x--;
}
else if (action == "jump")
{
this._y += this.yspeed;
this.yspeed++;
}
}

The above code is your generic "update this object“ function. If you ever programmed like this then you know that it is a pain in the AS (2.0). It is hard to add extra actions, it's hard to read, in short, we can do better! So what alternatives are there?

Making Code Modular
The technique I want to introduce here uses a neat little trick to arrange your code in a logical manner and gives you ActionScript that is easy to re-use. For example, I could rewrite the above code and make all action calls like this:

function update()
{
action = action();
}


Uh? What? That's right. That's about everything we need in the update function. The trick is simple: instead of using many if-else-statements we use a function referrer to determine the next action. Essentially, we are breaking up parts of our code into smaller pieces to solve the problems with the generic function I addressed earlier.

Function Referrer
You can also reuse built-in functions by using variables. Flash lets you use variables to refer to functions, like this:

var cos = Math.cos;
trace(cos(2));

Basically what happens is that Flash stores the address of the Math.cos function in the variable. You then can easily use this variable like the function it refers to. This is quite useful, as the lookup of local variables is faster than the function lookup of the Math class.

These are two simple techniques I use to define what actions our animation character will perform. So, the next thing we need are functions to which our action() can refer to and a actual class to make the code valid:

class Player extends MovieClip
{
var action:Function;
var animation:String;
 
// constructor functions
function Player()
{
action = stand;
animation = new String();
animation = "stand";
}
 
function update()
{
action = action();
}
 
function stand()
{
animation = "stand";
 
if (Key.isDown(Key.SPACE))
return run;
 
return stand;
}
 
function run()
{
animation = "run";
 
_x += 10;
 
if (Key.isDown(Key.SPACE))
return run;
 
return stand;
}
}

Phew. Now, what happens if we call our update function? Well, we call the function that is referred to by action(), and this is initially the function stand(). If we do nothing, stand() will just return the reference to itself, which is then saved back into action and called the next time we update the class.

Now, the fancy part: if the User presses the spacebar, stand returns another function's referrer: run. So the next time the class is updated action() will call run(). Run moves our player by ten units and return 'run' if the spacebar is still pressed – else it returns stand.

Note

If you look at the code, notice that our Player class extends the MovieClip class. That means we can do all the stuff with it that we can do with a MovieClip.

In the next page, I will explain the code in detail.

Onwards to the next page!


 

page 1 of 2


 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.