Before proceeding, it is assumed that you already know the basics of programming animation.

Once again, the complete, running program on how to animate 3-picture animation is shown before we continue.

Screenshot of the sample program.

function main() {
  Var:Number picA, picB, picC;
  Var:Number ctr = 1;
 
  Image:Load("Bee1.bmp", picA)
  Image:Load("Bee2.bmp", picB)
  Image:Load("Bee3.bmp", picC)
 
  Screen:Show()
 
  while (B1 == false) {
    Screen:CLS()
    if (ctr == 1) {
      Image:TBlit(50, 100, picA, screen)
    } else if (ctr == 2) {
      Image:TBlit(50, 100, picB, screen)
    } else if (ctr == 3) {
      Image:TBlit(50, 100, picC, screen)
      ctr -= 3;
    }
 
    ctr++;
 
    Screen:Render()
 
    Konsol:Delay(250)
  }
}

Make sure you download the needed resources, as well, to compile the program and run without error.

Okay, we begin with declaring three variables.

Var:Number picA, picB, picC;

These will be used as image buffers for our three pictures.

Var:Number ctr = 1;

Since a Boolean variable can only have a value of either true or false, it is not possible to use it if we are doing a 3-picture animation programming.

Here, we declared another Number variable which we named ctr (short for counter). We need someone (or something maybe) to count for us. I'll discuss more of this later in this tutorial.

  Image:Load("Bee1.bmp", picA)
  Image:Load("Bee2.bmp", picB)
  Image:Load("Bee3.bmp", picC)

So again, we needed to load the needed pictures for this tutorial.

Screen:Show()

And, once again, we need the viewing screen.

while (B1 == false) { /* scope... */ }

And of course, the main loop.

Screen:CLS()

The first thing to be written inside a main loop will be the Screen:CLS().

  if (ctr == 1) {
      Image:TBlit(50, 100, picA, screen)
    } else if (ctr == 2) {
      Image:TBlit(50, 100, picB, screen)
    } else if (ctr == 3) {
      Image:TBlit(50, 100, picC, screen)
      ctr -= 3;
    }
 
    ctr++;

When we were trying to program a 2-picture animation, we only tried to “Blit” or “TBlit” two image buffers. But since we are trying to load three pictures in this tutorial, we needed a counter.

The use of a counter will simply count. Then we utilize the counter by asking if count is one then show picture 1.

As such, we can translate the code to English as:

  is current count, 1? {
      draw 1st picture to buffer
    } or, is current count, 2? {
      draw 2nd picture to buffer
    } or, is current count, 3? {
      draw 3rd picture to buffer
      re-start counting to 0
    }
 
    count some more

The code above should be self-explanatory by now, except for re-start counting to 0 and not 1. Why should we be counting back to zero? Because, after counting back to zero, we will count some more which will be one.

Screen:Render()

Then, we display the primary image buffer to our viewing screen.

Konsol:Delay(250)

I also added a 1/4 of a second delay to our animation. This is not mostly used in many cases, I added it to do some slow-motion-like feature. This will slow down the animation so you could clearly see the illusion we made.

So the question here is that – will there be another strategy to display a more-than-three-picture animation? And the answer is no.

The code above where we utilized the counter will simply be expanded depending on your need. Let's say you want to display 12-picture animation.

  if (ctr == 1) {
      Image:TBlit(50, 100, picA, screen)
    } else if (ctr == 2) {
      Image:TBlit(50, 100, picB, screen)
    } else if (ctr == 3) {
      Image:TBlit(50, 100, picC, screen)
    } else if (ctr == 4) {
      Image:TBlit(50, 100, picD, screen)
    } else if (ctr == 5) {
      Image:TBlit(50, 100, picE, screen)
    } else if (ctr == 6) {
      Image:TBlit(50, 100, picF, screen)
    } else if (ctr == 7) {
      Image:TBlit(50, 100, picG, screen)
    } else if (ctr == 8) {
      Image:TBlit(50, 100, picH, screen)
    } else if (ctr == 9) {
      Image:TBlit(50, 100, picI, screen)
    } else if (ctr == 10) {
      Image:TBlit(50, 100, picJ, screen)
    } else if (ctr == 11) {
      Image:TBlit(50, 100, picK, screen)
    } else if (ctr == 12) {
      Image:TBlit(50, 100, picL, screen)
      ctr -= 12;
    }
 
    ctr++;

If you are going to animate something more or something less, simply do the necessary adjustments.

Just a thought: A nice and smooth animation requires at least 24 pictures shown one-at-a-time in just one second when it comes to TV Animation. But an acceptable smoothness in animation can also be achieve in just 12 pictures-per-second when it comes to Game Animation.

Before we end this tutorial, I'd like to share some ”code management” tip.

If in case you will code a 12-picture animation, try to declare a Number variable to be used as temporary image buffer.

Var:Number tmpbuffer;

After that, we can point the temporary image buffer to whichever-is-picked-picture.

Then make a single Blit or TBlit of the temporary image buffer to the primary image buffer.

Study the code below.

  //code segment
    if (ctr == 1) {
      tmpbuffer = picA;
    } else if (ctr == 2) {
      tmpbuffer = picB;
    } else if (ctr == 3) {
      tmpbuffer = picC;
    } else if (ctr == 4) {
      tmpbuffer = picD;
    } else if (ctr == 5) {
      tmpbuffer = picE;
    } else if (ctr == 6) {
      tmpbuffer = picF;
    } else if (ctr == 7) {
      tmpbuffer = picG;
    } else if (ctr == 8) {
      tmpbuffer = picH;
    } else if (ctr == 9) {
      tmpbuffer = picI;
    } else if (ctr == 10) {
      tmpbuffer = picJ;
    } else if (ctr == 11) {
      tmpbuffer = picK;
    } else if (ctr == 12) {
      tmpbuffer = picL;
      ctr -= 12;
    }
 
    Image:TBlit(50, 100, tmpbuffer, screen)
 
    ctr++;

This is a good way to manage a code. Believe me, this will come in handy.

• 3-Picture Animation - zip file of all the source codes demonstrated in this tutorial.