After reading a post on another site about a dearth of "scripted movement" tutorials, I realized how true that observation was. When was the last time you saw a comprehensive tutorial that outlines the basics on how to use programming to move an object across the stage? How about something more complex such as changing directions, varying speed, moving in both x and y directions, and more. This tutorial and a series of subsequent tutorials will explain all this and more.

This tutorial will address simple movement. We will begin with the basics and move slowly along to the more complex procedures. I strongly believe, once you learn the basics of ActionScript movement, you will rarely, if ever, use motion tweens in your animations. The tutorial starts here...

Simple Movement along the X Axis
The best way to start exploring movement is to take a simple object and move it horizontally along the x axis. The following is an example of an object that moves along the x axis powered by only a few lines of code:

[ press the 'start over' text if you do not see anything ]

Let's create the above animation:

1. Click here to open an FLA that contains nothing but the interface. Don't worry, you will add the cool code to make the box move by yourself.
    
2. Once you have opened the xmovement.fla file you downloaded from the above link, you should see a movie clip of a box.
    
4. Right click on the box and select Actions. The Actions dialog box will appear. Copy and paste the following lines of code into the Actions dialog box:

onClipEvent(enterFrame) { speed = 1; this._x += speed; }

[ copy and paste the above code into the Actions dialog box ]

5. Preview the animation. You will notice that the box moves across slowly.

ActionScript Explained
Not to leave you in the dark, I will explain what each line of the code accomplishes.

onClipEvent(enterFrame) {
     speed = 1;
     this._x += speed;
}

The first line is nothing more than the OnClipEvent event handler (enterFrame) that executes the code continuously in a one frame movie clip.

In the second line, I am declaring and initializing the variable speed with a value of 1. As is expected, the variable speed refers to the speed at which the object will move.

In the third line, I set the current position of the movie clip (this._x) to continuously increment with the value of speed. You know I am incrementing because of the operator += following the statement this._x.

What is happening?
Let me explain what happens in the code. As I explained above, enterFrame continuously executes the code under it. The speed at which the object moves will be 1. Therefore, the first time the code runs through, the current X position of the movie clip increases by a value of 1. The second time the code runs through, the current X position of the movie clip increases by another value of 1.

This process gets repeated numerous times (25 times per second to be exact) to simulate movement. The speed at which the code executes depends on the frames per second (FPS) of the movie.

To understand the concepts more, try the exercises listed in Exploring Further.
 

EXPLORING FURTHER Try the following little modifications and observe the results: In the code, set the value for speed equal to 2 instead of 1. Preview the animation.   Drag the box all the way to the right side of your stage and set the value for speed to -2 instead of positive 2. Notice the big difference that is visible.   Modify the code by replacing _x with _y. Preview the animation and check out the changes.

If you tried the Exploring Further modification mentioned in the above box, your animations will look like the following. Do not hesitate to press the [ start over ] text to view the animation again (or for the first time).

Modification A
By changing the variable for speed from 1 to 2, we are changing the speed at which the x position increases. The higher the number, the faster the movement. Therefore, the box moves more quickly from the left to the right: