```Welcome!  In this episode, I am going to attempt to make the character animate while he is walking... also I am going to prevent him from walking off the edge of the form.

First, let's do the animation:  We are going to need a cycler for the animation.
One of the tricky parts of animation is coordinating the animation cycler number with the display and the program execution.
Here, it will be simple: while the button is pressed, we will update the cycler.
When the buttons are released, the cycler will reset.

Usually, the counter will be updated something like this:
cycler = (cycler + 1) % numberofframes
Since the numberofframes is four (if you look at the bitmap from the previous section, our Cycler will be like:
cycler = (cycler + 1) % 4
And since % 4 is equivalent to & 3, we can do this.
cycler = (cycler + 1) & 3

But, I'm going to pretend that I don't know if this is going to be the final picture.
Instead, I'll make it a constant.

So, here is what we add:

int animcycler;
// This is the animation cycler that will count from 0 to 3 and back to 0.

const int thewalkingframecount = 4;
// How many frames are in each walking cycle.

animcycler - This is the animation cycle counting from 0 to 3 and back to 0 (also, called a Modulo-4 counter)
thewalkingframecount - Number of frames in the walking frame animation cycle.  This will be used in the timer
to determine what part of the image that we need to draw.

First, we need to make a change in the Timer... the drawimage needs to be changed to compensate for this new constant.  So, we need to make it a multiplication.

new Rectangle(thecharwidth * (chardirec << 2), 0, thecharwidth, thecharheight)
becomes
new Rectangle(thecharwidth * chardirec * thewalkingframecount, 0, thecharwidth, thecharheight)

Now, let's get to the coding:

First, we need to determine when the image should move.
We could just put it in the goleft and the goright procedures.
Since they are in an in if...else block, if both left and right are pressed, the character will go left.
So, I will add some cycler updation at the end of goleft and goright blocks.

// Now update the animation cycler.
animcycler = (animcycler + 1) % thewalkingframecount;

Now, when none of these keys are pressed, we need to set animcycler to 0
(or 2, which might be interesting, but somewhat related to the number of frames, so we'll forego this).
When these keys are released, goleft and goright are both false.
We could add them to the timer or we could add them to the KeyUp event.
If we add it to the timer, that means that it'll will execute every time the timer ticks...
and since we'll have to update the artwork, regardless of where we put it.
In the timer, this will eventually cause the artwork to be updated everytime, regardless of the keypress combination.
So, this should go into the Form's KeyUp.  It can go after the unsetting of goleft and goright.
if (  !goleft && !goright  )
{
// If neither key is pressed.
animcycler = 0;
// Reset the counter, and signal another redraw.
updateartwork = true;
}

Now, for the actual redrawing depending on the value in AnimCycler.
We'll just need to make a minor modification to the Rectangle in the GFX.DrawImage...

new Rectangle(thecharwidth * chardirec * thewalkingframecount, 0, thecharwidth, thecharheight)
becomes
new Rectangle(thecharwidth * chardirec * thewalkingframecount + animcycler * thecharwidth, 0, thecharwidth, thecharheight)

making the whole line:

gfx.DrawImage(playerbmp, playerloc.X, playerloc.Y , new Rectangle(thecharwidth * chardirec * thewalkingframecount + animcycler * thecharwidth, 0, thecharwidth, thecharheight), GraphicsUnit.Pixel);

At this point, you should see the little 'kid' walking.  (Isn't that adorable...)

Now, to keep the character from walking off of the form... even though he does walk rather slow, he can find his way off screen (fortunately, an exception is not raised).

This collision detection (and all kinds of collision detection) will be best served immediately after character moves (this is a fundamental rule).
First, to check if the character has hit the left side is simple:

if (playerloc.Left < 0)
{
// If the player goes off the edge of the form, then we will move him back to the edge.
playerloc.Offset(-playerloc.Left, 0);
}

And this only needs to go under the goleft block.  As of now, we can't get off the left edge of the screen unless the left button is pressed.

The right side is simple as well, only because I am using a Rect structure, where a .Right property exists.
If I were using Points, I would have to check If playerloc.Left + thecharwidth > themapwidth Then.  But I can just do this:

if (playerloc.Right > themapwidth)
{
// If player goes off right edge... move him back.
playerloc.Offset(themapwidth - playerloc.Right, 0);
}

That goes into the goright block.
The offset conditions that I chose are simply mathematics.  If the player is off the left edge of the screen,
his .Left is negative... negating it will make it positive, and adding will move the player back to 0. (a - a = 0)
If the player goes off the right side of the screen, playerloc.Right - themapwidth is the distance that the character is from the edge.
Once again, negating it and adding it to the player location will move it back to the edge.
( -[a - b] = [-a + b] = [b - a] ).

if (goleft)
{
playerloc.Offset(-themovespeed, 0);
// Move player left.
if (playerloc.Left < 0)
{
// If the player goes off the edge of the form, then we will move him back to the edge.
playerloc.Offset(-playerloc.Left, 0);
}
updateartwork = true;
chardirec = 0;  // Look left.
// Now update the animation cycler.
animcycler = (animcycler + 1) % thewalkingframecount;
}
else if (goright)
{
playerloc.Offset(themovespeed, 0);
// Move player right.
if (playerloc.Right > themapwidth)
{
// If player goes off right edge... move him back.
playerloc.Offset(themapwidth - playerloc.Right, 0);
}
updateartwork = true;
chardirec = 1;  // Look right.
// Now update the animation cycler.
animcycler = (animcycler + 1) % thewalkingframecount;
}

On the next episode, I am going to try to make the character run and jump.
```