Making Functions More Modular

by Felix Reidl   | filed under Flash and ActionScript

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 section, I will explain the code in detail.

In the previous section, I explained one may of making your functions modular, but I also introduced a lot of code. I will explain what the code does on this page.

class Player extends MovieClip
{

As explained above: we want our class to be able to control the position of our MovieClip. The 'extends' keyword means that all functions and variables from 'MovieClip' are inherited to our 'Player' class.

Tip

To easily assign a class to a MovieClip, bring up the 'Linkage Properties' and assign the class by entering it's name in the AS 2.0 Field.

var action:Function;
var animation:String;
// constructor functions
function Player()
{
  action = stand;
  animation = new String();
  animation = "stand";
}

This part simply declares the member variables 'action' (as a referrer to a function) and 'animation' (a String that contains the name of the animation that should be played).

The function 'Player' is the constructor for our class, it's called when an instance of the class is created (if you assign the class to a MovieClip it is instanced when the MovieClip is loaded). We simply initialize the variables here, most important the 'action'-referrer, as we will call it in the 'update' function.

function stand()
{
  animation = "stand";
  if (Key.isDown(Key.SPACE))
  return run;
  return stand;
}

This is the first thing our Player can do – simply stand. And he'll do it until the user presses the spacebar, in this case the function won't return itself anymore but the 'run' function we'll handle next.

function run()
{
  animation = „run“;
  _x += 10;
  if (Key.isDown(Key.SPACE))
  return run;
  return stand;
}

Now, the 'run'-function works similarly: as long as the user presses space, our Player runs (and his position is increased by 10 units per frame). If the user stops pressing space the function returns the referrer to the 'stand'-function, the Player stops running.

Okay, this isn't a very fancy script. So what's the point?
Think about this: what if we want to integrate another function, 'jump()'? All we have to do is write it and let the other functions return it if necessary!

If you want a little advanced example, download the class file from the example animation in the previous section. You'll also see why we have the variable named 'animation': it tells us which animation is played and if it's the one that should be played.

Pros and Cons

This technique proved quite useful for me in the past. You have to try for yourself if it suits you. But here are some pros and cons that might help you decide:

Pros:

• No complicated „if-else“ statements. The programming logic is implicated in the return values.

• Re-usable code. You can easily copy just one function and fit it into another program.

• Nice structured ActionScript.

Cons:

• You must get used to it.

• More function calls (as if that matters...).

• Danger of redundant code. As there is only one function called at a time, you might have to code the same things twice (i.e. Check if the player hits an enemy, etc.) but that can be minimized by introducing functions that are outside of the 'flow'.

I have provided the source files used for creating the example animation you saw in the earlier page:

If you have any questions, feel free to post them on the kirupaForums.

Good Luck!

Felix Reidl

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