Movement Using ActionScript
         by kirupa chinnathambi

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.
     
  3. 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:

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

  1. 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:

  1. In the code, set the value for speed equal to 2 instead of 1. Preview the animation.
     
  2. 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.
     
  3. 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:
 

Modification B
By moving the box to the right and changing speed's value from 2 to -2, you are reversing the direction at which the box moves. Anytime you change the sign of a value that controls movement, you are basically reversing the direction of movement:
 

Modification C
We have basically been dealing with movement in the X direction. Moving the box in the Y direction is not that much difficult. Simply change _x to _y to see that the box move:
 

If you were really paying attention, you may be wondering why the square is moving up instead of moving down. After all, the speed value is a big -2, and in Geometry, I learned that Y decreases as one moves down. The reason is that Flash does not obey the Cartesian principles that you and I learn in school. In Flash, Y decreases as you move higher and increases as you move lower.


As always, I have provided the source code for this tutorial. Click the download for Flash MX link below to download them.
 

download source for flash mx

Did You Like This?

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.