Tutorial 1 - Actionscripted Motion (June 26, 2001)

One of the most frequent questions that I see posted on Flash bulliten boards is in regards to actionscripted motion. "How do I make something move using actionscript as opposed to tweening?" I will attempt to explain the basic techniques that I use to create motion using actionscript.

Movie Clips and Properties:

The first thing you should understand before you even attempt to tackle this arena is the way movie clip objects can be manipulated using actionscript.

Movie clip symbols are built-in "objects" in Flash. Like all other objects in an "object-oriented" environment, movie clips have associated with them:

• Properties - things that describe an object in some way.
• Methods - things that an object can do, or that can be done with an object.

I won't really go into the details of properties and methods, but I have mentioned these things because in order to manipulate an object, you can make use of these properties and methods. The important properties that allows us to create "motion" are _x and _y.

_x and _y are properties that return the positional value of a movie clip object using x and y values. Remember way back to grade 9 math when you learned about the Cartesian Plane? Remember that all points on that plane could be represented by 2 numbers like this:

In this coordinate system there are 3 important things to note: (0,0) is located at the centre Right is positive x Up is positive y However, make note of these things when you refer to the coordinate system in Flash: (0,0) is located at the registration point of a movie clip and top left corner of the main stage. Right is positive x DOWN is positive y

Simple Motion (constant speed)

Motion can be scripted in the Flash environment by taking advantage of these properties. To create motion, all you have to do is take the current _x or _y property and increment it by a value over and over again. Think about it...say you are standing in the middle of an empty room. If you take your current position and take one step to the left, you have moved. Then, from that new position, take one more step to the left. Repeat this process over and over and you will have moved across the room.

The actionscript simply looks like this:

MC1._x = MC1._x + 5;

where MC1 is the instance name of your movie clip. Remember that according to Flash's coordinate system, adding to the _x property moves the clip right, subtracting from it moves the clip left. Also, adding to the _y property moves the clip down while subtracting from it moves the clip up.

Now, according to our statement above, using this line of code, we have met the criteria for incrementing the _x by a value. Now, we have to look at repeating that increment over and over.

The easiest way to execute a script continuously is to use onClipEvent(enterFrame) available in Flash 5 (if you are using Flash 4, the good ol' 2 frame looping script will work too). Clip events are attached to movie clips and the enterFrame event occurs every time a frame is played in your Flash movie (that's my explanation of it anyway...I'm not sure if that's technically exactly correct, but I hope it helps you to understand essentially what it does).

Incorporating the above script into a clip event might look like this:

onClipEvent(enterFrame) {
-----this._x = this._x +5;
}

"this" refers to the current movie clip, and so any movie clip that this script is attached to will move to the right by 5 pixel increments.

By combining _x and _y, you can create diagonal motion:

onClipEvent(enterFrame) {
-----this._x = this._x +5;
-----this._y = this._y +5;
}

This script moves the clip diagonally down and to the right.

Constrained Motion

Of course, the above scripts might not be that effective because they just move an object across the stage, and when it gets to the edge, it keeps going and disappears into nothingness.

We can set up "constraints" for an object by using an "if" statement, so that only if the clip is within a certain area do we have it keep moving in a direction. Let's say we want the clip to be constrained between 0 and 300 in the x direction.

onClipEvent(load) {
-----speed = 5;
}
onClipEvent(enterFrame) {
-----if (this._x <= 0 + this._width/2 || this._x >= 300 - this._width/2) {
---------speed = -speed;
-----}
-----this._x = this._x + speed;
}

All we're doing here is setting up "speed" as a variable and whenever the clip reaches a certain location (0 or 300), then change the speed to "-speed" and in essence reversing it's direction.

I threw in the "this._width/2" because this way, only the left or right edge of the clip has to reach 0 or 300 before it reverses direction.

Acceleration/Deceleration (changing speed)

Now that we have covered how to make a clip move, we can add a little bit of complexity to it by applying some math to create the illusion of changing speed. One of the most commonly used techniques to create the illusion of deceleration is this:

Say you have 2 points: an end point where you want a movie clip to end up, and the current position of the movie clip. If we take the distance between those 2 points and divide by 2, then move that distance, the movie clip has just traveled half the distance to the end point. Now if we take the distance between the new position of the clip and the end point and divide by 2, and move that distance, again we have moved half the distance to that end point. Notice that as the clip gets closer to the end point, half the distance becomes smaller and smaller, thus the motion appears to become "slower", thus creating the illusion of deceleration.

The actionscript might look something like this:

