Math makes the world go round

The Flash timeline allows you to create very sophisticated animations without having to muck about in the math which lies behind it. However, sometimes there are benefits to getting in there and using code to generate our animations for us. Actionscript driven animation is fundamental to Flash games, funky text effects and dynamic animations.

In this tutorial we are going to walk through the process of creating a simple animation with actionscript as an alternative to using the timeline. In the process we will be paying special attention to the new ClipEvents offered in Flash5. Get ready for some flashbacks to high school physics as we tackle motion, acceleration and collisions in actionscript.

Setting things up

One of the big questions facing you at the start of any Flash project is where to put the code. Remember that, unless there is a good reason, it is a good idea to keep your code off the main timeline and associated with your movie clips. In most cases, you want to bundle the visuals with the associated behaviour. In this case we will be tossing around a little graphic symbol called "ufo". The code will lie on the instance of the movie clip and make use of the new ClipEvent actionscript.

Let's get moving

Flash5 allows us to assign code to a particular movie clip instance. We can use the onClipEvent action to create code which is performed on every frame as the movie clips runs.

onClipEvent (enterFrame) {
   _x+=2;
}

Because this code is resides with the movie clip we don't have to worry about the clip's target. It is assumed that _x refers to the x-position of the ufo movie clip. Remember that Flash uses a co-ordinate system where the 0,0 point is the top left corner of the screen and values get larger as you go down and to the right. The expression _x+=2 means simply: take the current _x position and add 2 to it. The result is a ufo that moves along to the right.

Lets take the _x+=2 expression and change it to _x+=Number(speed). Place an editable text field on the stage with the variable name speed. This will allow the user to type in a speed and see the resulting movement. Try entering a number in the editable text field:

The speed variable represents the number of pixels to move the object each frame. If you enter a value of +1 for the speed the object will move at a speed of 30pixels per second (at 30fps).

Putting up the walls

To keep the ufo from flying off the side of the screen let's set up some rules to make it bounce off of the walls. First, we have to define the position of the right and left walls. To make things more flexible I will use the position of a new movie clip to mark the boundaries.

I've added a new movie clip called "boundary box" to the parent timeline. This box will be used to define the boundaries so that we can reposition the walls without messing around with the code. The new box has an instance name of "boundary". Note that we can hide this movie clip if we don't want it to show up by setting its visibility to false or tucking it behind another graphic.

We are going to use a new ClipEvent to establish the speed and left and right boundaries. The 'load' event occurs when the instance is first built.

onClipEvent (load) {
   speed = Math.round(Math.random()*10+10);
   left = _root.boundary:_x-(_root.boundary:_width/2);
   right = _root.boundary:_x+(_root.boundary:_width/2);
}

onClipEvent (enterFrame) {
   _x += speed;
   if (_x <left _X || > right) {
      speed = -speed;
   }
}

The 'if' statement tests for the current position of the ufo and if it goes out of bounds we then turn things around by reversing the sign of the speed variable (e.g. +5 becomes -5).

Wrap up

In this example we have built up the basic framework of animation through actionscript using a minimum of code. A good indication of well-written code is when you can create several instances of the same movie clip and have them all behaving nicely. Here's our ufo file after some friends have arrived to buzz around together:

In part2 we will add keyboard controls and throw in acceleration. Until then, try making these adaptations to the file:

• change the ufo graphic to something else
• resize the boundary box and see what happens
• add the code to move the ufo in the y as well as the x-axis.