Philip Peralov

Philip is a Flash guru and a ActionScript freak. He has done a couple of projects, featuring games, programs, websites & cartoons. He's only 15 years old, but he well knows programing in Java & ActionScript and is a professional in Animating. In his free time he goes to the local High School :) in Bitola, Macedonia, Europe, where he lives.

View all articles by Philip Peralov
Now, we'll program the car, so it can left a trail on the ground, made by the wheels. For that purpose we'll use the Drawing API. The drawing API allows you to draw lines and shapes with ActionScript and gives you the freedom to start an application with the computer equivalent of a blank canvas, on which you can create whatever images you wish. We need to know what we want to do with the drawing API.

In this case we want to make a wheel trail. So, we're going to use the car _x and _y properties to draw those lines. First we'll try to draw just one line from the center of the car. So let's start.

All the scripts goes to the car mc (short term for MovieClip). Create a mc for the drawing (we use mc instead the stage to draw, because like this we can change the depth property).
onClipEvent (load) {
    var speed:Number = new Number (0);
    _root.createEmptyMovieClip ("drawing",1);
    this.swapDepths (_root.drawing);
}

The new empty mc it's called "drawingMC" and it has a depth value of 1. We use swapDepths to make the car over the trail. Otherwise the car can (will) be under them.

Now under the enterFrame event add the following script:
_root.drawing.lineStyle (3,0xeeeeee,100);
    _root.drawing.lineTo (_x,_y);

Yeah, it works nice, but at the start the lines start from 0,0 coordinates. Fix that by applying this script under the onLoad event.
_root.drawing.moveTo (_x,_y);


Next, we need to move the trail to the left or the right so it will looks like it's coming from one of the tires. We can't just use _x+2 or something like that, because the car rotates and the values need to change. That's why under the enterFrame event enter:
xTrail = Math.sin (_rotation * Math.PI / 180) * 10;
yTrail = Math.cos (_rotation * Math.PI / 180) * 10;
xTrailCalculated = _x - yTrail;
yTrailCalculated = _y - xTrail;

I'm not going to explain this script, because we already discussed this on page 2.

However, we're not going to remove the recently script _root.drawing.moveTo (_x,_y); and we're going to add something similar to the enterFrame event because when we gonna add another trail those two will get together.

Modify the script to something like this.
xTrailCalculated = _x - yTrail;
yTrailCalculated = _y - xTrail;
xTrailCalculated2 = _x + yTrail;
yTrailCalculated2 = _y + xTrail;
_root.drawing.moveTo (xTrailCalculated,yTrailCalculated);
_root.drawing.lineTo (_x - yTrail,<span id="_de_spell_word_1">_y</span> - xTrail);
_root.drawing.moveTo (xTrailCalculated2,yTrailCalculated2);
_root.drawing.lineTo (_x + yTrail,_y + xTrail);

All we need to do now is to add the following script to the onLoad event and we're done.
xTrail = Math.sin (_rotation * Math.PI / 180) * 10;
yTrail = Math.cos (_rotation * Math.PI / 180) * 10;
xTrailCalculated = _x - yTrail;
yTrailCalculated = _y - xTrail;
xTrailCalculated2 = _x + yTrail;
yTrailCalculated2 = _y + xTrail;

We applied the same script to the onLoad event because otherwise the lines will begin with coordinates of 0, 0, and we sure don't want that :) And if you want to apply stronger trail when the car brakes, think a litlle yourself......It's easy.

The source file and this tutorial in .pdf are in attachments