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:
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.
Once you have opened the xmovement.fla file you
downloaded from the above link, you should see a movie
clip of a box.
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 ]
Preview the animation. You will notice that the box moves
ActionScript Explained Not to leave you in the dark, I will
explain what each line of the code accomplishes.
The first line is nothing more than the
OnClipEvent event handler (enterFrame)
that executes the code continuously in a one frame movie
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.
Try the following little
modifications and observe the results:
In the code, set the value for
instead of 1.
Preview the animation.
Drag the box all the way to the right
side of your stage and set the value for
instead of positive
Notice the big difference that is visible.
Modify the code by replacing
_y. Preview the animation and check out
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
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
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
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.
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
Did you enjoy reading this and found it useful? If so, please share it with
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.