- Home
- Tutorials
- Flash
- Intermediate
- Actionscript Powered Movement

Page 3 of 5
Before we go any further, let me explain why I'm using a looping movieclip. Those of you using Flash 4 don't have many options really. In Flash 5 we could use an enterFrame clip event but there isn't any clean way of stopping a loop of that form, meaning when you want your ball to stop, you're going to have to use another conditional and you'll be using some additional overhead for each new frame your movie hits. Those of you using Flash MX who have read my Intervals tutorial might see this is another great application for Intervals. I'm not using them here though because showing this method makes the tutorial more universal, and you're all smart enough cookies to make the necessary changes if you decide to use Intervals, I'm sure.
OK, now you all have a working source file, so let's take a look at how it works. All the script is in the controller clip so we'll just go frame by frame through that:
What it does and how (line by line):
Frame 1:
loops = 0;
_root.target_x = Math.random()*450;
_root.target_y = Math.random()*300;
_root.xdiv = (_root.target_x-_root.circle._x)/20;
_root.ydiv = (_root.target_y-_root.circle._y)/20;
- Sets our counter variable, loops, to zero. This happens at the start of each new random positioning, but not during the tween itself.
- Variable target_x, the X position (_x) to which we intend to move, equals a random number up to 450 plus 50. This will vary depending on the dimensions of your movie and how far you want the clip to move.
- As above, for Y position.
- Variable xdiv equals our target _x minus our current _x, divided by 20. This is the distance we will move our object by each frame, to achieve a smooth tween. If you want to change the number of steps from 20 you may, but you must change all 20's to your other digit.
- As above for _y.
Going back to our rules for random movement, we've now established the fundamentals. We know where we are, where we're going, how many steps it's going to take, and how big each step will be. Now it's time to start stepping! That's where frames 2 and 3 come in.
Frame 2:
loops++;
_root.circle._x += _root.xdiv;
_root.circle._y += _root.ydiv;
- Increments variable loops by 1, to show that we have taken one more step.
- Sets the _x of our target clip to it's current _x plus the established step distance. Note that the step distance may well be a negative number if we're moving right to left, or from the bottom to the top of the screen. This wont matter though because you can add a negative number using the plus operator and it's still a valid operation. Eg. 2 + (-1) = 1.
- As above for _y.
So now our object has moved a few pixels in the x and y directions. Basically we just have to keep moving it until it reaches its target. We determine if it's yet reached its target in Frame 3. Note that the first 3 lines of Frame 3 are the same as those in Frame 2. This is so we get some movement every frame, and it makes our tween more smooth.
Frame 3:
loops++;
_root.circle._x += _root.xdiv;
_root.circle._y += _root.ydiv;
if (loops<20) {
gotoAndPlay(2);
} else {
gotoAndPlay(1);
}
- As in Frame 2.
- As in Frame 2
- As in Frame 2
- Conditional statement. Test if our counter variable, loops, is still less than 20. "Are we there yet?" If loops is less than 20, we're not there yet, so we;
- Loop back to frame 2 and step again.
- Otherwise we;
- Go back to Frame 1.
And of course, in frame 1, we generate another random target and the whole process starts over!.
"That's all very well Mr. Jesse, but I don't want to just move a ball randomly around the screen. I have this scenario where I want a user to input a location (via clicking there or entering values in a text field) and then I want the object to move to that location! Can you help me too?"
Surely can. Let's take a look, over the page.
Spread The Word
Article Series
-
Actionscript Powered Movement
