Attaching movieclip along a path with rotation (Through AS3)

Question

How could I do:

To attach a movieclip (e.g. \'footsteps\'), along a path (other movieclip).

That would be within a interval for attaching one movieclip at a

Answer 1

1. Create an array of coordinates - this is your path. There are a number of ways you can approach actually creating the array, but the result should look similar to this:

var path:Array = [
    Point(0, 0),
    Point(20, 12),
    Point(60, 72),
    Point(67, 118)
];

2. Set up your nextStep() function or similar - this will gather information about the next step in the path such as the angle between it and your current step. You will also need to keep track of your current step, which can be represented by simply storing the index of where you're at in the path array. Altogether, it may look like this:

var currentStep:int = 0;

function nextStep():Object
{
    // Object to return.
    var out:Object = {
        hasDestination: false,
        destination: null,
        radians: 0
    };


    var current:Point = path[currentStep];

    // Check that you're not on the last step first.
    if(currentStep != path.length - 1)
    {
        currentStep ++;

        var next:Point = path[currentStep + 1];
        var t:Point = next.subtract(current);

        out.nextDestination = true;
        out.destination = next;
        out.radians = Math.atan2(t.y, t.x);
    }

    return out;
}

3. Use the above information to move - the object returned from nextStep() can be used to alter the position and rotation of a DisplayObject of your choice.

Assuming that entity is your DisplayObject:

var stepInfo:Object = nextStep();

if(stepInfo.hasDestination)
{
    entity.rotation = stepInfo.radians * 180 / Math.PI;
    entity.x = stepInfo.destination.x;
    entity.y = stepInfo.destination.y;
}
else trace("End of path reached.");

4. Tidy up (optional) - Consider creating your own class to be the result of nextStep() for tidyness, example:

public class StepInfo
{
    public var hasDestination:Boolean = false;
    public var destination:Point;
    public var radians:Number = 0;
}

I'd even suggest moving all of the above into a Path class so you can simply do stuff like:

var path:Path = new Path();
path.generate(); // create this yourself, generates the path array.

var step:StepInfo = path.nextStep();

trace(path.currentStep);

etc

Hope this helps.

Answer 2

You have to have your path as a mathematical function of t like (x,y) = f(t). In this case it's just a matter of moving a new movieclip to (x,y) and rotating it using for example Math.atan2.

In your case it's not clear what along a path (other movieclip) means. For example, is it static or dynamic?

The hackish way of doing this if you got a static path is using an empty sprite which is tweened along this path for 100 frames for example. In this way the function (x,y) = f(t) will be

mc.gotoAndStop(int((t-minTime)/(maxTime-minTime)));
var xToAddFootsteps:Number = mc.dummy.x;
var yToAddFootsteps:Number = mc.dummy.y;
var rotationOfFootsteps:Number = Math.atan2(xToAddFootsteps, yToAddFootsteps);

Provided that the path movieclip is called mc and the empty sprite inside is called dummy.