Imagine that you have to move an object in a straight line. No problem: in enterFrame you put something like this._x += this.speed and the object moves. It gets a bit more complicated when you need the object to follow some sort of a path. To solve problems of this kind you could use "Motion Tween", unfortunately this solutiton does not always work exactly the way the developer needs:

• what to do if the speed of the object has to change depending on the user's action?
• what to do if the actual path has to change dynamically?
• is it possible to recalculate the object position on the changing path without big math knowledge?

Anyway, if I am asking these questions it probably means that I might know the answers to them! :)
Read on.

1. CREATING A CHANGING PATH

Nothing difficult. Put a few movies together, create a class for them, render the result using movies as control points. Here you have some sort of waves on a sea:

[Download the source FLA*]

2. MAKING A SHIP

Nothing difficult again. On the event onEnterFrame make the object move horizontally controlled by user's action, for example by pressing left-right arrows (if it doesn't work with the example given below, click it as it has needs to have the focus). Have a look at source file if something is not clear.

[Download the source FLA]

3. USING PATH, IN THE END

Nothing complicated. Be aware though, that it is not a lesson on AS2. If you are not sure how to use AS2 class I advise that you look up info on the net first.

As we have a constantly changing path in onEnterFrame, we have to create an example of the class Path using the coordinates of the movies that create the actual object path as arguments. Instead of direct positioning the movies, we feed the calculated variable x to method getPoint of the example of the class Path. This method calculates and returns a point coordinate on the path which is located on the curve in a given distance. Even more than that. It returns the angle of a tangent to the curve in this point. Then we take all that and assign it out to ship parameters. Of course, look at the FLA to understand how it is done.

[Download the source FLA]

Suddenly, when testing we find an unexpected problem: the length of the path is changing all the time. The longer is the way along the curve from the very left to the ship, the closer it is to the start of x axis. It has to be fixed.

4. MOVING OVER TO RELATIVE SYSTEM OF POSITION CALCULATION

There is nothing extraordinary. Instead of simple x calcualtion we find the position of the ship as the percentage of the made distance. Then we calculate the absolute position on the path multiplying the length of the path and dividing by 100. Have a look at FLA and at the result:

[Download the source FLA]

This would be enough for a demonstration of Path advantages. But...

5. ADDING A BIT OF REALISM

The ship does not react at the waves. It goes straight like a tank regardless of going up an incline or down. It is worth changing it. Have a look how I did it in FLA. The simplest way is the best way: I added to the length of the gone distance one hundredth of a rotation.

[Download the source FLA]

6. MAKING A PICTURE OF UNREAL BEAUTY

To do this:

• bring the ship out of the movie into the root so that the ship would be in the background beyond the waves
• set the end points outside the visible field to get rid of glitches
• change the wave appearance

See the result and go through FLA:

[Download the source FLA]

Beautiful! The only thing is that the visitors of my website did not like the waves at all. Ok, let's make a fancy wave!

_______________

(*) All the source files use Actionscript 2.0 scripting language.