onClipEvent(load) {
-----this._x = 100 ;
-----endPosx = 250;
}
onClipEvent(enterFrame) {
-----currentPosx = this._x;
-----diffPosx = endPosx - currentPosx;
-----movex = diffPosx/2;
-----this._x = this._x + movex;
}

Again, all this does is find the current x position, find the distance to the end position, divide that distance by 2, add that distance to the current x position. I wrote it out like that so you could see all the steps, however, it could also be written shorter, like this:

onClipEvent(load) {
-----this._x = 100;
-----endPosx = 250;
}
onClipEvent(enterFrame) {
-----movex = (endPosx - this._x)/2;
-----this._x += movex;
}

Notice that this._x = this.x + move is the same as this._x += move. Just 2 ways Flash allows you to write this statement.

This type of motion has been used a lot with Flash, and probably the most well known use of this can be found at Barneys.com.

Friction/Gravity

To extend this a little further, we can look at simulating environments with friction and gravity.

What is friction? I don't know the technical definition, but essentially, if you take a ball and roll it across a wide open area, eventually it will come to a stop. This is because of friction. That can easily be mimicked in Flash. Think about it...the ball comes to a stop because it's speed decreases and eventually is reduced to 0. One way of applying this to Flash is to take the speed variable like we set up before, and multiply it by a number less than 1. That way, the value of speed is always decreasing.

onClipEvent(enterFrame) {
-----this._x = this._x*0.95;
}

That's all there is to it!

In terms of gravity, again, there is more than one way to tackle this topic. The way I have approached gravity in the past is that you can set up a "gravitational" variable and add that value to the speed variable value. (Of course, with gravity, this will only affect the y position of an object.) With each iteration of the script, the value of speed increases, thus, the clip accelerates in the +y direction (down).

onClipEvent(load) {
-----gravity = 1.5;
-----speed = 0;
}
onClipEvent(enterFrame) {
-----speed += gravity;
-----this._y += speed;
}

The other thing to take into consideration here is that usually there is a point where an object begins to move in the opposite direction(ie., when it hits the ground). We can account for this in much the same way as we did for putting constraints on the movement of a movie clip above. Let's say the ground is at a position of 300:

onClipEvent(load) {
-----gravity = 2;
-----speed = 0;
}
onClipEvent(enterFrame) {
-----speed += gravity;
-----currentPosy = this._y + speed;
-----if (currentPosy > (300 - this._width/2)) {
----------this._y = 300 - this._width/2;
----------speed = -speed*0.8;
-----} else {
----------this._y += speed;
-----}
}

Spring-Style

One of the popular applications of this motion scripting these days has been in the creation of a "spring-style" motion. This uses much the same concepts as the deceleration script, with a little adjustment in the mathematical formula.

There are a few formulas around that will create this type of motion. Here is one example:

onClipEvent(load) {
-----this._x = 100 ;
-----endPosx = 250;
-----movex = 0
}
onClipEvent(enterFrame) {
-----currentPosx = this._x;
-----diffPosx = endPosx - currentPosx;
-----movex = movex + diffPosx/5;
-----movex = movex*0.85;
-----this._x = this._x + movex;
}

Again, this code can be abbreviated like this:

onClipEvent(load) {
-----this._x = 100 ;
-----endPosx = 250;
-----movex = 0
}
onClipEvent(enterFrame) {
-----movex += (endPosx - this._x)/5;
-----movex *= 0.85;
-----this._x += movex;
}

You can play with the numbers a little bit to achieve different types of motion. If you replace "5" with a larger number, the motion slows down. If you replace "0.85" with a smaller number, the "springiness" decreases.

The reason why this formula works is this:

1. The value of movex starts at 0 so the object is not moving
2. As this script executes, the value of move continues to increase because we are adding (endPosx-this._x)/5 to the current value of movex. Thus, the object appears to accelerate because this value is growing larger.
3. However, at the point when the object reaches the endPosx, the difference between endPosx and this._x is 0, thus movex does not increase.
4. Then, when the object passes the point endPosx, the difference between endPosx and this._x becomes the inverse of what it was previously, therefore, the value of movex should begin to decrease.
5. When the object reaches a point where movex = 0, the object stops.
6. However, since there is still a distance gap between endPosx and this._x, the value of movex will increase again, however in the opposite direction, thus the object moves back towards the endPosx.
7. This will repeat itself until the motion of the object becomes negligible.

Conclusion

Now that you've seen some of this script in action, you can see that it's not really that difficult to pull this stuff off. It's just a matter of using some common sense and some simple math to simulate these different types of motion.

Please e-mail me to let me know what you think of this tutorial, or if there are other tutorials you'd like to see here.