Syncronize the movement of an animated sprite

I am going mad with this trouble! <img src="smileys/smiley19.gif" border="0" align="middle" />

I am building an adventure game that will be played by school childrens.

I have to add some animated monsters inside the levels.

They have to move from left to right (for example 300 px) and after goes back.

Each animation is about 20 frames.

I need this in loop.

Here an example:

dysotek.net/html5/animation.jpg

I need the same function too for a vertical movement (up to down), where the animations aren't flipped images (straight view and back view).

Till now I tried:

1) sine behavior (wave: sawtooth and reversed sawtooth)

2) sine behavior (wave: sine)

3) simulate control

I can't syncronize well the movement with the animations, in order to use the right animation only when the monster is run to right and the left animation only when the monster is run to left.

For example I am getting trouble like dephase position of the monster animation.

This is one of the codes that I have used:

dysotek.net/html5/sine.jpg

Do you have built functions like this?

Can you help me?

Thanks!

Here is a simple but very nice example of implementing patrolling monsters using platform behavior and collisions. It should get you quickly to where you want to be:

PLATFORMER: Enemy control with platform behavior

When you understand that, I highly recommend JohnnySix's Patrolling Example in the arcade.

Thanks kittiewan! <img src="smileys/smiley1.gif" border="0" align="middle" />

The patrolling system of the First example works fine on my game (at least for the horizontal movements)